PDA

View Full Version : Reload grid after filters selected in window



mjhaston
15 Jun 2011, 10:37 AM
I'm sorry if this has been addressed more than a few times. I can't seem to find a good example.

I have a grid in the center region of my viewport. I pop open a window with a form that will submit my filters. Upon submit I close my window. I would like to update my grid with the new data based on those parms.

Am I going to have to do something with "baseParams"?

Thanks for any and all help!

FORM




var filtersForm = new Ext.FormPanel({
id : 'filters-form',
layout : 'form',
frame : true,
items : [{
xtype : 'textfield',
name : 'addr2',
id : 'addr2'
}, {
xtype : 'textfield',
fieldLabel : 'City, State Zip ',
name : 'city-state-zip',
id : 'city-state-zip'
}],
buttons : [{
text : 'Submit',
disabled : false,
handler : function() {
filtersForm.form.submit({
url : '/cgidev2p/submit0001.pgm',
waitMsg : 'Filters being applied ...',
success : function(form, action) {
message = '<span style="color:green;">Save successful!</span>';
Ext.getCmp('details-panel').body.update(message);
},
failure : function(form, action) {
message = '<span style="color:red;">Save failed!</span>';
Ext.getCmp('details-panel').body.update(message);
}
});
filtersWindow.hide();
}
}, {
text : 'Close',
handler : function() {
filtersWindow.hide();
}
}]
});




WINDOW




var filtersWindow = new Ext.Window({
layout : 'form',
frame : true,
title : 'Visitation Grid Filters',
closable : true,
closeAction : 'hide',
autoScroll : true,
width : 600,
height : 350,
padding : 10,
// html : '<h4>A form with filters would appear here ...</h4>'
defaultType : 'textfield',
items : [filtersForm]
});



STORE




var visitationStore = new Ext.data.JsonStore({
url : '/cgidev2p/jsonStr012.pgm',
storeId : 'visitationStore',
totalProperty : 'results',
autoLoad : true,
waitMsg : 'Loading ...',
root : 'data',
fields : [{
name : 'ssn'
}, {
name : 'name'
}, {
name : 'city'
}, {
name : 'st'
}, {
name : 'zip'
}, {
name : 'country'
}, {
name : 'ordain'
}, {
name : 'marital'
}, {
name : 'birth-date'
}, {
name : 'employer'
}],
listeners : {
beforeload : function(store, meta) {
// meta.params.recordID = 222222053;
}
}
});




GRID


var visitationGrid = new Ext.grid.GridPanel({
title : 'Visitation Report',
id : 'visitation-panel',
store : visitationStore,
// deferRowRender: true,
stripeRows : true,
loadMask : true,
// autoExpandColumn : true,
tbar : {
xtype : 'toolbar',
items : [{
xtype : 'button',
text : 'Change Filters',
iconCls : 'icon-user_add',
handler : function() {
filtersWindow.show();
}
}]
},
columns : [{

xtype : 'actioncolumn',
width : 50,
items : [{
icon : '../examples/shared/icons/fam/grid.png',
tooltip : 'View member details',
handler : function(grid, rowIndex, colIndex) {
var rec = visitationStore.getAt(rowIndex);
Ext.Msg.alert('Alert', 'Details for: '
+ rec.get('name'));
}
}, {
getClass : function(v, meta, rec) { // Or return a class
// from a function
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Do not buy!';
return 'alert-col';
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},
handler : function(grid, rowIndex, colIndex) {
var rec = visitationStore.getAt(rowIndex);
alert("Buy " + rec.get('name'));
}
}]
}, {
header : 'Name',
dataIndex : 'name',
width : 200,
sortable : true
}, {
header : 'City',
dataIndex : 'city',
width : 150,
sortable : true
}, {
header : 'State',
dataIndex : 'st',
width : 50,
sortable : true
}, {
header : 'Zip',
dataIndex : 'zip',
width : 50,
sortable : true
}, {
header : 'Country',
dataIndex : 'country',
sortable : true
}, {
header : 'Ordain',
dataIndex : 'ordain',
width : 50,
sortable : true
}, {
header : 'Marital Status',
dataIndex : 'marital',
width : 50,
sortable : true
}, {
header : 'Employer',
dataIndex : 'employer',
width : 60,
sortable : true
}, {
header : 'DOB',
dataIndex : 'birth-date',
width : 70,
sortable : true
}],
bbar : {
xtype : 'paging',
store : visitationStore,
autoScroll : true,
pageSize : 50,
displayInfo : true,
displayMsg : 'Displaying eligible visitation(s) {0} - {1} of {2}',
emptyMsg : "No eligible visitations found",
baseParams : {
start : 0,
limit : 50,
dummy : 'dummy1'
}

}
});

jarlau
16 Jun 2011, 1:25 AM
load your grid store with new params when submit the form.

something like:


{
text: 'Submit',
handler: function() {
visitationStore.load({params: {addr2: fm.findField('addr2').getValue()}});
}
}

mjhaston
16 Jun 2011, 5:05 AM
That's awesome. Thanks.