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

问题描述

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

天蓬老师
天蓬老师

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

répondre à tous(1)
刘阿勇

Il ne nous reste plus qu'à écrire du js au lieu du html et du css. C'est le résultat de ext. Je dois passer une longue configuration. Existe-t-il un bon moyen de le résoudre ?

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal