上篇曾提出不能实现第二个ComboBox数据的动态加载,下面先把正确的代码贴出,然后再就Extjs的某些属性,谈谈我的理解,不对之处,望指正.
1
//
分类方式数据源
2![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
var
store
=
new
Ext.data.Store(
{
3
autoLoad:true,
4![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy:new Ext.data.HttpProxy(
{
5
url:'../admin/GetCatWise.aspx'
6
}),
7![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader:new Ext.data.JsonReader(
{
8
id:'ID',
9
fields:['ID','Name']
10
}),
11
remoteSort:true
12
}
);
13 //第二个ComboBox数据源
14![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
var
comstore
=
new
Ext.data.Store(
{
16
autoLoad:false,
17![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy:new Ext.data.HttpProxy(
{
18
url:'../admin/GetCategory.aspx',
20
method:'post'
21
}),
22![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader:new Ext.data.JsonReader(
{
23
id:'ID',
24
fields:['ID','CategoryName']
25
}),
26
remote:true
27
}
);
28![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
var
form
=
new
Ext.form.FormPanel(
{
30
labelWidth:55,
32
bodyStyle:'padding:5px 5px 0',
33
frame:true,
34![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items:[![dot.gif](https://www.cnblogs.com/Images/dot.gif)
{
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![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
listeners:
{select:function()
{
86![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
87
var parent=Ext.getCmp('comParent');
90![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
parent.store.reload(
{params:
{wiseID:this.value}});
91
}
92
catch(ex)
93![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
94
Ext.MessageBox.alert(ex);
95
}
96
}},
97
triggerAction:'all',
98
typeAhead :true,
99
anchor:'100%'
100
101![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
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![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}]
121
}
);
2
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
3
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
5
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
7
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
8
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
11
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
13 //第二个ComboBox数据源
14
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
16
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
18
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
23
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
26
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
28
![None.gif](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
30
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
32
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
74
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
76
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
77
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
78
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
80
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
81
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
82
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
83
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
84
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
85
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
86
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
87
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
90
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
91
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
92
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
94
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
95
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
96
![ExpandedSubBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
97
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
98
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
99
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
100
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
101
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
102
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
103
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
104
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
105
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
106
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
107
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![dot.gif](https://www.cnblogs.com/Images/dot.gif)
108
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
109
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
110
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
111
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
112
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
113
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
114
![InBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
115
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
121
![ExpandedBlockEnd.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
现在,我就上面的代码做几点解释:
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文菜,看来,我的中文更菜哦,不多说,望大家指正.