extjs中grid中嵌入动态combobox的应用

  拿combobox的数据

  

复制代码 代码如下:

  comboDS = new Ext.data.JsonStore({

  url : 'test.do',

  fields : [{

  name : 'id'

  }, {

  name : 'display'

  }]

  });

  combobox定义

  combobox 中的id必须要有,后面要跟据id取combobox值。

  

复制代码 代码如下:

  var comboBox = new Ext.form.ComboBox({

  id : "cb", //必须有

  typeAhead : true,

  readOnly : true,

  allowBlank : false,

  autoScroll : true,

  selectOnFocus : true,

  emptyText : '请选择...',

  store : comboDS,

  forceSelection : true,

  triggerAction : 'all',

  displayField : 'display',

  valueField : 'id'

  });

  grid 的定义:

  

复制代码 代码如下:

  ds = new Ext.data.Store({

  baseparams : {

  start : 0,

  limit : RowCount

  },

  proxy : new Ext.data.HttpProxy({

  url :'test2.do'

  }),

  reader : new Ext.data.JsonReader({

  root : 'data',

  totalProperty : 'totalCount'

  }, [{

  name : "bh"

  }, {

  name : "test"

  }]);

  });

  var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {

  header : "编号",

  dataIndex : "bh"

  }, {

  header : "测试",

  dataIndex : "test",

  renderer : renderer,

  editor : comboBox

  }]);

  grid = new Ext.grid.EditorGridPanel({

  title : '测试',

  ds : ds,

  cm : cm,

  clicksToEdit : 1,

  viewConfig : {

  forceFit : true

  },

  bbar : new Ext.PagingToolbar({

  pageSize : RowCount,

  store : ds,

  displayInfo : true,

  displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',

  emptyMsg : "没有记录"

  })

  });

  cm 的renderer函数

  此方法为解决combobox修改后显示为id

  

复制代码 代码如下:

  function renderer(value, p, r) {

  var index = comboDS.find(Ext.getCmp('cb').valueField, value);

  var record = comboDS.getAt(index);

  var displayText = "";

  if (record == null) {

  displayText = value;

  } else {

  displayText = record.data.display;// 获取record中的数据集中的display字段的值

  }