EXTJS4.2 控件之Grid 根据数据源某列数据不同绑定不同的控件setEditor

mac2022-06-30  74

Grid 根据数据源某列数据不同绑定不同的控件,例如:文本框和下拉框

主要代码写在grid的  plugins: [rowEditing],下面这是定义的rowEditing对象,这里面的要定义成 Ext.grid.plugin.CellEditing而不是Ext.grid.plugin.RowEditing

Ext.getCmp('pvn').setEditor(form组件);这是给grid的列绑定组件, pvn是在列中定义的id!如下:var rowEditing = Ext.create('Ext.grid.plugin.CellEditing', {// RowEditing clicksToEdit: 2, listeners: { 'edit': function (e, s) { var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data; if (selectedData.ValueMethod == "1") { Ext.getCmp('pvn').setEditor( new Ext.form.field.ComboBox({ name: 'PropertyValueName', typeAhead: true, store: comboData_DynaPropertyValue, valueField: "PropertyValueName", displayField: "PropertyValueName", queryMode: 'remote', //local remote triggerAction: 'all', lazyRender: true, repeatTriggerClick: true, listeners: { "expand": function (combo, store, index) { var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data; comboData_DynaPropertyValue.load({ params: { PropertyId: selectedData.PropId, start: startDynaProperty, limit: limitDynaProperty } }); } } })); } else { Ext.getCmp('pvn').setEditor(new Ext.form.field.Text()); } } } });

 

 

 

如图:1.绑定下拉框

2.绑定文本框

代码如下:

var rowEditing = Ext.create('Ext.grid.plugin.CellEditing', {// RowEditing clicksToEdit: 2, listeners: { 'edit': function (e, s) { var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data; if (selectedData.ValueMethod == "1") { Ext.getCmp('pvn').setEditor( new Ext.form.field.ComboBox({ name: 'PropertyValueName', typeAhead: true, store: comboData_DynaPropertyValue, valueField: "PropertyValueName", displayField: "PropertyValueName", queryMode: 'remote', //local remote triggerAction: 'all', lazyRender: true, repeatTriggerClick: true, listeners: { "expand": function (combo, store, index) { var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data; comboData_DynaPropertyValue.load({ params: { PropertyId: selectedData.PropId, start: startDynaProperty, limit: limitDynaProperty } }); } } })); } else { Ext.getCmp('pvn').setEditor(new Ext.form.field.Text()); } } } }); var grid_DynaProperty = Ext.create('Ext.grid.Panel', { store: store_DynaProperty, autoWidth: true, aotuHeight: true, animCollapse: false, enableColumnMove: false, enableHdMenu: false, loadMask: true, loadMask: { msg: '正在载入数据,请稍候...' }, viewConfig: { forceFit: true, stripeRows: true }, forceFit: true, //列表宽度自适应 stripeRows: true, //斑马线 autoSizeColumns: true, //根据每一列内容的宽度自适应列的大小 trackMouseOver: true, //鼠标移动时高亮显示 selModel: { selType: 'checkboxmodel' }, //选择框 scroll: true, plugins: [rowEditing], columns: [{ header: '序号', xtype: 'rownumberer', align: 'left', width: 50 }, { header: '属性', dataIndex: 'PropertyName', width: 200 }, { header: '填值方式', dataIndex: 'ValueMethod', width: 200, renderer: function (v, nv, v1) { if (v == "1") { return '选择属性值'; } else { return '手输属性值'; } } }, { header: '属性英文名', id: 'PropertyEngName', dataIndex: 'PropertyEngName', width: 200, editor: { allowBlank: true } }, { header: '属性值', id: 'pvn', dataIndex: 'PropertyValueName', width: 130, editor: { xtype: 'numberfield' } }] });

 

转载于:https://www.cnblogs.com/foreverfendou/p/4445053.html

最新回复(0)