Normally ExtJS 4 Data is sent in Url encoded format which in my web service code was not getting accepted. So I tried searching over the internet, but didn't got much help.
So I thought of writing of my own, following is the code which actually converts my required params and send it to webservice in JSON format in POST.
Normally based on your JSON data representation you can modify based on your need. in beforeload listeners in grid.
store.proxy.jsonData = { /*** Your JSON data here ***/};
//Source Code Attached
function renderMyGrid(){
Ext.define('SampleModel', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'location', 'description', 'owner'],
idProperty: 'id'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 20,
autoLoad: true,
model: ' SampleModel ',
remoteSort: true,
proxy: {
type: 'ajax',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
doRequest: function(operation, callback, scope) {
var writer = this.getWriter(),
request = this.buildRequest(operation, callback, scope);
if (operation.allowWrite()) {
request = writer.write(request);
}
Ext.apply(request, {
headers : this.headers,
timeout : this.timeout,
scope : this,
callback : this.createRequestCallback(request, operation, callback, scope),
method : this.getMethod(request),
jsonData : this.jsonData,
disableCaching: false // explicitly set it to false, ServerProxy handles caching
});
Ext.Ajax.request(request);
return request;
},
headers: ajaxCallHeader,
timeout: ajaxCallTimeout,
url: servicePath+'SampleService/loadGridData',
reader: {
root: 'data',
totalProperty: 'total'
},
writer: {
type: 'json',
encode: true
},
simpleSortMode: true
},
sorters: [{
property: 'name',
direction: 'ASC'
}],
listeners: {
beforeload: function(store, operation,eOpts) {
store.proxy.jsonData = {"pagination" : {"page":operation.page,
"limit":operation.limit,
"sort":operation.sorters[0].property,
"dir":operation.sorters[0].direction
},
"basicInfo" : {"ccoId":remoteUser,
"prefLang":"eng_US",
"requestStartDate":(new Date()).format("isoDateTime"),
"requesterApp":appName } };
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
region: 'center',
layout: 'fit',
id: objId,
store: store,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: true,
stripeRows: true
},
// grid columns
columns:[{
id: 'name',
text: "Name",
dataIndex: 'name',
sortable: true
},{
text: "Location",
dataIndex: 'location',
width: 200
},{
text: "Description",
dataIndex: 'descripion',
width: 200
}],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
});
grid.store.loadPage(1);
return grid;
}
Comments
Post a Comment