PDA

View Full Version : Help using a form to filter a grid. Mainly a form submit based question.



vibez
17 Aug 2007, 9:03 AM
OK quick rundown.

I have a form consisting of 5 comboboxes, I also have a grid. Now What I need to do is have a button on the form that collects the values from the 5 boxes and passes these values to the grid and reload it. So basiaclly these boxes are a filter.

Now I have the form working just fine and the same with grid. My main problem is the button which will pass the values from the boxes to the grid.


This sets up my form


var form_employee = new Ext.form.Form({
url:'combo.php?type=end',
labelAlign: 'left',
labelWidth: 50,
buttonAlign: 'left'
});

Here is my button that posts the values from the boxes to a url.


form_employee.addButton('Save', function(){

form_employee.submit({
params:{

},
waitMsg:'Loading...'
});

}, form_employee);

Here is another button that just alerts the values from the boxes


form_employee.addButton('Get Value', function() { alert(form_employee.getValues(true)); })

and here is my jsonstore for the grid


// create the Data Store
var ds = new Ext.data.Store({
// load data file
proxy: new Ext.data.HttpProxy({
url: 'grid_server.php?ac=showData'
}),

// let it know about the reader
reader: reader,
// turn on remote sorting
remoteSort: true
});
ds.setDefaultSort('Notification', 'asc');

So when I press the button it sends the data from my form correctly so the forms URL ( url:'combo.php?type=end',), or using the other buttom, it just pops up an altert box showing the selected values.

But what I need it to do is send the values to the grid and reload it ( I already have server side code in place in the grid ready to filter based on the forms values) Any ideas how I do this?

vibez
17 Aug 2007, 10:42 AM
Update

Now i'm using this as my button


form_employee.addButton('Get Value', function() {
ds.load({params:{
Division:combo.getValue(),
Area:combo2.getValue(),
Dept:combo3.getValue(),
CostCentre:multiselect.getValue(),
PlantRegister:multiselect2.getValue(),
PlantItem:multiselect3.getValue()
}});
})

This actually works fine, but is there a simpler way than manually defining ***.getValue for each form element? Surely the whole point of a form is that you can pass all the values with one call?

devnull
17 Aug 2007, 1:03 PM
you should be able to just pass it the result of the form's getValues() method:


form_employee.addButton('Get Value', function() {
ds.load({params:form_employee.getValues()});
})

nteknetium
17 Aug 2007, 1:43 PM
Maybe this tutorial help you...

http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list%2C_create%2C_edit%2C_delete_function

vibez
17 Aug 2007, 2:55 PM
you should be able to just pass it the result of the form's getValues() method:


form_employee.addButton('Get Value', function() {
ds.load({params:form_employee.getValues()});
})


Worked a treat thanks!

The only problem now is that I need these params to persist when I paginate through my results. I assume this requires editing to include baseParams somehow?

devnull
17 Aug 2007, 3:22 PM
you could use the store's beforeLoad event like I posted here: http://extjs.com/forum/showthread.php?t=11240&highlight=beforeload
except youll need to merge your params with the already existing ones. this may work:


options.params.push(form_employee.getValues())

but i havent tested it

vibez
17 Aug 2007, 11:57 PM
you could use the store's beforeLoad event like I posted here: http://extjs.com/forum/showthread.php?t=11240&highlight=beforeload
except youll need to merge your params with the already existing ones. this may work:


options.params.push(form_employee.getValues())

but i havent tested it

Getting closer :)


options.params.push(form_employee.getValues())

"options is not defined"

I did try adding beforeLoad to the footer like so


// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No information to display"
});

/************************************************************
* load parameter to backend
* have beforelaod function
************************************************************/
ds.on('beforeload', function() {
ds.baseParams = { // modify the baseParams setting for this request
filterValue: form_employee.getValues(true)
};
});
// trigger the data store load
ds.load({params:{start:0, limit:25}});
});

But this gives me a POST like so


dir ASC
filterValue Division=SCP&Area=STEEL&Dept=CONCAST&CostCentre=9140&PlantRegister=&PlantItem=
limit 25
sort Notification
start 25

where it has assigned my form values to the param 'filterValue' but I want my post to look like


Area STEEL
CostCentre 9140
Dept CONCAST
Division SCP
PlantItem
PlantRegister
dir ASC
sort Notification

where each form element is assigned its own parameter

Animal
18 Aug 2007, 1:37 AM
ds.on('beforeload', function() {
Ext.apply(ds.baseParams, Ext.urlDecode(form_employee.getValues(true));
});

vibez
18 Aug 2007, 2:33 AM
Perfect! :D:D:D

Thanks to everyone who helped out here. I think I have a good understanding of [base]params now =D>

Oh and if anyone else copies Animal's code, there is a tiny typo with a bracket missing near the end.

Correct code below


ds.on('beforeload', function() {
Ext.apply(ds.baseParams, Ext.urlDecode(form_employee.getValues(true)));
});