niuniu9631
2012-09-29 10:28
浏览 309
已采纳

Ext js 中ComboBox的级联问题?

[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
或者说一般的级联操作有哪些做法和思路? 谢谢

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • FangXingXing007 2012-09-29 10:46
    已采纳

    使用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方法为二级菜单设置数据,而不是再次请求后台查询
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报