当前位置: 代码迷 >> Ajax >> ExtJs4 ComboBox级联解决办法
  详细解决方案

ExtJs4 ComboBox级联解决办法

热度:499   发布时间:2012-04-18 15:01:59.0
ExtJs4 ComboBox级联
使用EXTJS4,写联动的combo控件,首次选择联动效果,可以正常显示和选择。
再次切换选择‘一级’,动态加载‘二级’,数据可以正常加载,但是始终出现一个loading的遮盖层,选择不了下拉数据,奇怪的问题



Ext.create("Ext.panel.Panel",{ 
  renderTo: document.body, 
  width:290, 
  height:220, 
  title:"城市三级联动", 
  plain: true, 
  margin:'30 10 0 80', 
  bodyStyle: "padding: 45px 15px 15px 15px;", 
  defaults :{ 
  autoScroll: true, 
  bodyPadding: 10 
  }, 
  items:[{ 
  xtype:"combo", 
  name:'sheng', 
  id : 'sheng', 
  fieldLabel:'选择省', 
  displayField:'cname', 
  valueField:'id', 
  store:store, 
  triggerAction:'all', 
  queryMode: 'local',  
  selectOnFocus:true, 
  forceSelection: true, 
  allowBlank:false, 
  editable: true, 
  emptyText:'请选择省', 
  blankText : '请选择省', 
  listeners:{  
  select:function(combo, record,index){
try{
//userAdd = record.data.name;
var parent=Ext.getCmp('shi');
var parent1 = Ext.getCmp("qu");
parent.clearValue();
parent1.clearValue();
parent.store.load({params:{param:this.value}});
}
catch(ex){
Ext.MessageBox.alert("错误","数据加载失败。");
}
}
}
  }, 
  { 
  xtype:"combo", 
  name:'shi', 
  id : 'shi', 
  fieldLabel:'选择市', 
  displayField:'cname', 
  valueField:'id', 
  store:store1, 
  triggerAction:'all', 
  queryMode: 'local', 
  selectOnFocus:true, 
  forceSelection: true, 
  allowBlank:false, 
  editable: true, 
  emptyText:'请选择市', 
  blankText : '请选择市', 
  listeners:{  
  select:function(combo, record,index){ 
  try{ 
  //userAdd = record.data.name; 
  var parent = Ext.getCmp("qu"); 
  parent.clearValue(); 
  parent.store.load({params:{param:this.value}}); 
  } 
  catch(ex){ 
  Ext.MessageBox.alert("错误","数据加载失败。"); 
  } 
  } 
  } 
  }, 
  { 
  xtype:"combo", 
  name:'qu', 
  id : 'qu', 
  fieldLabel:'选择区', 
  displayField:'cname', 
  valueField:'id', 
  store:store2, 
  triggerAction:'all', 
  queryMode: 'local', 
  selectOnFocus:true, 
  forceSelection: true, 
  allowBlank:false, 
  editable: true, 
  相关解决方案