1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Vote Rating
    0
    Answers
    1
    qt4x11 is on a distinguished road

      0  

    Default Unanswered: Date range ajax search form

    Unanswered: Date range ajax search form


    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?

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    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:

    Code:
    // 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
      }
    })
    Last edited by friend; 12 Jan 2012 at 10:41 AM. Reason: spelling

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Vote Rating
    0
    Answers
    1
    qt4x11 is on a distinguished road

      0  

    Default


    *

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Vote Rating
    0
    Answers
    1
    qt4x11 is on a distinguished road

      0  

    Default


    *

Thread Participants: 1

Tags for this Thread