PDA

View Full Version : Sending JSON request - EXTJS4 MVC Infinite grid with remote filtering.



pnhegde
1 Nov 2012, 5:50 AM
Hello Forum members,

I have been exploring ExtJS4 MVC and trying to implement a infinite grid with remote filtering. I went through couple of examples (first example (http://docs.sencha.com/ext-js/4-1/#!/example/grid/infinite-scroll-with-filter.html) and second example (http://stackoverflow.com/questions/9156541/extjs-infinite-scroll-grid-with-remote-filters-and-sort)). I couldn't find searching component in the first example. Second example is great but I'm not able to understand it completely(I'm a beginner) as it's too advanced and it's non MVC. I couldn't figure out where to implement those overridden functions,which you can see in the 2nd example, in MVC architecture.

Here is what exactly I'm trying to do. I have a grid with fields like country,category etc. I have comboboxes in the toolbar using which one can select category name, country name etc. Whenever I click on filter button on the toolbar, after selecting values in combobox I have to send a query to the remote server. All my queries should go in JSON format (including page size and limit variables). I'm not able to figure out how to send everything in JSON format after button click. Right now my code looks like this.

Store.

Ext.define('MyProject.store.User', {
extend: 'Ext.data.Store',
model: 'MyProject.model.User',
buffered: true,
remoteSort: true,
pageSize: 200,
proxy: {
type: 'jsonp',
api: {
read: 'https://myserver.com/newServer.php?do=getUser'
},
simpleSortMode: true,
reader: {
root: 'data',
successProperty: 'success'
}
}
});




Controller:



Ext.define('MyProject.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['User'],
models: ['User'],
views: ['user.UserGrid'],


init: function() {
store = this.getUserStore();
store.load();
store.prefetch({
start: 0,
limit: 200,
callback: function() {
store.guaranteeRange(0, 99);
}
});
this.control({
'usergrid #filterButton': {
click: this.sendFilter
}
});
},
sendFilter: function(button) {
//How to send query strings in JSON format here?
}
});


UserGrid.js - View



Ext.define('MyProject.view.user.UserGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.usergrid',
id: 'userGrid',
loadMask: true,
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,


initComponent: function() {
this.store = 'User';
this.tbar = [{
xtype: 'box',
html: '<b>Filters</b>'
}, '-',
{
xtype: 'combobox',
name: 'categoryFilter',
store: ['Mobile', 'Tablet', 'Desktop'],

}, {
xtype: 'combobox',
name: 'countryFilter',
store: ['India', 'USA', 'UK', 'Japan']
}, {
xtype: 'button',
name: 'filterbutton',
id: 'filterButton'
},
];
this.columns = [{
text: " Domain ",
flex: 2,
dataIndex: 'domain',
sortable: true,
}, {
text: " Category ",
flex: 2,
dataIndex: 'category',
sortable: true
}, {
text: " country",
flex: 2,
dataIndex: 'country',
sortable: true
}];
this.viewConfig = {
forceFit: true,
trackOver: false,
singleSelect: true
};
this.features = {
ftype: 'filters',
updateBuffer: 1000
},


this.callParent(arguments);
},
});


This code works , but it's sending the page size and limit variables as GET. I want everything to be in JSON. How do I do that? Any help would be much appreciated.
Thanks a lot.

James Goddard
1 Nov 2012, 7:30 AM
Override buildRequest on your proxy:



buildRequest: function (operation) {
var me = this,
request = me.callParent (operation);

request.jsonData = request.params;
delete request.params;
return request;
}