PDA

View Full Version : Date range ajax search form



qt4x11
12 Jan 2012, 9:44 AM
I've been going through the examples and I was not able to find anything close to what I'd like to do. I basically want to construct an ajax backend date range search form. I'd like a panel with a vbox layout, within the vbox layout there are two child panels - a north and a south panel. The north child panel should have a basic search form used to specify a date range with which to search, it should have two calendar selectors to select a start date and an end date, and a submit button. The north child panel should submit to a java servlet via ajax. Upon receipt of an ajax response from the java servlet - the south child panel should be populated with a grid that displays the ajax response from the servlet in grid format.


I'm familiar with basic form submission in extjs and using grid layout to display ajax data.
But I wasn't able to find anything that sort of ties these two things together. Can anyon
e suggest any tutorials, examples, or approaches I can use to construct my form?

friend
12 Jan 2012, 10:40 AM
The 'submit' of the start/end dates can be handled via the load() method of the Ext.data.Store which backs your grid, where the example below assumes that your Store/Model has been properly configured with a proxy/reader/url.

In the handler function of your button could call something like this:



// converts Date object value to a string of 'yyyy-mm-dd'.
var startDateString = Ext.util.Format.date(startDateField.getValue(), 'Y-m-d');
var endDateString = Ext.util.Format.date(endtDateField.getValue(), 'Y-m-d');

yourGrid.getStore().load({
params: {
startDate: startDateString,
endDate: endDateString
}
})

qt4x11
16 Jan 2012, 9:28 AM
*

qt4x11
16 Jan 2012, 2:29 PM
*