美文网首页
Extjs 下拉框二级联动搜索

Extjs 下拉框二级联动搜索

作者: DX初学者 | 来源:发表于2018-05-28 09:11 被阅读22次

项目需要一个根据运营商选择旗下加盟商的联动搜索

//创建好上下级下拉框store
var firstCombo = Ext.create('Ext.data.Store', {
  fields: ['comIndexId', 'comName'],
  autoLoad: true,
  proxy: {
    type: 'ajax',
    url: '/Page/Combo1.ashx/GetData',
    reader: {
      type: 'json',
      root: 'root'
    }
  }
});

var secondCombo = Ext.create('Ext.data.Store', {
  fields: ['brandId', 'brandName'],
  autoLoad: true,
  proxy: {
    type: 'ajax',
    url: '/Page/Combo2.ashx/GetData',
    reader: {
      type: 'json',
      root: 'root'
    }
  }
});
//将下拉框放入items中
items: [{
  xtype: 'combo',
  fieldLabel: '运营商',
  editable: false,
  multiSelect: false,
  name: 'comIndexId',
  width: 260,
  displayField: 'comName',
  valueField: 'comIndexId',
  value: '',
  store: firstCombo,
  listeners: {
    select: function (combo, record, index) {
      secondCombo.on('beforeload', function (store, options) {
        var new_params = {  //传参,获取二级下拉框数据  
          comIndexId: combo.value,
        };
        Ext.apply(secondCombo.proxy.extraParams, new_params);
      });
      secondCombo.load();  
    }
  }
}, {
  xtype: 'combo',
  name: 'brandId',
  fieldLabel: '加盟商',
  editable: false,
  multiSelect: false,
  name: 'brandId',
  width: 200,
  displayField: 'brandName',
  valueField: 'brandId',
  value: '',
  store: secondCombo 
},  {
  xtype: 'button',
  name: 'search',
  text: '查询',
  handler: function () {
    var grid = this.up("grid");
    var brandId = grid.down('[name=brandId]');
    var comIndexId = grid.down('[name=comIndexId]');
    grid.store.proxy.extraParams['brandId'] = brandId.getValue();
    grid.store.proxy.extraParams['comIndexId'] = comIndexId.getValue();
    grid.store.loadPage(1);
  }
}]


相关文章

网友评论

      本文标题:Extjs 下拉框二级联动搜索

      本文链接:https://www.haomeiwen.com/subject/dieujftx.html