Проблема со списком временных полей в сетке с использованием extjs4
1) Создайте сетку и добавьте в нее поле типа 'timefield' с рендерером формата ('h: i A'). 2) Добавьте строку и сделайте выделение в столбце «timefield», скажем, 4:00 AM. 3) Добавьте еще один ряд прилагательных и выберите те же данные, то есть 4:00 AM в раскрывающемся списке. Вы не сможете выполнить это действие, и вам нужно выбрать другое время, а затем вернуться к первоначальному выбору. Похоже, это ошибка ExtJS. как решить эту проблему.
У меня есть код в сетке
this.mcmGridPanel = new Ext.grid.GridPanel({ height: 360, width: 680, title: 'Shifts', store: App.mcmAgentShiftStore, multiSelect: true, x: 0, y: 100, columns: [
{ xtype: 'gridcolumn', header: 'Name', width: 120, dataIndex: 'Name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ xtype: 'gridcolumn', header: 'Initials', width: 45, dataIndex: 'Initials',
editor: { xtype: 'textfield' }
},
{ xtype: 'gridcolumn', header: 'Employee Id', width: 75, dataIndex: 'EmployeeId',
editor: {
xtype: 'numberfield',
allowBlank: false
}
},
{ xtype: 'gridcolumn', header: 'Phone#', width: 100, dataIndex: 'MobilePhoneId',
editor: {
//TCS: 12/3/2013 cell phone table modified
xtype: 'combobox',
typeAhead: true,
editable: true,
triggerAction: 'all',
selectionOnTab: true,
// lazyRender: true,
// forceSelection: true,
store: App.mcmAllMobilePhoneStore,
displayField: 'MobileIdentifier',
valueField: 'MobilePhoneId',
value: 'MobilePhoneId',
queryMode: 'local',
queryDelay: 100,
specialkey: function(f, e) {
if(e.getKey() === e.ESC) {
this.hide(); }
},
listeners: {
load: function(store, recs, success) {
if(Ext.typeOf(this.getPicker().loadMask) != "boolean") {
console.log("trying to hide the loadmask");
this.getPicker().loadMask.hide();
}
}
}
},
> renderer: function(value,metaData,record) {
if(value) {
var MobileStore = Ext.getStore( App.mcmAllMobilePhoneStore);
var Record = MobileStore.findRecord('MobilePhoneId', value);
return Record ? Record.get('MobileIdentifier'): record.get('MobileIdentifier');
} else return "";
}//TCS: 12/3/2013 cell phone table modified end*/ },
{ xtype: 'datecolumn', header: 'Start Date', width: 84, dataIndex: 'StartAvailability', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'Start', width: 65, dataIndex: 'StartAvailabilityTime', format: 'H:i',
editor: {
xtype: 'timefield',
id: starttime,
format: 'H:i',
increment: 15,
allowBlank: false
}
},
{ xtype: 'datecolumn', header: 'End Date', width: 84, dataIndex: 'EndAvailability', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'End', width: 65, dataIndex: 'EndAvailabilityTime', format: 'H:i',
editor: {
xtype: 'timefield',
id: endtime,
format: 'H:i',
increment: 15,
allowBlank: false
}
} ], tbar: [
{
text: 'Add',
tooltip: 'Add Shift',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
var agent = this.mcmAgentCombobox.getValue();
if(agent) {
addShift.call(this, agent);
} else {
App.mcmShowMessageBox({
title: 'Important',
message: 'Please select an agent',
time: 2000
});
}
}
},
{
itemId: 'removeShift',
text: 'Remove',
tooltip: 'Remove Selected Shifts',
iconCls: 'icon-shift-remove',
scope: me,
handler: function() {
this.mcmRemoveShifts();
},
disabled: true
},
{
itemId: 'closeoutShift',
text: 'Closeout',
tooltip: 'Closeout Selected Shifts',
iconCls: 'icon-shift-closeout',
scope: me,
handler: function() {
var selection = this.mcmGridPanel.getSelectionModel().getSelection();
if(selection.length && selection.length > 1) {
App.mcmShowMessageBox({
title: 'Important',
message: 'Please enter a single shift to perform closeout',
time: 2000
});
return;
}
App.mcmCloseoutShift(selection[0]);
},
disabled: true
},
//TCS: 12/3/2013 cell phone table modification
{
text: 'Add Cell Phone',
tooltip: 'Add CellPhone',
iconCls: 'icon-cellphone-add',
scope: this,
handler: function()
{
this.hide;
App.mcmShowMobilePhoneWindow();
}
},
//TCS: 12/3/2013 cell phone table modification end ], plugins: [ this.mcmRowEditing ], viewConfig: {}, listeners: {
scope: me,
beforeedit : function(editor, e) {
editor.down('[@id=starttime]').clearValue();
editor.down('[@id=endtime]').clearValue();
} }
Я сбрасываю значения перед редактированием. но это не работает.