Ext级联菜单实例

Ext级联菜单

一、实现方法

a)       以一个二级联动为例，定义两个Store对象

var store = new Ext.data.Store({

       // proxy: new Ext.data.HttpProxy({url:'07-04-01.txt'}),

        proxy: new Ext.data.HttpProxy({url:'test.jsp?id=1'}),

        reader: new Ext.data.ArrayReader({}, [

            {name: 'value'},

            {name: 'text'}

        ])

    });

 var store2 = new Ext.data.Store({

       // proxy: new Ext.data.HttpProxy({url:'07-04-01.txt'}),

        proxy: new Ext.data.HttpProxy({url:'test2.jsp'}),

        reader: new Ext.data.ArrayReader({}, [

            {name: 'value'},

            {name: 'text'}

        ])

});

解析：url 属性为要访问的jsp页面路径或者Action的路径，

若访问的是jsp页面应将多余的脚本去掉避免发生冲突。

ArrayReader为数组读取器，用于读取请求返回的字符串数组。Name：’对应值’ 为该数组的每一项对应的字段名，我们可以通过指定的字段名给value和label赋值。

b)       定义combox

var combo = new Ext.form.ComboBox({

        store: store,//代表此下拉选框的数据

        emptyText: '请选择',//代表下拉选框的默认值

        mode: 'local',//代表下拉选框的读取方式

triggerAction: 'all',//是否采用自动匹配用户输入进行选择。

        valueField: 'value',//对应value的字段名

        displayField: 'text' //对应显示文本的字段名

});

     解析：应定义两个combox 即用于级联的两个下拉菜单

c)       定义其中一个combox的onselect事件

combo.on("select",function(comboBox){

    var value=comboBox.getValue();

    store2.load({params:{id:value}});

       //可以用params：{}传参

})

解析：在这个combox下拉选框被选择时加载相应的联动选框的store

d)       Stroe的load方法

在定义完stroe后 数据是不会加载的可以在相应的combox 中通过加入mode: remote  或者通过stroe.load()方法进行手动加载。

e)       将定义的下拉选框放入form中

注意：应将form的加载放入Ext.onReady(function(){})中

var form2 = new Ext.form.FormPanel({

        labelAlign: 'right',

        title: 'form',

        labelWidth: 50,

        frame:true,

        url: 'table2.jsp',

        width: 280,

        items: [combo2,combo1]

    });

form2.render("div2");

//form的加载位置