PDA

View Full Version : GriidPanel with filterig and paging



svermaw1
28 May 2013, 6:13 AM
Hello,
I am using ExtJs 4.2
I am trying to filter the json store in grid panel, but it filters the data per page , not the whole store.
Please check the below code,
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../../scripts/ext-4.2.0/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.ajax.JsonSimlet',
'Ext.ux.ajax.SimManager'
]);

Ext.onReady(function() {


Ext.QuickTips.init();


var xmlhttp = new getXMLObject();

function getXMLObject() // XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

function validateForm(prcId, hNo, hName, hcpNo, asgnmntNo, ppendDate) {
var flag = true;
var count = 0;
var vals = new Array(prcId, hNo, hName, hcpNo, asgnmntNo, ppendDate);
for ( var i = 0; i < vals.length; i++) {
if (vals[i] == "" || vals[i] == null) {
++count;
}
}
if (count > 6) {// 4
flag = false;
}
return flag;
}

var searchTimeCard = function(btn) {

var prcId = timeCardSeachForm.getForm().findField('prcid').getValue();
var hNo = timeCardSeachForm.getForm().findField('h_no').getValue();
var hName = timeCardSeachForm.getForm().findField('h_name').getValue();
var hcpNo = timeCardSeachForm.getForm().findField('hcp_no').getValue();
var asgnmntNo = timeCardSeachForm.getForm().findField('a_no')
.getValue();
var ppendDate = timeCardSeachForm.getForm().findField('ppend_date')
.getValue();
if (validateForm(prcId, hNo, hName, hcpNo, asgnmntNo, ppendDate)) {

if (Ext.getCmp('search-result-window')) {
Ext.getCmp('search-result-window').close();
}
loadGridData(prcId, hNo, hName, hcpNo, asgnmntNo, ppendDate);
} else {
Ext.MessageBox.alert('Alert',
'Provide atleast two search criteria.');
}
}

var local = true;

var resetForm = function(btn) {
alert('Alert Reset.');
timeCardSeachForm.getForm().reset();
if (Ext.getCmp('search-result-window')) {
Ext.getCmp('search-result-window').close();
}
}

var timeCardSeachForm = new Ext.FormPanel({

frame : true,
id:'search-panel-window',
renderTo : 'search-panel',
title : 'Timecard Search Parameters',
bodyStyle : 'padding:5px 5px 0',
width : 600,
defaults : {
width : 400
},
renderTo : 'search-panel',
defaultType : 'textfield',
items : [ {
fieldLabel : 'Payroll Coordinatior Id',
name : 'prcid',
labelWidth : 150,
labelAlign:'right'
}, {
fieldLabel : 'Hospital Number',
name : 'h_no',
labelWidth : 150,
labelAlign:'right'
}, {
fieldLabel : 'Hospital Name',
name : 'h_name',
labelWidth : 150,
labelAlign:'right'
}, {
fieldLabel : 'HCP Number',
name : 'hcp_no',
labelWidth : 150,
labelAlign:'right'
}, {
fieldLabel : 'Assignment Number',
name : 'a_no',
labelWidth : 150,
labelAlign:'right'
}, {
xtype : 'datefield',
fieldLabel : 'Pay Period End Date',
name : 'ppend_date',
labelWidth : 150,
labelAlign:'right'
} ],

buttons : [ {
text : 'Search',
handler : searchTimeCard
}, {
text : 'Reset dfgdfgfdg',
handler : resetForm
} ]
});



function loadGridData(prcId, hNo, hName, hcpNo, asgnmntNo, ppendDate) {

if (xmlhttp) {

var requestJSON = "{\"prcId\":\"lnegules\",\"hospitalNo\":\""
+ hNo + "\",\"hospitalName\":\"" + hName
+ "\",\"hcpNo\":\"" + hcpNo + "\",\"assignmentNo\":\""
+ asgnmntNo + "\",\"ppendDate\":\"" + ppendDate + "\"}";

var url = "/alfresco/service/ui/timecardsearch?requestJSON="
+ requestJSON;

xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xmlhttp.send("requestJSON=" + requestJSON);
}
}

function handleServerResponse() {

if (xmlhttp.readyState == 4) {

if (xmlhttp.status == 200) {
var responseJSON = xmlhttp.responseText;
var myData = JSON.parse(responseJSON);

alert('Alert Inside myData .' + myData );
loadGridFilter(myData);

} else {
alert("Error during AJAX call. Please try again");
}
}
}

function loadGridFilter(myData) {
var dataStore = Ext.create('Ext.data.JsonStore', {
remoteFilter: false,
autoLoad: true,
proxy: new Ext.ux.data.PagingMemoryProxy(myData),
pageSize: 3,

fields : [ {
name : 'id'
}, {
name : 'node_url'
}, {
name : 'hospital_no'
}, {
name : 'hospital_name'
}, {
name : 'hcp_no'
}, {
name : 'pp_end_date',
type : 'string'
}, {
name : 'prc_id'
}, {
name : 'assignment_id'
} ]
});


var filters = {
ftype: 'filters',
local : local,
filters : [ {
type : 'string',
dataIndex : 'hospital_no'
}, {
type : 'string',
dataIndex : 'hospital_name',
disabled : true
}, {
type : 'string',
dataIndex : 'hcp_no'
}, {
type : 'string',
dataIndex : 'pp_end_date'
}, {
type : 'string',
dataIndex : 'prc_id'
}, {
type : 'string',
dataIndex : 'assignment_id'
} ]
};


var grid = new Ext.grid.Panel({
id : 'grid-panel',
border : false,
store : dataStore,
columns: [
{width: 200, dataIndex:'node_url', renderer : function(val) {return val;}},
{id:'id',text: "Hospital Number", width: 100, sortable: true, dataIndex: 'hospital_no'},
{text: "Hospital Name", width: 150, sortable: true, dataIndex: 'hospital_name'},
{text: "HCP Id", width: 100, sortable: true, dataIndex: 'hcp_no'},
{text: "PRC Id", width: 100, sortable: true, dataIndex: 'prc_id'},
{text: "PP End Date", width: 150, sortable: true, dataIndex: 'pp_end_date'},
{text: "Assignment Number", width: 200, sortable: true, dataIndex: 'assignment_id'}
],

loadMask : true,
features : [ filters ],
mode:'local',
autoExpandColumn : 'hospital_name',
height : 350,
width : 1000,
viewConfig : {
forceFit : true
},
frame:true,

bbar : new Ext.PagingToolbar({
store : dataStore,
pageSize : 3
})

});

var win = new Ext.Window({
id : 'search-result-window',
title : 'Search Results',
height : 400,
width : 1000,
layout : 'fit',
renderTo : 'search-result',
items : grid,

}).show();
dataStore.load();

}
});


Please help, as it is very urgent.

Thanks and Regards,
Supriya Verma,
Module Lead,
Cross Country InfoTech Ltd.

slemmon
30 May 2013, 9:24 AM
When you set remoteFilter: true (the right thing to do with paging unless you're using a paged memory store) you're saying that your server will determine how to filter the records and return them filtered by page. ExtJS will just send the filter propert / direction up in the data request to your server and await the data returned. Each time you page forward / back it will send up the filters currently associated with the store. Like:
filter:
[{"property":"foo","value":"bar"}]

svermaw1
5 Jun 2013, 9:51 PM
Hi,

Thanks for replying,

Well what i want to know. is.. can we do filtering and paging simultaneously on complete store.
If yes, please let me know , how it can be done.
I am using pagingmemoryproxy for pagination , is it correct to use that , or any other proxy is required for achieving filtering n paging.

slemmon
6 Jun 2013, 2:37 PM
In 4.2 and 4.2.1 you don't need to use the plugin you can just do enablePaging on your memory proxy.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.proxy.Memory-cfg-enablePaging

I haven't tested it, but I suspect with that you can filter locally and have your paging, too.

If you're ever using an AJAX/REST proxy you'll need to do remote filtering to get filtering + paging in the same grid/tree.