PDA

View Full Version : Filter is lost when the grid refreshes and the pagination is lost



Vmani
3 May 2012, 5:26 AM
I have a grid with a hyperlink in one of the column.The grid has a filter and pagination attached to it.
When I click on the link it opens a new page where you can update a row of the grid. This page has a button update when click on this it saves the value to the db and returns to the grid page.

I have a problem with the filter.When i filter the grid and click on the hyperlink(column)it opens up the othe screen .When click on the button 'Update' on the other screen it returns to the grid but the filter is lost.It displays all the data and not just the filtered one.How to set the filter again ?I want to display only the filtered data.Same is the case with pagination.

Please help.

Thanks In Advance,
Vmani

mitchellsimoens
7 May 2012, 6:50 AM
Do you leave the page and have are redirected back to it relaunching your app?

Vmani
7 May 2012, 7:22 AM
Hi,

Yes.I click on the link(hyper link column) it goes to a different page.This page is for editing some details listed in the grid .So after editing it i click on save it directs me to the grid.The thing is i use "window.location.href " for redirecting me to the grid page.So the filter is getting lost.I want to set the filter again with the user selected value before he navigates to the other page.Same applies to pagination.I don't know how to do this.



Thanks,
M.Vishwadharini

mitchellsimoens
7 May 2012, 12:31 PM
Of course the filters and everything is going to be lost. You can use state management which basically saves state of components in a cookie.

Vmani
7 May 2012, 12:40 PM
Thanks.I actually tried setting the sate but it of no use.May be i would have set wrongly.Is there any examples available for setting the state?

Thanks,
M.Vishwadharini

mitchellsimoens
7 May 2012, 12:50 PM
The array grid example uses state and if you use the filter feature I'm pretty sure it supports state.

Vmani
8 May 2012, 5:49 AM
Hi,

Thanks .The stateful didnt work.I have pasted my code below .Please let me know is this the way to do it.Is there a way to setFilter values in onload (something like grid.setFilter(value) this should select the check box of the filter and provide a filtered result.

Thanks,
Vmani

/*
This file is part of Ext JS 4
Copyright (c) 2011 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
*/
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'demandAnalysis/ext-4/examples/ux');
var itemsPerPage = 25;
Ext.require([
'Ext.selection.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
function oncheck(str) {
if (Ext.fly('box' + str).hasClass('checked')) {
Ext.fly('box' + str).removeClass('checked');
document.getElementById('check'+str).checked = false;
} else {
Ext.fly('box' + str).addClass('checked');
document.getElementById('check'+str).checked = true;
}
}
//
Ext.onReady(function(){
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ expires: new Date(new Date().getTime()+(1000*60*60*24*7))}));
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var indexVal1=new Array();
var ind;
var conIdForA;
var cId='';
var editRec='';
var divLink;
var filVal;
var jsonData='[';
function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
}
function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="javascript:void(0)" >{0}</a>',
value
);
}
function renderHtml(value, p, record) {
return Ext.String.format(
'<a href="/forecast/openContract.do?cNo={0}">{0}</a>',
value
);
}
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'contractId', type: 'int'},
{name: 'customer', type:'string'},
{name: 'status', type: 'string'},
{name: 'division', type: 'string'},
{name: 'title', type: 'string' },
{name: 'desc', type: 'string' },
{name: 'startDate', type: 'string' },
{name: 'endDate', type: 'date' },
{name: 'reminderDate', type: 'date' },
{name: 'alerts', type: 'string' },
{name: 'emailId', type: 'string' },
{name: 'attachments', type: 'string' },
],
proxy: {
type: 'ajax',
// load remote data using HTTP
url: '/forecast/contractsGrid.do',
pageSize:itemsPerPage,
reader: {
type: 'json',
root: 'contracts',
totalProperty: 'total'
}
},
sorters: [{
property: 'contractId',
direction:'ASC'
}],listeners: {
load: function(store) {
},beforeload:function(store){
}
}
});
var filters = {
ftype: 'filters',
id:'statusFilter',
filters: [
{
type: 'boolean',
dataIndex: 'status'
}
]
};
var filtersState ;
var grid = Ext.create('Ext.grid.Panel', {
store: store,
id:'grid',
cls:'x-grid-rowbody',
singleSelect:true,
stateId:'stateGrid',
stateful:true,
viewConfig: {
emptyText: 'No Records to display'
},
columns: [{
id: 'contractId',
header: 'Contract Id',
width:100,
height:20,
dataIndex: 'contractId',
renderer:renderHtml
},{
id: 'customer',
header: 'Customer',
dataIndex: 'customer',
width: 200,
height:20
},{
id: 'title',
header: 'Title',
width:300,
filterable: true,
dataIndex: 'title'//,
}, {
header: '<B>End Date</B>',
dataIndex: 'endDate',
height:30,
width: 150,
renderer: formatDate
},{
header: '<B>Reminder Date</B>',
dataIndex: 'reminderDate',
height:30,
width: 150,
renderer: formatDate//,
}, {
header: '<B>Status</B>',
dataIndex: 'status',
filter: {
type: 'list',
options: ['Active', 'Inactive']
//,phpMode: true
},
width: 150//,
}],
selModel: {
selType: 'cellmodel',
selModel:'single'
},
renderTo: 'editor-grid',
width: 1100,
height: 700,
// title: 'Edit Plants?',
frame: true,
tbar: [{
text: '<B>Exit </B>',
handler : function(){
document.forms[0].action="/forecast/mainMenu.do";
document.forms[0].submit();
}
},{
text: '<B>Add New Contracts</B>',
handler : function(){
window.location.href="/forecast/getContracts.jsp";
}
}], dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],features: [filters],
listeners:{select:function(cellModel,record,row,column,eOpts){
if(column==0){
filterState= grid.filters.saveState(grid, {}) ;
alert('grid.filters.getFilterData()'+grid.filters.getFilterData());
if(grid.filters.getFilterData()!=undefined && grid.filters.getFilterData().length>0){
window.location.href="/forecast/openContract.do?cNo="+record.get('contractId');//+"&filVal="+Ext.encode(grid.filters.getFilterData());
}else{
window.location.href="/forecast/openContract.do?cNo="+record.get('contractId');//+"&filVal="+"N";
}
}
},render:{fn:function(grid,eOpts) {
}}
}
});
var filtersState = grid.filters.saveState(grid, {});
store.load({
params:{
start:0,
limit: itemsPerPage,
filter:Ext.encode(grid.filters.getFilterData())//,
}
});
});
?