Question

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(),
        ...

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

修改

@Verbose代码：

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 Code

// 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（分析功能）非紧凑版本需要178ms而紧凑版本需要184ms。

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

Answer 1

如果不是真的需要使用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);

还有更多方法。

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

Answer 2

除了sra所说的，没有什么可以阻止你创建一些简单的方法。

使用带有扩展/混合配置的简单生成函数可以提供很多帮助。

有没有办法减少ExtJS的冗长

2 个答案: