PDA

View Full Version : Problem in saving Grid data rows in Extjs4.2 inline editable Grid



quas1986
16 Sep 2013, 5:12 AM
In my js file i wrote the following code to make inline update



Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', 'extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);



Ext.onReady(function(){
Ext.tip.QuickTipManager.init();

Ext.define('ForumThread', {
extend: 'Ext.data.Model',

fields: [
{name: 'id'},
{name: 'npi_no'},
{name: 'lname'},
{name: 'fname'},
{name: 'speciality'},
{name: 'added_date'},
{name: 'diagnosis_template'},
{name: 'procedure_template'},
{name: 'optional_template'},
{name: 'status'}
],

idProperty: 'id'
});

// Generate mock employee data
var url = {
remote: 'json_pages/providers_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;

// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
url: (local ? url.local : url.remote),
//url: '../new_charges_json.php',
//url: 'http://www.sencha.com/forum/topics-browse-remote.php',
//url: '../patients_list_json.php',
//url: 'http://192.168.0.1/docsinc/patients_list_json.php',
reader: {
root: 'physician_details',
totalProperty: 'physician_count'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'id',
direction: 'DESC'
}]
});

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

var filters = {
ftype: 'filters',
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)

filters: [{
type: 'string',
dataIndex: 'lname'
},
{
type: 'string',
dataIndex: 'fname'
}]
};


var pluginExpanded = true;


var selModel = Ext.create('Ext.selection.CheckboxModel', {

columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,


listeners: {

selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);

}
}
}


);

// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
loadMask: true,
features: [filters],
forceFit: true,
//selModel: selModel,
columns: [
{
dataIndex: 'npi_no',
text: 'NPI No',
sortable: false,
filterable: false,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
dataIndex: 'lname',
text: 'Last Name',
sortable: true,
filterable: true,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
dataIndex: 'fname',
text: 'First Name',
sortable: true,
filterable: true,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
dataIndex: 'speciality',
text: 'Speciality',
sortable: false
}, {
xtype: 'datecolumn',
dataIndex: 'added_date',
text: 'Date added',
sortable: false

}, {
dataIndex: 'diagnosis_template',
text: 'Diagnosis',
sortable: false
}, {
dataIndex: 'procedure_template',
text: 'Procedure',
sortable: false
},{
dataIndex: 'optional_template',
text: 'Optional',
sortable: false
},{
dataIndex: 'status',
text: 'Status',
sortable: false,
editor : {xtype:'combo',
store: new Ext.data.ArrayStore({
fields: ['abbr', 'status'],
data : [
['Active', 'Active'],
['Inactivate', 'Inactivate']
]
}),
displayField:'status',
valueField: 'abbr',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
emptyText: 'Select action'
}
}],
renderTo: 'providers-paging-grid',
layout: 'fit',
title: 'Providers',
frame: true,


plugins: [rowEditing],


// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying providers {0} - {1} of {2}',
emptyMsg: "No charges to display"
})
});
store.loadPage(1);
});


From the above code i got the update button and cancel button for every row in the Grid . By double tapping on every field of each row i am getting these Update and Cancel buttons.....But the problem is when i am clicking on Update button after changing any value of any field, it is not being changed into Database....So just after refreshing the page , i am getting old values...

I know there must be a way to save the changed records through ajax callback...But i do not know where to write it and on which event listener..Please guide me. Thanks in advance

ettavolt
17 Sep 2013, 7:35 AM
Try autoSync (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.AbstractStore-cfg-autoSync) config.