如何Ext Designer中创建可复用的组件

Ext JS框架提供面向构件的开发模式,使用面向对象的方式让你项目中的所有基类和公共函数都是封装成一个独立的组件.Ext Designer已经包含了生成符合框架本身风格的Ext JS组件类的功能.Ext Designer项目中的所有根级别组件都会输出到两个JavaScript文件:

<类名>.ui.js -- 该文件主要负责UI,所有UI配置和子项应用都可以在Ext Designer图形界面中直接修改.

<类名>.js -- 该文件主要负责业务逻辑,如组件的行为,事件处理等.

我们为什么要这样做呢？ 让我们创建一个登录表单的例子，一个表单界面里面有一些文本框的和一个按钮。

LoginForm.ui.js

LoginFormUi = Ext.extend(Ext.form.FormPanel, {
    title: 'Login',
    width: 340,
    height: 160,
    padding: 10,
    monitorValid: true,
    initComponent: function() {
        this.defaults = {
            anchor: '100%',
            allowBlank: false
        };
        this.initialConfig = Ext.apply({
            url: '/user/login',
            standardSubmit: true
        }, this.initialConfig);
        this.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            },
            {
                xtype: 'textfield',
                fieldLabel: 'Password',
                inputType: 'password',
                name: 'password'
            },
            {
                xtype: 'checkbox',
                boxLabel: 'Remember Me',
                name: 'remember_me'
            }
        ];
        this.fbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'Login',
                    formBind: true,
                    type: 'submit',
                    ref: '../btnLogin'
                }
            ]
        };
        LoginFormUi.superclass.initComponent.call(this);
    }
});

LoginForm.js

LoginForm = Ext.extend(LoginFormUi, {
    initComponent: function() {
        LoginForm.superclass.initComponent.call(this);
    }
});

这种将UI和业务逻辑分开的的好处就是你改变UI的时候不会不小心改到逻辑代码.正如你看到的,一个项目可以分成很多个逻辑块,它们之间都是独立的.自己维护和管理自己的那一块代码.

我们在使用的时候就变得非常简单:

我们其实还可以分得更小,如将密码框单独出来成为一个组件.

LoginForm.ui.js - 使了用密码组件,代码变得非常简洁

LoginFormUi = Ext.extend(Ext.form.FormPanel, {
    // ...
    initComponent: function() {
        // ...
        this.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            },
            {
                fieldLabel: 'Password',
                xtype: 'passwordfield'
            },
            {
                xtype: 'checkbox',
                boxLabel: 'Remember Me',
                name: 'remember_me'
            }
        ];
        // ...
    }
});

这种将UI和逻辑分开的做法,使我们的软件更加有层次结构.你可以享受到真正强大的面向架构带来的好处:可复用，可扩展，可管理和代码简洁.

英文原文:
http://www.sencha.com/blog/2010/12/14/reusable-and-customizable-components-in-ext-designer/