Extjs学习笔记(-):ComboBox联动(下)

  说是下篇,其实也无所谓上下了,只是我在上一篇关于实现ComboBox联动的文章中提出的问题,虽然也在Google和园子里泡了很久,苦于E文太菜,没能在Extjs官方论坛中寻求得到帮助,幸好皇天不负有心人,通过这么多天的努力,也总算吧问题给解决了,其实也不知道是不是实现我这个问题的最佳方法了,只算是能够实现吧,所以,我也就算抛砖引玉吧,希望各位大虾能多多指教.问题的提出,请参看我的上篇文章:Extjs学习笔记(-):ComboBox联动(上)

    上篇曾提出不能实现第二个ComboBox数据的动态加载,下面先把正确的代码贴出,然后再就Extjs的某些属性,谈谈我的理解,不对之处,望指正.

 

  1     //分类方式数据源

  2    var store=new Ext.data.Store({

  3        autoLoad:true,

  4        proxy:new Ext.data.HttpProxy({

  5            url:'../admin/GetCatWise.aspx'

  6        }),

  7        reader:new Ext.data.JsonReader({

  8            id:'ID',

  9            fields:['ID','Name']

 10        }),

 11        remoteSort:true

 12    });

 13     //第二个ComboBox数据源

 14    var comstore =new Ext.data.Store({

 16        autoLoad:false,

 17        proxy:new Ext.data.HttpProxy({

 18            url:'../admin/GetCategory.aspx',

 20            method:'post'

 21        }),

 22        reader:new Ext.data.JsonReader({

 23            id:'ID',

 24            fields:['ID','CategoryName']

 25        }),

 26            remote:true

 27    });

 28

 29var form=new Ext.form.FormPanel({

 30        labelWidth:55,

 32        bodyStyle:'padding:5px 5px 0',

 33        frame:true,

 34        items:[{

 74            fieldLabel:'分类方式',

 75            xtype:'combo',

 76            editable :false,

 77            name:'labCatWise',

 78            id:'cmbCatWise',

 79            lazyInit:false,

 80            emptyText :'请选择',

 81            displayField:'Name',

 82            valueField :'ID',

 83            mode:'local',

 84            store:store,

 85            listeners:{select:function(){

 86                try{

 87                    var parent=Ext.getCmp('comParent');

 90                    parent.store.reload({params:{wiseID:this.value}});

 91                }

 92                catch(ex)

 93                {

 94                    Ext.MessageBox.alert(ex);

 95                }

 96            }},

 97            triggerAction:'all',

 98            typeAhead :true,

 99            anchor:'100%'

100           

101        }, {

102            fieldLabel:'所属父类',

103            xtype:'combo',

104            editable :false,

105            emptyText :'请选择',

106            id:'comParent',

107            loadingText :'正在请求数据,请稍后',

108            store:comstore,

109            displayField:'CategoryName',

110            valueField :'ID',

111            mode:'local',

112            triggerAction:'all',

113            name:'labParent',

114            anchor:'100%'

115        }]

121    });

    现在,我就上面的代码做几点解释:

    1.通过设置第一个ComboBox的Select事件,在select事件中动态的加载第二个ComboBox的store,以达到ComboBox的联动效果.

    2.我在select事件中,通过给第二个store传递不同的参数,然后再重新加载数据,以改变第二个store,但我在之前的实现方式是这样的:

       var store=new Ext.data.Store(...);

       secondCombo.store=store;

   这样是不能实现的,这就引发了我对Extjs类的配置属性(config),公共属性(),公共方法(Method)的思考,我认为,Extjs类的配置属性是不能被动态配置的,就如同上面这样的写法,当然,可能可以通过调用或设置某些公共的方法和属性来改变这些配置属性,但不能直接设置.不知道我这样理解对否?

    3.mode的理解,请注意高亮显示,在这里,我们把mode设置成'local',原因再于,在第一个comboBox的store中,我们设置了她的autoload属性为true,也就是在页面加载的时候就已经从服务器获取了数据,所以,我们在第一个ComboBox中的Mode就设置为local,原因是我们已经获取了数据.第二个ComboBox中的store的数据,是我们在第一个ComboBox的select事件中获取的,所以,在这里,我们也要把她的mode设置成local.关于comboBox的Mode配置属性的设置,需要根据自己的实际情况来设置,需要大家在不断的练习中掌握.

    好了,本说我E文菜,看来,我的中文更菜哦,不多说,望大家指正.