2015-09-16 44 views
0

我使用了一個帶有Ext.grid.plugin.CellEditing的網格。在網格上,有一個組合框和一個日期。日期正確同步,但組合框嘗試將組合框的ID保存在字符串描述字段中。ExtJs 6.0:使用組合框編輯網格單元 - 不同步id值

我的組合框包含字段codeChecklistItemStatusId(外鍵)和codeChecklistItemStatus(用戶的顯示字段)。

當我編輯檢查表項目狀態字段時,我選擇顯示的字段(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' 
     } 
] 
}); 

ComboBox的店:

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' 
    } 
} 
}); 

ComboBox的模式:

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' 
     } 
] 
}); 

這裏有幾個能在具有CellEditing電網領域:

  { 
      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'); 
      } 
     }); 
    } 
} 

回答

0

我的一位同事想出如何做到這一點。在網格中的所有我需要定義是組合框列的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; 
} 
相關問題