필자는 Ext JS 4에서 무엇이 필요한지 알아 내려고 노력해 왔으며 합리적인 답을 찾지 못했습니다.Ext JS 4 : 요점은 무엇입니까?
이
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.application({
name: 'Test',
appFolder: 'app',
controllers: ['TheController'],
requires: ['Test.Utils', 'Test.Utils2'], // I don't think this does anything... couldn't find this option for Ext.application
launch: function() {
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'thegrid',
region: 'center',
title: 'blah!'
}]
});
}
});
응용 프로그램/컨트롤러/TheController.js
Ext.define('Test.controller.TheController', {
extend: 'Ext.app.Controller',
models: ['TheModel'],
stores: ['TheStore'],
views: ['TheGrid'],
init: function() {
}
});
응용 프로그램 /보기/TheGrid.js
을 app.js : 이제 나는 다음과 같은 코드가 있다고 가정 해 봅시다Ext.define('Test.view.TheGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.thegrid',
requires: ['Test.store.TheStore'],
store: 'TheStore',
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Phone', dataIndex: 'phone'},
{header: 'Hello', dataIndex: 'hello'}
]
});
응용 프로그램/저장/TheStore.js
Ext.define('Test.store.TheStore', {
extend: 'Ext.data.Store',
requires: ['Test.model.TheModel', 'Test.Utils'],
model: 'Test.model.TheModel',
data: [
{name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
{name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
{name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
]
});
응용 프로그램/모델/TheModel.js
Ext.define('Test.model.TheModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'hello', type: 'string'}
]
});
응용 프로그램/Utils.js
Ext.define('Test.Utils', {
singleton: true,
requires: ['Test.Utils2'],
getText: function() {
return Test.Utils2.hello + 'world';
}
});
응용 프로그램 /Utils2.js
Ext.define('Test.Utils2', {
singleton: true,
hello: 'hello'
});
나는 이것이 실제로 긴 예제라는 것을 알고 있지만, 나는 내가하고있는 것을 완전히 묘사해야했다. Utils는 Utils2의 hello 변수를 호출해야하기 때문에 Utils2를 사용합니다. 나머지 코드는 그리드를 설정하고 TheStore에서 Utils.getText 함수를 호출하는 것입니다. Firebug는 TheStore.js의 라인 6에서 Test.Utils is undefined을 던졌습니다. 그 시점에서 Test.Utils는 분명히 존재하지 않지만 Test.Utils2는 존재합니다.
내 질문은 ... 왜 Utils2가 존재하지만 Utils는 그렇지 않습니까? 나는 내가 필요로하는 수업을 가져와야한다고 생각했기 때문에 그들을 사용할 수있게되었지만 나는 틀렸다고 생각한다. 나는 Sencha 워드 프로세서와 수많은 스레드를 읽었지만 실제로는 아무 것도 이해하지 못했고 실제로이 예제를 설명하지는 않습니다. 누구나 여기 통찰력을 발휘할 수 있습니까? 나는 그것을 고맙게 생각할 것이다.
** 또한 나는 여기서 몇 가지 바보 같은 일을하고 있음을 알고 있지만, 단지 예시 일 뿐이므로 글로벌 Utils를 결합하거나 전역을 사용하지 않을 것입니다 ... 나는 단지 요구 옵션을 찾아 내려고. 아래 Izhaki의 대답에
UPDATE
덕분에, 내가 뭔가를 알아 냈어. 내가 정의하고있는 클래스에서 필요한 클래스를 사용하려면 객체가 만들어지기를 기다려야합니다 (IE, initComponent 사용).
app/저장/TheStore.js
Ext.define('Test.store.TheStore', {
extend: 'Ext.data.Store',
requires: ['Test.model.TheModel'],
model: 'Test.model.TheModel'
});
응용 프로그램 /보기/TheGrid.js
Ext.define('Test.view.TheGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.thegrid',
requires: ['Test.store.TheStore'],
store: 'TheStore',
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Phone', dataIndex: 'phone'},
{header: 'Hello', dataIndex: 'hello'}
],
// This is the change that works
initComponent: function() {
this.callParent();
this.store.loadData([
{name: 'keanu reeves', phone: '1800matrices', hello: Test.Utils.getText()},
{name: 'james earl jones', phone: '1800starwar', hello: 'nothing here'},
{name: 'barack obama', phone: '1800prsidnt', hello: 'hello world'}
]);
}
});
이 작동하지만, 내 마지막 질문은 ...TheStore의 TheModel 및 TheGrid의 TheStore에 대한 요구 사항을 가져야합니까? TheController가 TheGrid에서 Test.Utils를 사용할 수 있기 때문에 TheController가 필요로하는 모든 것을 처리하고있는 것처럼 보이지만 TheGrid는 Test.Utils이 필요하다고 명시하지 않습니다.
또한 Sencha docs의 this example도 TheStore가 만들어 질 때까지 Test.Utils를 사용하지 않았기 때문에 Sencha docs의 더 혼란 스럽습니다.하지만이 예제는 초기화를 기다릴 필요없이 Child 클래스를 사용할 수있는 것 같습니다. initComponent 사용).
나는이 대답을 좋아하지만, 설명 할 수없는 몇 가지 사항이 남아있다. – incutonez
첫 번째 새로운 질문 : TheStore에서 TheModel을 요구하지 않아도됩니다. (모델 구성 에서처럼 모델 구성에서와 같이 필요하지만 설정자와 getter를 필요로하지 않습니다.). TheGrid에서 요구 사항을 필요로하지 않아도됩니다. 컨트롤러가 모든 것을 처리하고 있습니다. – Izhaki
기본적으로 응용 프로그램이 시작되면 모든 컨트롤러와 해당 구성 객체에서 참조되는 모든 모델/뷰/저장소의 인스턴스가 동적으로로드되고 만들어집니다. 일단 이것이 끝나면, 이것들 모두는 뷰 (view xtypes 포함)의 범위에 들어갑니다. – Izhaki