下面将 用户界面称为UI 业务逻辑称为BL
几个重点
1. Ext.extend()
2. UI与BL解耦
每个模块分为3个文件
1. UI定义
2. BL和事件处理
3. 组织
UI定义
// Account.ui.js 定义UI
AccountUi = Ext.extend(Ext.form.FormPanel, {
title: 'Account',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
width: 600,
frame: true,
initComponent: function() {
this.items = [
{
xtype: 'container',
autoEl: 'div',
layout: 'column',
items: [
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
columnWidth: 0.5,
items: [
{
xtype: 'textfield',
fieldLabel: 'First Name',
anchor: '95%',
name: 'fname',
ref: '../../fname'
},
{
xtype: 'datefield',
fieldLabel: 'Birth of day',
anchor: '95%',
name: 'birthday',
ref: '../../birthday'
}
]
},
{
xtype: 'container',
autoEl: 'div',
layout: 'form',
columnWidth: 0.5,
items: [
{
xtype: 'textfield',
fieldLabel: 'Last Name',
anchor: '95%',
name: 'lname',
ref: '../../lname'
},
{
xtype: 'combo',
fieldLabel: 'Sex',
anchor: '95%',
name: 'sex',
ref: '../../sex'
}
]
}
]
},
{
xtype: 'htmleditor',
anchor: '98%',
fieldLabel: 'Memo',
height: 150,
width: 300,
name: 'memo',
ref: 'memo'
}
];
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Save',
ref: '../saveBtn'
},
{
xtype: 'button',
text: 'Reset',
ref: '../resetBtn'
}
]
};
AccountUi.superclass.initComponent.call(this);
}
});
BL和事件处理
// Account.js 处理业务逻辑和事件 关于如何引用到Form中的变量, 请参考 组件的 ref 的定义与配置
Account = Ext.extend(AccountUi, {
initComponent: function() {
Account.superclass.initComponent.call(this);
this.saveBtn.on('click', this.doSaveAction, this);
},
doSaveAction: function() {
alert('do business A....');
alert('do business B....');
}
});
组织
// index.js
Ext.onReady(function() {
var account = new Account({
renderTo: Ext.getBody()
});
account.show();
});
如果为生成模块的UI感到苦恼，字段太多感到维护困难，那么ExtJS Designer将是选择之一。以后开发的工作量将从UI的排版和字段的维护降至最低点，而你所专注的只有业务逻辑的处理。
–end–