Synching Grid with store and vise versa

[infernoz]

Hello,

I have a GridPanel with a Store associated with it, and a button in the panels layout. When the button is pressed, I call store.sync() which calls my servlet on my server that I have configured via Proxy and all of the data in the store is sent (turned autosync off for functionality reasons). Fine and great :).

However I have noticed two things:

1. My grid is editable and when I edit my grid, the new data is not in the store, so when I call store.sync() the data originally in the grid is sent to the server not my new data. How do I make sure the data that is in the grid is sent to the server (ie: how do I sync my panel and store before the stores proxy sends data to the server)?

2. When my store.sync() response comes back my json object is in the response, however my data is not being updated in my grid panel. How do I make sure that my panel and store are bothupdated with the json response from the server?

Here is some snippets of code: Thanks for your help!

View - GridPanel

Ext.define('DMT.view.PersonGeoUnitView' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.personGeoUnitView',

title : 'GeoUnitUpdate',
store: 'FakeData',
selType: 'cellmodel',

plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],

dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
layout: {
pack: 'left'
},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Submit', width: 80, listeners: {
'click': function() {
var thisStore = Ext.widget('fakeDataStore');
thisStore.sync();
}}}
]
}],

initComponent: function() {

this.columns = [
{header: 'SSO_ID', dataIndex: 'ssoId', flex: 1, hideable: false},
{header: 'SSO_TYPE', dataIndex: 'ssoType', flex: 1, hidden: true, hideable: false},
{header: 'GEO_UNIT_PURPOSE', dataIndex: 'geoUnitPurpose', flex: 1, hideable: false},
{header: 'GEO_UNIT_TYPE', dataIndex: 'geoUnitType', flex: 1, hideable: false},
{header: 'GEO_UNIT_VALUE', dataIndex: 'geoUnitValue', flex: 1, editor: 'textfield', hideable: false},
{header: 'GS_DATA_SOURCE_ID', dataIndex: 'gsDataSourceId', flex: 1, hidden: true, hideable: false},
{header: 'START_DATE', dataIndex: 'startDate', flex: 1, hidden: true, hideable: false},
{header: 'END_DATE', dataIndex: 'endDate', flex: 1, hidden: true, hideable: false},
{header: 'UPDATE_DATE', dataIndex: 'updateDate', flex: 1, hidden: true, hideable: false},
{header: 'UPDATE_ID', dataIndex: 'updateId', flex: 1, hidden: true, hideable: false},
{header: 'TAX_ID_TYPE', dataIndex: 'taxIdType', flex: 1, editor: 'textfield', hideable: false},
{header: 'TAX_ID', dataIndex: 'taxId', flex: 1, editor: 'textfield', hideable: false},
{header: 'TRANSACTION_TYPE', dataIndex: 'transactionType', flex: 1, hidden: true, hideable: false},
{header: 'DELETE', dataIndex: 'deleteRow', xtype: 'checkcolumn', width: 80, editor: 'checkbox', sortable: false, hideable: false}
];

this.callParent(arguments);
}
});

- Store and Proxy

Ext.define('DMT.store.FakeData', {
extend: 'Ext.data.Store',
model: 'DMT.model.PersonGeoUnitModel',
alias : 'widget.fakeDataStore',

proxy: {
type: 'ajax',
url: '/DMT/index.html',
reader: {
type: 'json',
root: 'data',
idProperty: 'id'
},
writer: {
type: 'json',
root: 'data',
encode: true,
writeAllFields: true
}
},


data: [
{ssoId: 'abc', geoUnitPurpose: 'LICENSE', geoUnitType: 'COUNTRY', geoUnitValue: 'HK', taxIdType: 'ANLLICID',
taxId: 'ABCD123'},
{ssoId: 'someone_else', geoUnitPurpose: 'LICENSE', geoUnitType: 'COUNTRY', geoUnitValue: 'HK', taxIdType: 'ANLLICID',
taxId: 'ABCD456'}
]
});

[mankz]

The data initially in your store is sent to the server since those records don't have any id's assigned to them. Hence Ext JS thinks they've not been persisted (i.e. they are 'phantom' records).

