We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 9207 ☆ A M B ☆
    • 2,475 Posts
    I thought I had figured this out... then Ext JS called to remind me that I had been out of my handcuffs too long.

    I need to paginate search results and flip through the records that matched my search, e.g. a list of all pages by a certain author. The first search works fine: I get a list of records matching my search. But when I click the "next page" link, I lose my filter field: the author dropdown resets to null, so I once again get *all* results instead of page 2 of my subset.

    It's a chicken-and-egg scenario: from what I understand, I need to pass the field values when I define the data store, but the fields reference the store in their definition. So there's no clear-cut way for one to reference other. There are no clear-cut examples in the MODX manager because of the whacko customizations of an already poorly-documented JS framework. It feels less like doing development and more like I'm doing my taxes...

    This thread is as close as I've found:
    http://www.sencha.com/forum/showthread.php?82135-Get-form-field-by-name

    Here's the overview of what I'm doing in my CMP:

    1. Define my data store
    2. Define and render the grid panel with a pagination toolbar using the store
    3. Define the form panel with my filter fields (e.g. author)

    I'm seriously losing my mind with this stuff... the Ext JS "docs" contain practically no real-world examples (e.g. the paging examples never feature search filters http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/paging.html). Even if the devs knew the difference between API docstrings and real documentation, the framework itself is nearly impossible to document because there are a million ways to do any single task.

    Anyone got a clear example of how this is supposed to work?
      • 3749
      • 24,544 Posts
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 9207 ☆ A M B ☆
        • 2,475 Posts
        I just tried it, but it doesn't address the problem: clicking on pagination links sends only the start/limit/sort/dir parameters but nothing else is posted to the data store. This looks more promising: http://stackoverflow.com/questions/4305187/extjs-custom-paging-parameters

        But it doesn't demonstrate how to read *dynamic* values. It's maddening that there are no complete examples to be found.
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          Hmmm... now as I recall, I did exactly this many years ago, involving returning data belonging to a given user, the username being taken from the page's login/logout bar. There was also a search field involved. Let me dig and see if I can't find that and see what I did.

          Take a look at the "Fetching the Data" part of this article http://sottwell.pogwatch.com/datagrid-2.html, as well as the "building the query" part to this http://sottwell.pogwatch.com/datagrid-3.html

          The php here was not done in xPDO, but it should be portable as such.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 4172
            • 5,888 Posts
            basically, you just need to change the store's baseParams in your filter-function

            code-snippet from MIGXdb - filter
            https://github.com/Bruno17/MIGX/blob/master/core/components/migx/configs/grid/grid.config.inc.php#L552
            var s = this.getStore();
            s.baseParams.[[+name]] = tf.getValue();
            this.getBottomToolbar().changePage(1);
            this.refresh();
              -------------------------------

              you can buy me a beer, if you like MIGX

              http://webcmsolutions.de/migx.html

              Thanks!
              • 9207 ☆ A M B ☆
              • 2,475 Posts
              Thanks for the responses. Bruno, I finally got something to work based on your input: THANK YOU. What a brutal framework though. I think I'd rather do taxes... I can't believe there are virtually no examples of this stuff in the official Ext JS documentation, and honestly, Bruno, I am literally amazed at how much you've been able to do with this given the lack of decent docs.

              Here's the "condensed" (hahaha) what I came up with for my CMP:

              <script>
              // Persist the filter value between page changes
              function filterWriter(tf,nv,ov) {
                  var grid = Ext.getCmp('articlesGrid');
                  var store = grid.getStore();
                  store.baseParams.createdby = tf.getValue();
              }
              
              Ext.onReady(function(){
                  // create the Data Store
                  var store = new Ext.data.JsonStore({
                      // ... stuff here bla bla etc... 
                      proxy: new Ext.data.HttpProxy({
                          url: '{$url}' // <--- my special PHP p
                      })
                  });
              
                  var grid = new Ext.grid.GridPanel({
                      store: store,
              
                      //... other stuff here
              
                      // paging bar on the bottom
                      bbar: new Ext.PagingToolbar({
                          // xtype: 'paging', // assumed
                          pageSize: 25,
                          store: store,
                          displayInfo: true,
                          displayMsg: 'Displaying Records {0} - {1} of {2}',
                          emptyMsg: 'No Records to display'
                      })
                  });
                  // render it
                  grid.render('articles-grid');
              
                  // trigger the data store load with starting values
                  store.load({params:{start:0, limit:25}});
              
              // Then a bit later...
              
              Ext.onReady(function(){
                  Ext.QuickTips.init();
              
                  // My various filter controls:
                  var fpItems = [
                      {
                          xtype : 'combo',
                          fieldLabel : 'Writer',
                          forceSelection : true,
                          displayField : 'name',
                          valueField : 'id',
                          hiddenName : 'createdby',
                          allowBlank : true,
                          typeAhead : true,
                          loadingText : 'Loading...',
                          minChars : 1,
                          triggerAction : 'all',
                          store : UserStore,
                          listeners: {
                              'change': {fn:this.filterWriter,scope:this}  // <-- persist the value!
                          }
                      }];
              
                  var formPanel = new Ext.form.FormPanel({
                      id : 'articlesFormPanel',
                      renderTo : 'articles-searchform', 
                      // ... etc...
                      items : fpItems
                  }); 
              });
              </script>
              <h2>Article Finder</h2>
              <div id="articles-searchform"></div>
              <div id="articles-grid"></div>';