ExtJs 6.0:使用组合框编辑网格单元格-不同步id值
ExtJs 6.0 : Grid Cell Editing with a Combobox - Not Syncing the id value
我使用ext .grid.plugin. celllediting的网格。在网格上,有一个组合框和一个日期。日期同步正确,但组合框试图将组合框的id保存在字符串描述字段中。
我的组合框有字段codeChecklistItemStatusId(外键)和codeChecklistItemStatus(用户显示字段)。
当我编辑ChecklistItemStatus字段时,我为显示字段选择的字段(dataIndex: 'codeChecklistItemStatus')被更新为整数。在保存时,字段codeChecklistItemStatus从字符串描述更改为新的id值,并且我想要更改的字段codeChecklistItemStatusId仍然具有原始id值。
我在网上找到的所有例子都有一个字符串值被保存,而不是id值。是否有办法改变codeChecklistItemStatusId字段而不是codeChecklistItemStatus?
我把dataIndex: 'codeChecklistItemStatusId'在我的网格和网格然后显示数字给用户,而不是一个描述。但是,当保存正确的字段codeChecklistItemStatusId被正确更新。
ChecklistItem存储:
Ext.define('gui.store.IspIntakeChecklistItem',
{
extend: 'Ext.data.Store',
model: 'gui.model.IspIntakeChecklistItem',
root: 'data',
proxy:
{
type: 'ajax',
api:
{
read: 'ispIntakeChecklistItem/search',
update: 'ispIntakeChecklistItem/quickEdit'
},
actionMethods:
{
read: 'POST'
},
reader:
{
type: 'json',
rootProperty: 'data'
},
writer:
{
type: 'json',
allowSingle: false,
writeAllFields: true
}
}
});
CheckListItem模型:
Ext.define('gui.model.IspIntakeChecklistItem',
{
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'codeChecklistItemStatusId'
},
{
name: 'codeChecklistItemStatus'
},
{
name: 'followUpDate'
}
]
});
组合框的存储:
Ext.define('gui.store.maint.CodeChecklistItemStatus',
{
extend: 'Ext.data.Store',
remoteSort: true,
pageSize: gui.data.Constants.MAX_CODE_RESULTS_IN_GRID,
model: 'gui.model.maint.CodeChecklistItemStatus',
root: 'data',
autoLoad: true,
proxy:
{
type: 'ajax',
api:
{
read: 'codeChecklistItemStatus/search',
update: 'codeChecklistItemStatus/updateSortOrder'
},
actionMethods:
{
read: 'POST'
},
reader:
{
type: 'json',
rootProperty: 'data'
}
}
});
组合框的模型:
Ext.define('gui.model.maint.CodeChecklistItem',
{
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'activeFlag'
},
{
name: 'description'
},
{
name: 'sortOrder'
},
{
name: 'createDate'
},
{
name: 'createUser'
},
{
name: 'lastUpdDate'
},
{
name: 'lastUpdUser'
}
]
});
下面是网格中启用了celllediting的几个字段:
{
text: 'Checklist Item Status',
itemId: 'codeChecklistItemStatusGridFld',
dataIndex: 'codeChecklistItemStatus',
width: 200,
editor: {
xtype: 'combobox',
queryMode: 'local',
valueField: 'id',
displayField: 'description',
typeAhead: true,
forceSelection: true,
store: 'maint.CodeChecklistItemStatus',
allowBlank: false
},
tdCls: 'editableCell'
},
{
text: 'Follow Up Date',
dataIndex: 'followUpDate',
width: 150,
editor: {
xtype: 'datefield'
},
tdCls: 'editableCell'
}
我的控制器功能:
quickEditChecklistItem: function(editor, e, eOpts) {
if (e.originalValue !== e.value) {
debugger;
var rec = e.record;
var store = this.getIspIntakeChecklistItemStore();
//store.add(rec);
store.sync({
scope: this,
success: function(batch, options) {
Ext.create('gui.widget.Notify').success('Checklist Item saved successfully');
},
failure: function(batch, options) {
Ext.create('gui.widget.Notify').failure('failure');
}
});
}
}
我的一个同事想出了办法。在网格中,我只需要定义组合框列的dataIndex:
{
xtype: 'editableComboboxGridColumn',
dataIndex: 'codeChecklistItemStatusId'
},
他创建了一个可重用的xtype来处理所有混乱的代码:
Ext.define('gui.widget.EditableComboboxGridColumn', {
extend: 'Ext.grid.column.Column',
xtype: 'editableComboboxGridColumn',
width: 200,
tdCls: 'editableCell',
//Required property: dataIndex
initComponent: function()
{
var nameCamel = Utilities.toCamelCase(this.dataIndex);
nameCamel = Utilities.removeId(nameCamel);
if (this.text == ' ')
this.text = Utilities.fieldNameToLabel(this.dataIndex);
if (!this.itemId)
this.itemId = Utilities.removeId(this.dataIndex) + "GridFld";
if (!this.store)
this.store = 'maint.' + nameCamel;
if (!this.editor)
{
this.editor =
{
xtype: 'combobox',
queryMode: 'local',
valueField: (this.valueField ? this.valueField : 'id'),
displayField: (this.displayField ? this.displayField : 'description'),
typeAhead: true,
forceSelection: true,
store: this.store,
allowBlank: false
}
}
if (!this.renderer)
{
this.renderer = function (value, metaData, record)
{
var editor = metaData.column.getEditor(record);
var storeRecord = editor.store.getById(value);
if(storeRecord)
return storeRecord.data[editor.displayField];
else
return null;
}
}
this.callParent(arguments);
}
});
Utilities.js中的其他代码:
Ext.define('gui.Utilities',
{
alternateClassName: 'Utilities',
singleton: true,
fieldNameToLabel: function(name)
{
var nameProper = '';
for (var i = 0; i < name.length; i++) {
var character = name.substr(i, 1);
if (character.toUpperCase() == character)
nameProper += ' ';
if (nameProper.length == 0)
nameProper += character.toUpperCase();
else
nameProper += character;
}
if (nameProper.indexOf('Code ') == 0)
nameProper = nameProper.substring(5);
if (nameProper.length == nameProper.indexOf(' Id') + 3)
nameProper = nameProper.substring(0, nameProper.length - 3);
var regex = / Flag$/
if (regex.test(nameProper))
nameProper = nameProper.replace(regex, '');
if (nameProper.indexOf(' Upd ') > -1)
nameProper = nameProper.replace(' Upd ', ' Update ');
return nameProper;
},
toCamelCase: function(name)
{
return name.substring(0, 1).toUpperCase() + name.substring(1);
},
removeId: function(name)
{
var regex = /'s?Id$/;
if (regex.test(name))
name = name.replace(regex, '');
return name;
}
});
在开发泛型xtype之前,我们最初使用这段代码:
renderer : function (value, metaData, record) {
var editor = metaData.column.getEditor(record);
var storeRecord = editor.store.getById(value);
if(storeRecord)
return storeRecord.data[editor.displayField];
else
return null;
}
- ExtJS网格单元格编辑器,防止焦点松动问题
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- Extjs 4网格:根据存储文本值在单元格中放置图标
- ExtJ将工具提示添加到网格单元格文本中
- 编辑后更改切片网格单元格数据
- 如何使用 javascript 修改网格视图单元格值
- Kendo UI网格有条件可编辑的单元格
- 用户输入的动态表,单元格id作为网格引用
- 在客户端的编辑模式下,在同一单元格网格视图中选中复选框时禁用文本框
- 剑道网格:在数据源同步后保留导航单元格
- 如何使用ng网格在单元格模板上应用字段
- Angularjs ng网格的选择单元格未选择正确的值
- KO网格无法保存编辑单元格中的数据-使用Plunker
- 剑道网格:如何在与Angular一起使用时从组合框单元格模板中获取所选项目
- C#网格视图从动态创建的DataTable中实现可点击单元格
- 在extjs网格4.0中获取textfield单元格td
- 剑道UI网格更新仅更改了单元格/列
- 如何在后台网格中将特定的可编辑单元格设置为不可编辑
- 将自定义颜色添加到w2ui单元格[网格]