标签:
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‘ } }] });
EXTJS4.2 控件之Grid 根据数据源某列数据不同绑定不同的控件setEditor
标签:
原文地址:http://www.cnblogs.com/foreverfendou/p/4445053.html