extJs 下拉框联动实现代码

复制代码 代码如下:

  // 第一个下拉框

  var parentStore = new Ext.data.Store({

  proxy: new Ext.data.HttpProxy({

  url: 'loadByParentid.action?parentid=1001'

  }),

  reader: new Ext.data.JsonReader({

  root: 'list',

  id: 'id'

  }, [

  {name: 'id', mapping: 'id'},

  {name: 'mc', mapping: 'name'}

  ])

  });

  // 第二个下拉框

  var childStore = new Ext.data.Store({

  proxy: new Ext.data.HttpProxy({

  //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的

  url: 'loadByParentid.action?parentid=1001'

  }),

  reader: new Ext.data.JsonReader({

  root: 'list',

  id: 'id'

  }, [

  {name: 'id', mapping: 'id'},

  {name: 'mc', mapping: 'name'}

  ])

  });

  {

  fieldLabel: '请选择分类',

  xtype:'combo',

  store: parentStore,

  valueField :"id",

  displayField: "mc",

  mode: 'local',

  forceSelection: true,//必须选择一项

  emptyText:'请选择分类...',//默认值

  hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name

  editable: false,//不允许输入

  triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。

  //allowBlank:false,//该选项值不能为空

  id : 'parent_id',

  name: 'parent',

  width: 400,

  listeners:{

  select : function(combo, record,index){

  childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});

  childStore.load();

  }

  }

  },{

  xtype:'combo',

  store: childStore,

  valueField :"id",

  displayField: "mc",

  //数据是在本地

  mode: 'local',

  forceSelection: true,//必须选择一项

  emptyText:'请选择子分类...',//默认值

  hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name

  editable: false,//不允许输入

  triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。

  //allowBlank:false,//该选项值不能为空

  fieldLabel: '选择',

  id : 'child_id',

  name: 'child',

  width: 400

  }