[infernoz]

Ahh I see.

So, I set the idProperty on my proxys reader to ssoId as this is the primary key I should be using.

However, when I call sync, the original data is still being sent. I changed the idProperty in my model as well, but this prevented my submit button from working at all.

Ext.define('DMT.model.PersonGeoUnitModel', {
extend: 'Ext.data.Model',

idProperty: 'ssoId',

fields: [
{name: 'ssoId', type: 'string'},
{name: 'ssoType', type: 'string'},
{name: 'geoUnitPurpose', type: 'string'},
{name: 'geoUnitType', type: 'string'},
{name: 'geoUnitValue', type: 'string'},
{name: 'gsDataSourceId', type: 'string'},
{name: 'startDate', type: 'date'},
{name: 'endDate', type: 'date'},
{name: 'updateDate', type: 'date'},
{name: 'updateId', type: 'string'},
{name: 'taxIdType', type: 'string'},
{name: 'taxId', type: 'string'},
{name: 'transactionType', type: 'string'},
{name: 'deleteRow', type: 'bool'}]
});

--- Proxy defined in view file
proxy: {
type: 'ajax',
url: '/DMT/index.html',
reader: {
type: 'json',
root: 'data',
idProperty: 'ssoId'
},
writer: {
type: 'json',
root: 'data',
encode: true,
writeAllFields: true
}
},

[vietits]

I think the problem here is that each time the Submit button is clicked, you create a new store instance and sync this store with your server. This instance is not the same as the store instance you use with your grid (store: 'FakeData').

To fix the problem, you must use the instance that attached with your grid:


Ext.define('DMT.view.PersonGeoUnitView' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.personGeoUnitView',
title : 'GeoUnitUpdate',
store: 'FakeData',
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
layout: {
pack: 'left'
},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Submit', width: 80, listeners: {
'click': function() {
//var thisStore = Ext.widget('fakeDataStore'); <- this create a new store instance
//thisStore.sync();
var store = Ext.data.StoreManager.lookup('FakeData');
store.sync();
}
}}
]
}],

[jay@moduscreate.com]

You absolutely need to start using code tags. You might risk the chance of someone not helping your because your code is not formatted and readable.

[infernoz]

vietits thank you for your response, you are correct I was creating a new store instead of using the one attached to the grid this fixed the issue.

Jay, I apologize and will use the code tags starting with this thread and going forward.

So I am able to send the data in my to the server via the sync() function, but when I get a response back, the rows in the grid all become blank (ie: starting with 2 rows populated with data, end up with 2 rows with no data in them). I would like them to be updated, with my json respnose being returned:

Do I have to do something extra besides set up the reader in my proxy in order for my grid to show the json data being returned from the server? I have set the idProperty in the reader to be a column in my model. What am I missing?

(json response copied from firebug)

{"data":"[
{\"ssoId\":\"hi_there\",
\"ssoType\":\"\",
\"geoUnitPurpose\":\"LICENSE\",
\"geoUnitType\":\"COUNTRY\",
\"geoUnitValue\":\"ABC\",
\"gsDataSourceId\":\"\",
\"startDate\":null,
\"endDate\":null,
\"updateDate\":null,
\"updateId\":\"\",
\"taxIdType\":\"ANLLICID\",
\"taxId\":\"ABCD123\",
\"transactionType\":\"\",
\"deleteRow\":false
},
{\"ssoId\":\"someone_else\"
,\"ssoType\":\"\"
,\"geoUnitPurpose\":\"LICENSE\",
\"geoUnitType\":\"COUNTRY\",
\"geoUnitValue\":\"HK\",
\"gsDataSourceId\":\"\",
\"startDate\":null,
\"endDate\":null,
\"updateDate\":null,
\"updateId\":\"\",
\"taxIdType\":\"ANLLICID\",
\"taxId\":\"ABCD456\",
\"transactionType\":\"\",
\"deleteRow\":false
}
]"}

-View

