javascript - 如何编写优雅的ExtJS代码?

Question

问题描述

ExtJS通过面向对象的方式封装组件，本来是极好的
但是编写代码时，却经常 为了声明一个控件，传入繁杂的参数 。
最终导致ExtJS代码看起来又长又臭，各位大神，你们在写ExtJS代码时，如何写得更优雅呢？

想法

• 类似CSS reset的方式：给控件定义一套样式，这样就不必重复的声明控件的宽高什么的

• 预先定义组件的声明，在使用控件时，通过JQuery.extend(true,widget,map)方法参数合并进来

示例

以下，是在一个formPanel中定义两个combobox(下拉框)控件，感受一下重复的编写定义combobox参数的代码

Ext.onReady(function() {
    var genus_store = new Ext.data.SimpleStore( {
        fields : [ 'value', 'text' ],
        data : []
    });
    
    var form_condition = new Ext.FormPanel( {
        region : 'west',
        split : false,
        labelWidth : 80,
        frame : true,
        width : 275,
        defaults : {width : 150},
        labelAlign : 'right',
        defaultType : 'textfield',
        autoScroll : true,
        items : [
            {
                xtype : 'combo',
                fieldLabel : '省/市',
                name : 'docKind',
                mode : 'local',
                readOnly : false,
                triggerAction : 'all',
                emptyText : '省/市',
                hiddenName : 'docKind',
                valueField : 'value',
                displayField : 'text'
            },
            {
                xtype : 'combo', 
                fieldLabel : '市/镇/县',
                name : 'genus',
                id : 'genus_id',
                mode : 'local',
                readOnly : false,
                triggerAction : 'all',
                emptyText : '市/镇/县',
                store : genus_store,
                hiddenName : 'genus',
                valueField : 'value',
                displayField : 'text'
            }]
    });
}); 

Answer 1

Sekarang kita hanya perlu menulis js dan bukannya html dan css Ini adalah hasil daripada ext. Saya perlu lulus konfigurasi yang panjang Adakah terdapat cara yang baik untuk menyelesaikannya?