Ext JS鼓勵(lì)用戶利用結(jié)構(gòu)化的應(yīng)用程序架構(gòu)浙巫。
在我們的示例中潭流，我們使用MVC（模型/視圖/控制器）方法毙死。
這有助于我們將應(yīng)用程序的數(shù)據(jù)侵续，邏輯和視圖保存在單獨(dú)的孤島內(nèi)倔丈。
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架構(gòu)中，大多數(shù)類是模型状蜗，視圖或控制器需五。用戶與視圖交互，可以顯示模型中保存的數(shù)據(jù)轧坎。這些交互由Controller進(jìn)行監(jiān)視宏邮，然后Controller根據(jù)需要通過更新視圖和模型來響應(yīng)交互。
MVC的目標(biāo)是清楚地定義應(yīng)用程序中每個(gè)類的職責(zé)缸血。因?yàn)槊總€(gè)類都有明確的責(zé)任蜜氨，所以它們與大環(huán)境脫鉤。這使得應(yīng)用程序更容易測試和維護(hù)捎泻，并且其代碼更可重用飒炎。
類和繼承
我們已經(jīng)從簡單地創(chuàng)建組件切換到使用Ext.define方法定義新的組件類。
這些類通過指定其所需基類的“extend”屬性繼承其大部分功能笆豁。
我們選擇擴(kuò)展的類與我們以前創(chuàng)建的類相同郎汪。
正如你所看到的，我們在類定義中使用了extend闯狱。
這是一種創(chuàng)建自己的類的方法煞赢，該類繼承您要擴(kuò)展的類中的所有方法，屬性和配置選項(xiàng)哄孤。
所有Ext JS組件從Component類繼承屬性照筑。
這意味著組件具有一定的能力，傳遞給Ext JS框架中的所有可視組件。
例如凝危，TabPanel使用Component饭弓，Container和自身的所有能力，因?yàn)門abPanel擴(kuò)展了Container媒抠，而Container擴(kuò)展了Component弟断。
這被稱為繼承鏈。
這不是你必須完全理解趴生，但它是重要的認(rèn)識(shí)到它的存在阀趴，因?yàn)樗o你的視覺組件所有的超級(jí)大國存在于其層次結(jié)構(gòu)。
