Extjs联机下拉的实现和注意点

         Extjs联机下拉是一个最常见的功能，在实现复杂业务逻辑的时候也常常用得到，extjs实现的联机下拉代码量比较多，特别是一个默认选中，store，reader，combox中的属性也比较多，还有combox的监听事件。下面我就根据具体业务介绍联机下拉的使用。

         业务介绍：报表名称和字段名称对应的是唯一的一个元数据id，现在要新增的是一个元数据id，不可能让用户选择id存进去，要让用户选择对应的报表名称和字段名称，然后我们确定一个id存进数据库，修改的时候又要根据元数据id得到相对应的报表名称和字段名称进行下拉修改。

 

 

代码描述：代码主要分为三块，Store，Combox，Combox的select选择事件。

var reportStore= newExt.data.Store({

        proxy: newExt.data.HttpProxy({

            url: 'jkdwaringindicator.go?method=queryReport'

        }),

        reader: newExt.data.JsonReader({}, [{

            name: 'value'

        },{

            name: 'text'

        }])

    });

    reportStore.load();这里一定要有load刷新，不然数据出不来，extjs可以写方法，一般默认的刷新都要在外面写一个方法。

    var Comboreport = new Ext.form.ComboBox({

        fieldLabel: '报表名称',

        store:reportStore,

        valueField:'value',

        displayField:'text',

        typeAhead: true,

        mode: 'local',

        triggerAction: 'all',

        loadingText : '正在加载信息',

        emptyText:'---------请选择---------',

        selectOnFocus : true,

        anchor : '100%',

        allowBlank: true

    });

//这里select选择事件，选择了之后，就把选择的参数得到，传给另外一个combox控件进行刷新，extjs中params代表的是传入的值。

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

        var value =Comboreport.getValue();

        columnStore.load({

                    params: {

                        reportname: value

                    }

                });

    });

    var columnStore = new Ext.data.Store({

        proxy: newExt.data.HttpProxy({

            url: 'jkdwaringindicator.go?method=queryColumn'

        }),

        reader: newExt.data.JsonReader({}, [{

            name: 'value'

        },{

            name: 'text'

        }])

    });

    var Combocolumn = new Ext.form.ComboBox({

        fieldLabel: '字段名称',

        store:columnStore,

        valueField:'value',

        displayField:'text',

        typeAhead: true,

        mode: 'local',

        triggerAction: 'all',

        loadingText : '正在加载信息',

        emptyText:'---------请选择---------',

        selectOnFocus : true,

        anchor : '100%',

        allowBlank: true

    });

//下面这一个选择事件是稍微有点复杂，选择了第二个框之后要进行一次数据库的异步查询，和赋值，查询成功就把查询出来的值赋给一个隐藏框，增加数据就是提交隐藏框的值，返回值可以用console.log(respText);进行调试，因为返回的是一个list，会压缩到josn进行传值，所以这里的返回值有点复杂，进行调试返回的结果就知道怎么取值了，这个方法很好用。

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

        var value1 =Comboreport.getValue();

        var value2 =Combocolumn.getValue();

        Ext.Ajax.request({    

               url:'jkdwaringindicator.go?method=queryIdBy', 

               params:{ 

               reportname:value1,

               columnname:value2

                }, 

                success: function(resp,opts) {  

                            var respText =Ext.util.JSON.decode(resp.responseText);

//                          console.log(respText);

                            Ext.getCmp('id_metaid_add').setValue(respText[0].id);

                             },  

                failure: function(resp,opts) {  

                       var respText =Ext.util.JSON.decode(resp.responseText);  

                       Ext.Msg.alert('错误', respText.error);  

                }    

              });

    });

//修改的时候也是一样的，要先根据元数据id查询相对应的报表名称和字段名称，把查询出来的值赋给下拉框，赋值下拉框有好几种方式，简单的复杂的都有，我这里主要用了setValue（）方法。

 

这个功能就实现了，还有表格的显示问题和其余下拉框的应用就不说了。

 

感受：extjs中联机下拉采用的是异步加载，所以速度还是很快的，extjs中任何控件都可以加载到数据库中的数据。先写到这了，要去解决一个页面布局的问题了。

 

 

去掉关键字：distinct

Js调试中控制面板打印出数据：console.log(object);