PDA

View Full Version : Editable grid display a blank row after a new row is submitted



sliks
31 Oct 2011, 7:29 AM
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
},
}
});

sliks
31 Oct 2011, 12:59 PM
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();
}
}
}

JambaFun
31 Oct 2011, 4:10 PM
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

sliks
1 Nov 2011, 5:32 AM
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!