Ext js 中ComboBox的级联问题？

Question

[img]http://dl.iteye.com/upload/attachment/0074/5143/8a0e7a1e-db7d-3668-bd5a-6c7dcb2d4513.jpg[/img]

在GridPanel组件中选中某行的记录，该记录中隐藏了相应的公司和部门，双击选中该行后，弹出一个修改的表单，见图
[img]http://dl.iteye.com/upload/attachment/0074/5145/c9faefaa-19a4-3a07-b884-aa5189dddbc9.jpg[/img]
，现问题是，表单中的数据是自动填充的，当只想修改部门时，没有该公司下的可选部门， :shock: 需点选公司后，部门才有所需的级联数据，级联的公司部门数据是本地的，没有从数据库中获取，请问有什么好的解决方法和思路？ :o
或者说一般的级联操作有哪些做法和思路？ 谢谢

Answer 1

使用EXTJS和Spring MVC实现二级级联下拉菜单，其实质在于通过监听一级菜单的select事件，触发二级菜单的数据源重新载入事件。
//定义组合框中显示的数据源
var zonestore = Ext.create('Ext.data.Store', {
autoLoad : true,
proxy : {
type : 'ajax',// Ext.data.AjaxProxy
url : './rreport/storagereport/getZones',
reader : {
type : 'json',
root : 'response'
}
},
fields : [ 'value', 'name' ]
});
zonestore.on('load',function(store, record, opts){
var typeCombo = Ext.getCmp("zonename");
var firstValue = record[0].data.name;// 这种方法可以获得第一项的值
typeCombo.setValue(firstValue);
typeCombo.setRawValue(firstValue);// 选中
});
var podstore = Ext.create('Ext.data.Store', {
autoLoad : false,
proxy : {
type : 'ajax',// Ext.data.AjaxProxy
url : './rreport/storagereport/getPodsByZone',
extraParams:{},
reader : {
type : 'json',
root : 'response'
}
},
fields : [ 'value', 'name' ]
});
podstore.on('load',function(store, record, opts){
var typeCombo = Ext.getCmp("podname");
var firstValue = record[0].data.name;// 这种方法可以获得第一项的值
typeCombo.setValue(firstValue);
typeCombo.setRawValue(firstValue);// 选中
});
{
xtype : 'combo',
fieldLabel : 'Zone',
labelWidth : 35,
name : 'zonename',
x : 480,
y : 10,
id:'zonename',
labelAlign : 'right',
store : zonestore,
queryMode : 'local',
displayField : 'name',
valueField : 'value',
forceSelection : true,
typeAhead : true,
editable : false,
value : '-1',
listeners:{
select:function(self,records){
var pod=Ext.getCmp("podname");
pod.store.load({params:{
zoneid:records[0].data.value
}});
}
}
},{
xtype : 'combo',
fieldLabel : 'Pod',
labelWidth : 35,
name : 'podname',
x : 480,
y : 50,
id:'podname',
labelAlign : 'right',
store : podstore,
queryMode : 'local',
displayField : 'name',
valueField : 'value',
forceSelection : true,
typeAhead : true,
editable : false,
value : '-1',
emptyText:'所有Pod'
}

后台响应
@RequestMapping(value = "/getZones", method = {RequestMethod.POST,RequestMethod.GET})
public ModelAndView getZones(){
ModelAndView mv=new ModelAndView();
JSONArray arrays=new JSONArray();
JSONObject object=new JSONObject();
for(int i=0;i<4;i++){
object.put("name", "Zone"+i);
object.put("value", "Zone"+i);
arrays.add(object);
object=new JSONObject();
}
mv.addObject("response", arrays);
return mv;
}
@RequestMapping(value = "/getPodsByZone", method = {RequestMethod.POST,RequestMethod.GET})
public ModelAndView getPodByZone(@RequestParam String zoneid){
ModelAndView mv=new ModelAndView();
JSONArray arrays=new JSONArray();
JSONObject object=new JSONObject();
for(int i=0;i<4;i++){
object.put("name", "Pod"+i+" "+zoneid);
object.put("value", "Pod"+i+" "+zoneid);
arrays.add(object);
object=new JSONObject();
}
mv.addObject("response", arrays);
return mv;}

10，只进行一次查询即可实现下拉列表的二级级联
通过Spring MVC的JSON方法或默认对象的返回如下格式的数据
{"response":[{"name":"所有Zone","value":-1,"children":[{"name":"所有Pod","value":-1,"children":null,"zonename":null,"zoneid":0},{"name":"Pod1","value":1,"children":null,"zonename":null,"zoneid":0},{"name":"Pod2","value":2,"children":null,"zonename":null,"zoneid":0}],"zonename":null,"zoneid":0},{"name":"Zone1","value":2,"children":[{"name":"所有Pod","value":-1,"children":null,"zonename":null,"zoneid":0},{"name":"Pod1","value":1,"children":null,"zonename":null,"zoneid":0},{"name":"Pod2","value":2,"children":null,"zonename":null,"zoneid":0}],"zonename":null,"zoneid":0}]}

在9的基础上，修改一级菜单的select事件：
select:function(self,records){
                      var pod=Ext.getCmp("pod");
                      var store=records[0];
                      if(store.raw.children!=null){
                           pod.clearValue();
                           pod.getStore().loadData(store.raw.children,false);
                           pod.setValue(store.raw.children[0].value);
                           pod.setRawValue(store.raw.children[0].name);
                      }else{
                           var object={
                                "value" : "-1",
                                "name" : "所有Pod"
                           };
                           var data=[];
                           data.push(object);
                           pod.getStore().removeAll();
                           pod.clearValue();
                           pod.getStore().loadData(data);
                           pod.setValue(-1);
                           pod.setRawValue("所有Pod");
                      }
                    }
其实质在于取出一级菜单附带的二级菜单数据，通过loadData方法为二级菜单设置数据，而不是再次请求后台查询