Results 1 to 4 of 4

Thread: Editable grid display a blank row after a new row is submitted

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Answers
    2

    Default Answered: Editable grid display a blank row after a new row is submitted

    I have an editable grid that allows user to add new record using a toolbar button. Everything work fine until I press the Updated button on the new row. The data is sent to my backend (Grials) successfully and saved to the database, but the new row becomes a record with empty strings. It's blank. I checked the stores using illuminations. The record of that row is a empty string.

    Am I missing anything from my code?

    This is the editorable grid:
    Ext.define('Ext.empProfile.widgets.UserLanguageDataGrid', {
    extend: 'Ext.grid.Panel',
    initComponent: function () {

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: true
    });

    var storeVar = Ext.create('Ext.empProfile.stores.UserLanguageStore');
    this.tbar = Ext.create('Ext.Toolbar', {
    id: 'userLauguageToolbar',
    autoHeight: true,
    items: [
    {
    xtype: 'button',
    text: 'Add',
    iconCls: 'add-icon16',
    itemId: 'addLanguageBtn',
    id: 'addLanguageBtn',
    handler: function(){
    rowEditing.cancelEdit();
    storeVar.insert(0, storeVar);
    rowEditing.startEdit(0, 0);
    }
    },
    {
    xtype: 'button',
    itemId: 'removeLanguageBtn',
    text: 'Remove',
    iconCls: 'SaveClose-icon16',
    scope: this,
    handler: function() {
    var sm = this.getSelectionModel();
    rowEditing.cancelEdit();
    storeVar.remove(sm.getSelection());
    if (storeVar.getCount() > 0) {
    sm.select(0);
    }
    },
    disabled: true
    }
    ],

    });
    this.plugins = rowEditing;
    this.id = 'UserLanguageDataGrid';
    this.store = storeVar;
    this.width = 325;
    this.height = 180;
    this.columns = [
    {
    xtype: 'gridcolumn',
    dataIndex: 'language',
    header: 'Language',
    flex: 1,
    editor: {
    xtype: 'combobox',
    store: Ext.create('Ext.empProfile.stores.ListLanguage'),
    displayField: 'name',
    valueField: 'id'
    }
    },
    {
    xtype: 'gridcolumn',
    dataIndex: 'proficiency',
    header: 'Proficiency',
    width: 100,
    editor: {
    xtype: 'combobox',
    store: Ext.create('Ext.empProfile.stores.ListProficiency'),
    displayField: 'name',
    valueField: 'id'
    }
    }
    ];
    this.viewConfig = {
    emptyText: '<div style="width:auto; text-align:center; padding-top:5px;padding-bottom:5px;">There is no data available.</div>',
    deferEmptyText: false
    };
    this.listeners = {
    'selectionchange': function(view, records) {
    this.down('#removeLanguageBtn').setDisabled(!records.length);
    }
    };
    this.renderTo = Ext.getBody();
    this.callParent();
    }
    });

    and this is the model:
    Ext.define('Ext.empProfile.models.UserLanguageRecord', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'id', type: 'integer'},
    {name: 'language', type: 'string'},
    {name: 'proficiency', type: 'string'},
    ],
    validations: [
    {type: 'presence', field: 'language'},
    {type: 'presence',field: 'proficiency'},
    ]
    });

    this is the store:
    Ext.define('Ext.empProfile.stores.UserLanguageStore', {
    requires: [
    'Ext.empProfile.models.UserLanguageRecord'
    ],
    extend: 'Ext.data.Store',
    model: 'Ext.empProfile.models.UserLanguageRecord',
    storeId: 'UserLanguageStore',
    autoLoad: true,
    autoSync: true,
    proxy: {
    type: 'rest',
    api: {
    read: '/userLanguage/show',
    create: '/userLanguage/save',
    update: '/userLanguage/update',
    destroy: '/userLanguage/delete'
    },
    reader: {
    type: 'json',
    root: 'data'
    },
    writer: {
    type: 'json',
    root: 'data',
    encode: true
    },
    }
    });

  2. Hi silks,

    You have to use CODE-tags. It's that little button looking like this #. As it stands your code is totally unreadable.

    That being said. I think the problem is that the server response from your save does not contain the full record. When you save a record it is replaced with what comes back from the server. If the response is empty the record will be empty.

    Best Regards

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Answers
    2

    Default

    I have been looking for solutions for several days. I still do not know the reasons behind, but I manage to come up to a work around. I added a listener to the grid so that it will refresh the grid every time a row is changed. It's far from prefect but I will take it for now. Any other solutions are still welcomed.

    this.listeners = {
    'edit': function(editor, e) {
    Ext.Msg.show({
    title:'Added',
    msg: 'Language added',
    buttons: Ext.Msg.OK,
    fn: reloadStore,
    icon: Ext.Msg.INFO
    });
    function reloadStore(btn){
    if (btn == 'ok'){
    storeVar.load();
    }
    }
    }

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Sweden
    Posts
    36
    Answers
    10

    Default

    Hi silks,

    You have to use CODE-tags. It's that little button looking like this #. As it stands your code is totally unreadable.

    That being said. I think the problem is that the server response from your save does not contain the full record. When you save a record it is replaced with what comes back from the server. If the response is empty the record will be empty.

    Best Regards

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Answers
    2

    Default

    Sorry about the format of my code. I am still new to ExtJs and this forum. But your solution works! Thank you for you help and suggestion!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •