Ext JS鼓励用户利用结构化的应用程序架构。
在我们的示例中，我们使用MVC（模型/视图/控制器）方法。
这有助于我们将应用程序的数据，逻辑和视图保存在单独的孤岛内。
Ext.define('Employees', {
extend: 'Ext.data.Store',
alias: 'store.employees',
data: [{
"firstName": "Jean",
"lastName": "Grey",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(372) 792-6728"
}, {
"firstName": "Phillip",
"lastName": "Fry",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(318) 224-8644"
}, {
"firstName": "Peter",
"lastName": "Quill",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(718) 480-8560"
}]
});
Ext.define('PopupForm', {
extend: 'Ext.form.Panel',
xtype: 'popupform',
controller: 'popupform',
title: 'Update Record',
width: 300,
floating: true,
centered: true,
modal: true,
items: [{
xtype: 'textfield',
name: 'firstname',
label: 'First Name',
bind: '{employee.firstName}'
}, {
xtype: 'toolbar',
docked: 'bottom',
items: ['->', {
xtype: 'button',
text: 'Submit',
iconCls: 'x-fa fa-check',
handler: 'submitUpdate'
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: 'cancelUpdate'
}]
}]
});
Ext.define('PopupFormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.popupform',
cancelUpdate: function () {
var view = this.getView();
view.destroy();
},
submitUpdate: function(me) {
var view = this.getView();
view.destroy();
}
});
Ext.define('MyListViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.listview',
onPopupForm: function (view, index, item, record) {
Ext.Viewport.add({
xtype: 'popupform',
width: 400,
record: record,
viewModel : {
data: {
employee: record
}
}
});
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.Viewport.add({
xtype: 'tabpanel',
controller: 'listview',
items: [{
title: 'Employee Directory',
xtype: 'grid',
iconCls: 'x-fa fa-users',
listeners: {
itemtap: 'onPopupForm'
},
store: {
type: 'employees'
},
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
}, {
title: 'About Sencha',
iconCls: 'x-fa fa-info-circle'
}]
});
}
});
MVC
在MVC架构中，大多数类是模型，视图或控制器。用户与视图交互，可以显示模型中保存的数据。这些交互由Controller进行监视，然后Controller根据需要通过更新视图和模型来响应交互。
MVC的目标是清楚地定义应用程序中每个类的职责。因为每个类都有明确的责任，所以它们与大环境脱钩。这使得应用程序更容易测试和维护，并且其代码更可重用。
类和继承
我们已经从简单地创建组件切换到使用Ext.define方法定义新的组件类。
这些类通过指定其所需基类的“extend”属性继承其大部分功能。
我们选择扩展的类与我们以前创建的类相同。
正如你所看到的，我们在类定义中使用了extend。
这是一种创建自己的类的方法，该类继承您要扩展的类中的所有方法，属性和配置选项。
所有Ext JS组件从Component类继承属性。
这意味着组件具有一定的能力，传递给Ext JS框架中的所有可视组件。
例如，TabPanel使用Component，Container和自身的所有能力，因为TabPanel扩展了Container，而Container扩展了Component。
这被称为继承链。
这不是你必须完全理解，但它是重要的认识到它的存在，因为它给你的视觉组件所有的超级大国存在于其层次结构。
