Date range ajax search form

[qt4x11]

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]

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]

*

[qt4x11]

*