Extjs EditorGridPanel中ComboBox列的显示问题

  为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下:

  

复制代码 代码如下:

  //部门列表

  var comboxDepartmentStore = new Ext.data.Store({

  proxy: new Ext.data.HttpProxy({

  url: "GetDepartmentJson.aspx",

  method: 'GET'

  }),

  reader: new Ext.data.JsonReader({

  root: 'data',

  totalProperty: 'totalCount',

  fields: [

  { name: 'departmentid', mapping: 'ID' },

  { name: 'departmentname', mapping: 'Name' }

  ]

  })

  });

  //根据Combobox列表中对应的Id的值来渲染

  function rendererMeterTypeCombobox(value, p, r) {

  var index = comboxDepartmentStore.find(Ext.getCmp('cbdepartment').valueField, value);

  var record = comboxDepartmentStore.getAt(index);

  var displayText = "";

  if (record == null) {

  return value;

  } else {

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

  }

  }

  var sm = new Ext.grid.CheckboxSelectionModel();

  var cm = new Ext.grid.ColumnModel({

  columns: [sm, new Ext.grid.RowNumberer(), {

  header: 'id',

  dataIndex: 'id',

  hidden: true

  }, {

  header: '姓名',

  width: 40,

  dataIndex: 'name'

  }, {

  header: '所属部门',

  width: 80,

  dataIndex: 'department',

  renderer: rendererDepartmentCombobox,

  editor: new Ext.form.ComboBox({

  id: "cbdepartment", //必须有

  forceSelection: true,

  selectOnFocus: true,

  typeAhead: true,

  triggerAction: 'all',

  store: comboxDepartmentStore,

  mode: 'local',

  displayField: 'departmentname',

  valueField: 'departmentid',

  lazyRender: true

  })

  }],

  defaults: {

  zsortable: true,

  menuDisabled: false,

  width: 100

  }

  });

  var editGrid = new Ext.grid.EditorGridPanel({

  id: 'TestGrid',

  store: store, //EditorGridPanel使用的store

  trackMouseOver: true,

  disableSelection: false,

  clicksToEdit: 1, //设置点击几次才可编辑

  loadMask: true,

  autoHeight: true,

  cm: cm,

  sm: sm,

  viewConfig: {

  columnsText: '显示/隐藏列',

  sortAscText: '正序排列',

  sortDescText: '倒序排列',

  forceFit: true,

  enableRowBody: true

  },

  bbar: new Ext.PagingToolbar({

  pageSize: 25,

  store: store,

  displayInfo: true,

  displayMsg: '当前显示从{0}至{1}, 共{2}条记录',

  emptyMsg: "当前没有记录"

  })

  });