基于ExtJS项目实践: 用户界面与业务逻辑的解耦

下面将 用户界面称为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–