extJs之下拉框联动

 

代码

 1  1 . //   第一个下拉框   
 2  2 . var  parentStore  =   new  Ext.data.Store({   
 3  3 .    proxy:  new  Ext.data.HttpProxy({   
 4  4 .        url:  ' loadByParentid.action?parentid=1001 '   
 5  5 .    }),   
 6  6 .    reader:  new  Ext.data.JsonReader({   
 7  7 .    root:  ' list ' ,   
 8  8 .    id:  ' id '   
 9  9 .    }, [   
10  10 .        {name:  ' id ' , mapping:  ' id ' },   
11  11 .        {name:  ' mc ' , mapping:  ' name ' }   
12  12 .    ])   
13  13 .});    
14  14 . //      第二个下拉框   
15  15 . var  childStore  =   new  Ext.data.Store({   
16  16 .    proxy:  new  Ext.data.HttpProxy({   
17  17 .                        // 这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的   
18  18 .        url:  ' loadByParentid.action?parentid=1001 '   
19  19 .    }),   
20  20 .    reader:  new  Ext.data.JsonReader({   
21  21 .    root:  ' list ' ,   
22  22 .    id:  ' id '   
23  23 .    }, [   
24  24 .        {name:  ' id ' , mapping:  ' id ' },   
25  25 .        {name:  ' mc ' , mapping:  ' name ' }   
26  26 .    ])   
27  27 .});    
28  28 .  
29  29 .      {   
30  30 .    fieldLabel:  ' 请选择分类 ' ,   
31  31 .           xtype: ' combo ' ,   
32  32 .           store: parentStore,   
33  33 .           valueField : " id " ,   
34  34 .           displayField:  " mc " ,   
35  35 .           mode:  ' local ' ,   
36  36 .           forceSelection:  true , // 必须选择一项   
37  37 .           emptyText: ' 请选择分类... ' , // 默认值   
38  38 .           hiddenName: ' interviewsDetail.parent_category ' , // hiddenName才是提交到后台的input的name   
39  39 .           editable:  false , // 不允许输入   
40  40 .           triggerAction:  ' all ' , // 因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
41  41 .            // allowBlank:false,//该选项值不能为空   
42  42 .    id :  ' parent_id ' ,   
43  43 .           name:  ' parent ' ,   
44  44 .        width:  400 ,   
45  45 .        listeners:{     
46  46 .            select :  function (combo, record,index){   
47  47 .                childStore.proxy =   new  Ext.data.HttpProxy({url:  ' loadByParentid.action?parentid= '   +  combo.value});   
48  48 .                    childStore.load();    
49  49 .            }   
50  50 .        }   
51  51 .       },{   
52  52 .           xtype: ' combo ' ,   
53  53 .           store: childStore,   
54  54 .           valueField : " id " ,   
55  55 .           displayField:  " mc " ,   
56  56 .     // 数据是在本地   
57  57 .           mode:  ' local ' ,   
58  58 .           forceSelection:  true , // 必须选择一项   
59  59 .           emptyText: ' 请选择子分类... ' , // 默认值   
60  60 .           hiddenName: ' interviewsDetail.child_category ' , // hiddenName才是提交到后台的input的name   
61  61 .           editable:  false , // 不允许输入   
62  62 .           triggerAction:  ' all ' , // 因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
63  63 .            // allowBlank:false,//该选项值不能为空   
64  64 .           fieldLabel:  ' 选择 ' ,   
65  65 .           id :  ' child_id ' ,   
66  66 .           name:  ' child ' ,   
67  67 .    width:  400    
68  68 .       }