Ext 下拉框 级联 表格 复选框

首先为extjs做一下广告，就管理类网页而言，它的界面还是相当可观的

      需求：         当你有两个数据库表，一个主表，一个从表，如果你需要用一个combobox显示主表的数据，然后还需要用一个下拉框来 级联显示从表数据，并且你需要对从表数据进行多选，那现在你可以使用下面的方法。

      说明：         我使用的extjs版本为3.4 不需要引入高手重写的JS   正常引入3.4版本的extjs就OK

      贴图看效果：   当你选择区域控制器的一行，从设备的数据也会变化，所有数据均从后台读取，第二个下拉框使用的是triggerfield做的，然后在triggerfield里面加了一个grid,当你选择某一行的checkbox时候触发click事件把grid你选中的行的value赋给triggerfield,到此为止基本完成了前台数据的采集工作

               

    困扰我的地方： 1.

                    问题：当选择区域控制器后，目的是要将区域控制的id传给从从表拿数据的jsonStore的，但是在修改从表jsonStore的时候url总是修改不起来

                    解决方案：在网上搜了一下，原因是在触发区域控制器combobox的select事件的时候，虽然通过firebug跟踪看到id是获取了   但是此时获取从设备数据的jsonStore已经执行过了 url无法改变，如果要修改则需要在从设备的jsonStore里面做一个监听，监听jsonStore是否被load,代码如下：

          var subdeviceStore = new Ext.data.JsonStore({

                    url:getPathURL('/json/comboboxsubdevice?controllerID='+tempID),

                    idProperty:'id',

                    totalProperty:'subdeviceresult',

                    fields:new Ext.data.Record.create(['text','value']),

                    root:'subdeviceList',

                    listeners:{

                        beforeload:function(store,records,options){

                                store.proxy.conn.url = getPathURL('/json/comboboxsubdevice?                               controllerID='+tempID);

                        }

                    }

                }); 

                  2.

                  问题：在单击从设备下拉框的grid的某一行的时候，数据总是显示不到triggerfield里面去

                  解决方案：莫名奇妙的好了~~··代码如下：

      subdeviceGrid.on('click',function(){

//                       subselectMenu.hide();

                        var recordNew=subdeviceGrid.getSelectionModel().getSelections();

                        var temptemp='';

                        for(var i=0;i<recordNew.length;i++){

                            if(i!=recordNew.length-1){

                            temptemp=temptemp+recordNew[i].data.value+","

                            }else{

                                temptemp=temptemp+recordNew[i].data.value;

                            }

                        }

                        triggerfield.setValue(temptemp);

                });

   

所有源码：

        //--------------------------------------------------form-------------------------------------------

                var subsm=new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});

                var controllerStore = new Ext.data.JsonStore({

                      url:getPathURL('/json/comboboxcontroller'),

                      idProperty:'id',

                      totalProperty:'controllerresult',

                      fields:new Ext.data.Record.create(['text','value']),

                      root:'controllerList'

                  });

                  controllerStore.load();

                var controllerCombo=new Ext.form.ComboBox({

                    fieldLabel:'区域控制器',

                    store:controllerStore,

                    emptyText:getLocalStr('select'),

                    id:'controller',

                    name:'controller',

//                   mode:'remote',

                    triggerAction:'all',

                    displayField:'text',

                    valueField:'value',

                    pageSize:15,

                    anchor:'75%',

                    typeAhead:true,

                    selectOnFocus:true                  

                });

           

                var subdeviceStore = new Ext.data.JsonStore({

                    url:getPathURL('/json/comboboxsubdevice?controllerID='+tempID),

                    idProperty:'id',

                    totalProperty:'subdeviceresult',

                    fields:new Ext.data.Record.create(['text','value']),

                    root:'subdeviceList',

                    listeners:{

                        beforeload:function(store,records,options){

                                store.proxy.conn.url = getPathURL('/json/comboboxsubdevice?controllerID='+tempID);

                        }

                    }

                }); 

                 

                controllerCombo.on('select',function(controllerCombo){

                    tempID=controllerCombo.getValue();

// Conrecord.set('controllerid',controllerCombo.getValue());

// subdeviceStore.proxy.conn.url = getPathURL('/json/comboboxsubdevice?controllerID='+tempID);

//subdeviceStore.setBaseParam('url',getPathURL('/json/comboboxsubdevicecontrol lerID='+Conrecord.data.controllerid));

                    subdeviceStore.load();  

                });

                //columnModel

                var subdevicecolumns = new Ext.grid.ColumnModel([

                    subsm,

                    new Ext.grid.RowNumberer(),

                    {header: getLocalStr('value'), dataIndex: 'value',hidden : false,sortable:true},

                    {header: getLocalStr('text'), dataIndex: 'text' ,hidden : false,sortable:true}

                ]);

                subdevicecolumns.defaultSortable = true;

                // grid start

                var subdeviceGrid = new Ext.grid.GridPanel({

                    title: '从设备列表',

//                     region: 'center',

                    width:200,

//                     autoHeight:true,

                    height:400,

                    loadMask: true,

                    store: subdeviceStore,

                    cm: subdevicecolumns,

                    sm: subsm,

                    viewConfig: {

                        forceFit: true

                    },

                    bbar: new Ext.PagingToolbar({

                        pageSize: 15,

                        store: subdeviceStore,

                        displayInfo: true

                    })

                });

               

                var subselectMenu=new Ext.menu.Menu({

                    items:[subdeviceGrid]

                  });

               

                var triggerfield=new Ext.form.TriggerField({

                            fieldLabel:'从设备',

                            name:'name',

                            editable:false,

                            onSelect:function(record){},

                            onTriggerClick: function(){

//                                 alert("------------------------------");

                                if(this.menu==null){

                                    this.menu=subselectMenu;

                                }

                                this.menu.show(this.el,"tl-bl?");

                            }

                        });

                 

                subdeviceGrid.on('click',function(){

//                       subselectMenu.hide();

                        var recordNew=subdeviceGrid.getSelectionModel().getSelections();

                        var temptemp='';

                        for(var i=0;i<recordNew.length;i++){

                            if(i!=recordNew.length-1){

                            temptemp=temptemp+recordNew[i].data.value+","

                            }else{

                                temptemp=temptemp+recordNew[i].data.value;

                            }

                        }

                        triggerfield.setValue(temptemp);

                });

                 

                  var form=new Ext.form.FormPanel({

                    title:'控制器',

                    region:'east',

                    labelAlign:'right',

                    labelWidth:150,

                    width:500,

                    title:'form',

                    frame:true,

                    items:[

                        controllerCombo,

                        triggerfield

                    ]

                });

最后说明： 网上还有一张解决方案，使用高手重写的Combobobx,叫做Ext.ux.form.lovcombobox,也挺好的