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

最新推荐文章于 2025-11-22 12:13:55 发布

最新推荐文章于 2025-11-22 12:13:55 发布 · 186 阅读

文章标签：

#EXT #UI #工作

叁 · 代码实战 CP 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用ExtJS框架进行应用开发的方法，通过UI与业务逻辑分离的方式提高开发效率。详细展示了如何定义UI组件、处理业务逻辑及事件，并利用ExtJS Designer简化UI布局与维护工作。

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