Ext.define('DMT.view.PersonGeoUnitView' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.personGeoUnitView',

title : 'GeoUnitUpdate',
store: 'PersonGeoUnitStore',
selType: 'cellmodel',

plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],

dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
layout: {
pack: 'left'
},
items: [
{ xtype: 'component', flex: 1 },
{ xtype: 'button', text: 'Submit', width: 80, listeners: {
'click': function() {
var personGeoUnitStore = Ext.data.StoreManager.lookup('PersonGeoUnitStore');
personGeoUnitStore.sync();
}}}
]
}],

initComponent: function() {

this.columns = [
{header: 'SSO_ID', dataIndex: 'ssoId', flex: 1, hideable: false},
{header: 'SSO_TYPE', dataIndex: 'ssoType', flex: 1, hidden: true, hideable: false},
{header: 'GEO_UNIT_PURPOSE', dataIndex: 'geoUnitPurpose', flex: 1, hideable: false},
{header: 'GEO_UNIT_TYPE', dataIndex: 'geoUnitType', flex: 1, hideable: false},
{header: 'GEO_UNIT_VALUE', dataIndex: 'geoUnitValue', flex: 1, editor: 'textfield', hideable: false},
{header: 'GS_DATA_SOURCE_ID', dataIndex: 'gsDataSourceId', flex: 1, hidden: true, hideable: false},
{header: 'START_DATE', dataIndex: 'startDate', flex: 1, hidden: true, hideable: false},
{header: 'END_DATE', dataIndex: 'endDate', flex: 1, hidden: true, hideable: false},
{header: 'UPDATE_DATE', dataIndex: 'updateDate', flex: 1, hidden: true, hideable: false},
{header: 'UPDATE_ID', dataIndex: 'updateId', flex: 1, hidden: true, hideable: false},
{header: 'TAX_ID_TYPE', dataIndex: 'taxIdType', flex: 1, editor: 'textfield', hideable: false},
{header: 'TAX_ID', dataIndex: 'taxId', flex: 1, editor: 'textfield', hideable: false},
{header: 'TRANSACTION_TYPE', dataIndex: 'transactionType', flex: 1, hidden: true, hideable: false},
{header: 'DELETE', dataIndex: 'deleteRow', xtype: 'checkcolumn', width: 80, editor: 'checkbox', sortable: false, hideable: false}
];

this.callParent(arguments);
}
});

--Model

Ext.define('DMT.model.PersonGeoUnitModel', {
extend: 'Ext.data.Model',

fields: [
{name: 'ssoId', type: 'string'},
{name: 'ssoType', type: 'string'},
{name: 'geoUnitPurpose', type: 'string'},
{name: 'geoUnitType', type: 'string'},
{name: 'geoUnitValue', type: 'string'},
{name: 'gsDataSourceId', type: 'string'},
{name: 'startDate', type: 'date'},
{name: 'endDate', type: 'date'},
{name: 'updateDate', type: 'date'},
{name: 'updateId', type: 'string'},
{name: 'taxIdType', type: 'string'},
{name: 'taxId', type: 'string'},
{name: 'transactionType', type: 'string'},
{name: 'deleteRow', type: 'bool'}]
});

-Store

Ext.define('DMT.store.PersonGeoUnitStore', {
extend: 'Ext.data.Store',
model: 'DMT.model.PersonGeoUnitModel',
alias : 'widget.PersonGeoUnitStore',
storeId: 'personGeoUnitStore',

proxy: {
type: 'ajax',
url: '/DMT/index.html',
reader: {
type: 'json',
root: 'data',
idProperty: 'ssoId'
},
writer: {
type: 'json',
root: 'data',
encode: true,
writeAllFields: true
}
},


data: [
{ssoId: 'some_person', geoUnitPurpose: 'LICENSE', geoUnitType: 'COUNTRY', geoUnitValue: 'HK', taxIdType: 'ANLLICID',
taxId: 'ABCD123'},
{ssoId: 'someone_else', geoUnitPurpose: 'LICENSE', geoUnitType: 'COUNTRY', geoUnitValue: 'HK', taxIdType: 'ANLLICID',
taxId: 'ABCD456'}
]
});