1

ExtJS 比 jQuery 更冗长，与 jQuery 相比，它让你编写更多的东西来做某事。我知道我们不应该将 jQuery 与 ExtJS 进行比较，但因为 ExtJS 是最完整的 Javascript UI 框架，而 jQuery 是库。但是在使用 jQuery 很长一段时间后，当我们迁移到 ExtJS 时，我们的工作效率似乎降低了。

var panel = Ext.create('Ext.panel.Panel',{
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        ...

我们不能在这里保存一些击键吗？在表单和其他组件中创建文本框也是如此。

编辑

@详细代码：

function createPanel(){
    var panel = Ext.create('Ext.panel.Panel',{
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'tabpanel',
            itemId: 'mainTabPanel',
            flex: 1,
            items: [{
                xtype: 'panel',
                title: 'Users',
                id: 'usersPanel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                tbar: [{
                    xtype: 'button',
                    text: 'Edit',
                    itemId: 'editButton'
                }],
                items: [{
                    xtype: 'form',
                    border: 0,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Name',
                        allowBlank: false
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Email',
                        allowBlank: false
                    }],
                    buttons: [{
                        xtype: 'button',
                        text: 'Save',
                        action: 'saveUser'
                    }]
                }, {
                    xtype: 'grid',
                    flex: 1,
                    border: 0,
                    columns: [{
                        header: 'Name',
                        dataIndex: 'Name',
                        flex: 1
                    }, {
                        header: 'Email',
                        dataIndex: 'Email'
                    }],
                    store: Ext.create('Ext.data.Store',{
                        fields: ['Name', 'Email'],
                        data: [{
                            Name: 'Indian One',
                            Email: 'one@qinfo.com'
                        }, {
                            Name: 'American One',
                            Email: 'aone@info.com'
                        }]
                    })
                }]
            }]
        },{
            xtype: 'component',
            itemId: 'footerComponent',
            html: 'Footer Information',
            extraOptions: {
                option1: 'test',
                option2: 'test'
            },
            height: 40
        }]
    });
}

@Compact 代码

// Main global object holding
var q = {
    // config object templates
    t: {
        layout: function(args) {
            args = args || {};
            var o = {};
            o.type = args.type || 'vbox';
            o.align = args.align || 'stretch';
            return o;
        },
        panel: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'panel';
            o.title = args.title || null;
            o.id = args.id || null;
            o.height = args.height || null;
            o.width = args.width || null;
            o.renderTo = args.renderTo || null;
            o.tbar = args.tbar || null;
            o.layout = args.layout || q.t.layout();
            o.items = args.items || [];
            return o;
        },
        button: function(text, args) {
            args = args || {};
            var o = {};
            o.xtype = 'button';
            o.text = text;
            o.itemId = args.itemId;
            return o;
        },
        tabPanel: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'tabpanel';
            o.itemId = args.itemId;
            o.flex = args.flex;
            o.layout = args.layout;
            o.tbar = args.tbar;
            o.items = args.items || [];
            return o;
        },
        form: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'form';
            o.border = args.border || 0;
            o.items = args.items || [];
            o.buttons = args.buttons || [];
            return o;
        },
        grid: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'grid';
            o.flex = args.flex || 1;
            o.border = args.border || 0;
            o.columns = args.columns || [];
            o.store = args.store || null;
            return o;
        },
        gColumn: function(header, dataIndex, args) {
            args = args || {};
            var o = {};
            o.header = header;
            o.dataIndex = dataIndex;
            o.flex = args.flex || undefined;
            return o;
        },
        fTextBox: function(label, optional, args) {
            args = args || {};
            var o = {};
            o.xtype = 'textfield';
            o.fieldLabel = label;
            o.allowBlank = optional || true;
            return o;
        },
        component: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'component';
            o.itemId = args.itemId;
            o.html = args.html;
            o.extraOptions = args.extraOptions;
            return o;
        }
    },

    // Helper methods for shortening Ext.create for containers.
    h: {
        panel: function(args) {
            return Ext.create('Ext.panel.Panel',
            args);
        }
    }
};
function createPanel(){
    var panel = q.h.panel({
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        layout: q.t.panel(),
        items: [q.t.tabPanel({
            itemId: 'mainTabPanel',
            items: [q.t.panel({
                title: 'Users',
                id: 'usersPanel',
                tbar: [
                    q.t.button('Edit',{itemId: 'editButton'})
                ],
                items: [
                    q.t.form({
                        items: [ q.t.fTextBox('Name') , q.t.fTextBox('Email')],
                        buttons: [ q.t.button('Save', {action:'saveUser'} )]
                    }),
                    q.t.grid({
                    columns: [ q.t.gColumn('Name','name'), q.t.gColumn('Email', 'email', {flex: null}) ],
                    store: Ext.create('Ext.data.Store',{
                        fields: ['name', 'email'],
                        data: [{
                            name: 'Indian One',
                            email: 'one@qinfo.com'
                        }, {
                            name: 'American One',
                            email: 'aone@info.com'
                        }]
                    })
                })]
            })]
        }),
            q.t.component({
                itemId: 'footerComponent',
                html: 'Footer Information',
                extraOptions: {
                    option1: 'test',
                    option2: 'test'
                },
                height: 40
            })
        ]
    });
}

通过使用@Compact 代码，它可以节省大约 40% 的行数，例如这里的“createPanel”函数。我希望每个人都想出不同的想法，创建配置对象是我的第一个想法，但我希望它是我可以覆盖的东西，所以我想出了上述方法。

我确实对函数和每个 Firebug（分析功能）进行了基准测试，非紧凑版本需要 178 毫秒，而紧凑版本需要 184 毫秒。

所以是的，肯定会花费更多时间，从这个示例中看起来值得多花 8 毫秒，但不确定我们何时会使用这种方法构建企业应用程序。有没有更好的方法？，如果有，请分享。

4

2 回答 2

3

如果不是真的需要使用 xtypes：

{
   xtype: 'panel',
   height: 500,
   width: 500,
   renderTo: Ext.getBody()
}

或创建自己的默认配置

var panelCfg = {
   height: 500,
   width: 500,
   renderTo: Ext.getBody()
}

并使用 ExtApplyIf 应用

Ext.ApplyIf({xtype:'panel'}, panelCfg);

或获取实例

Ext.widget('panel', panelCfg);

还有更多的方法。

您将明确需要自己编写一些结构和/或帮助程序来封装您的默认配置，甚至直接从现有的类中继承您自己的类。

于 2013-01-25T10:44:36.110 回答
0

除了 sra 所说的，没有什么能阻止你创建一些速记方法。

使用带有扩展/混合配置的简单生成函数有很大帮助。

于 2013-01-25T10:49:25.670 回答