View Full Version : Add Grid values

10 Mar 2012, 12:54 AM
hello !
i have another prob , i have a form , having grid , and some textboxes , now what i am doing is , i am loading records in grid from my mssql server 2008 r2 , after showing the records , i can able to edit the grid cells according to my need , now here is the prob , how can i update my store also , so that i can update my records. someone tell me about store's writer and getModifiedRecords() , but after searching on net i cant able to perform this , please help me and guide me .

Best Regards

M.Waqas Aslam

10 Mar 2012, 1:33 AM
if the store is attached to this grid (you have defined it in the grid's config), then any changes you make in the grid using rowediting or cellediting plugins are also made to the store data and when you call store.sync(), any new, modified or deleted records will be sent to the server using the proxy configured for the store.

OR you can set autoSync: true on the store to send the changes automatically.

10 Mar 2012, 1:50 AM
thanks for the reply sir Farish , here is a coding by using which i can edit the grid ,please i know that it take long time to read full code , but please if you have time then please help me ,

//here is i am defining the store
var store = new Ext.data.Store({
// autoLoad: true
autoDestroy: true,
reader: new Ext.data.ArrayReader(
{ root: 'd',
id: 'ProductID',
fields: ['ProductID', 'ProductName', 'Qty', 'Rate', 'Total']

, proxy: new Ext.data.HttpProxy({
url: 'services/myWebService.asmx/GetCityList?id=100' , // ASP.NET WebService call in GET format

headers: {
'Content-type': 'application/json' // IMPORTANT! Without this FireFox will not understand WebService response

now here is i am defining the column model.

// shorthand alias
var fm = Ext.form;

var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {sortable: true},
columns: [
{id: 'ID',header: 'ID',dataIndex: 'ProductID',editor:new fm.NumberField({ allowBlank: false})},
{ id: 'Name', header: 'Name',dataIndex: 'ProductName', editor:new fm.TextField({ allowBlank: false}) },
{ id: 'Qty', header: 'Qty',dataIndex: 'Qty', editor: new fm.NumberField({ allowBlank: false}) },
{ id: 'Rate', header: 'Rate',dataIndex: 'Rate', editor:new fm.NumberField( { allowBlank: false})},
{ id: 'Total', header: 'Total',dataIndex: 'Total', editor: new fm.NumberField({ allowBlank: false})},

and here i am defining the grid ,

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
//renderTo: 'editor-grid',
width: 670,
height: 350,
autoExpandColumn: 'Name', // column with this id will be expanded
frame: true,

so after reading all code , please tell me is by editing the records in grid my stores records are also edited ? please guide me

Best Regards

10 Mar 2012, 3:56 AM
which ExtJS version are you using? editorgridpanel isnt part of ExtJS 4. Take a look at the examples. Here is one example which is using cellEditing plugin:

http://docs.sencha.com/ext-js/4-0/#!/example/grid/cell-editing.html (http://docs.sencha.com/ext-js/4-0/#%21/example/grid/cell-editing.html)

You should define a model which defines which fields and of what types will be present in your store. In you store you use this model in the configs. You dont need a column model. Columns can be defined directly in the columns config of the grid Or you can create a normal javascript array and assign it to the columns config in the grid (like you have done with the cm config but which is not part of the ExtJS4 documentation!).

You can create a cellEditing plugin (or a rowEditing plugin if you want to edit the whole row and not particular cells) like this:

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) // Use 2 here if you want to edit on double click;
then in the plugins config or the grid, you can use this plugin.

In the store, also define a writer. this is how the data will be sent to the server. Set autoSync: true in the store to save data on each change of call store.sync(). After making any change, when you call console.log(store.getModifiedRecords()) (before saving changes) you should see the modified records in the firebug console.

One other thing to note in the example is how the editor is defined with each column. You are not using code from ExtJS4 but rather from a sample which I think is for ExtJS3.