javascript - 如何编写优雅的ExtJS代码?
天蓬老师
天蓬老师 2017-04-11 13:13:21
0
1
505

问题描述

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'
            }]
    });
}); 

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

membalas semua(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?

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan