1. #1
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default Answered: How to open a link with as params all grid filters/sorters/groupers

    Answered: How to open a link with as params all grid filters/sorters/groupers


    I'm trying to open a link in a new page, but my basic problem is opening it using the same filters/sorters/groupers as the grid where the button is positioned to.

    Grid has "filters" property which contains used filters, however I can't find a groupers and sorters property.

    Also, those filters/groupers/sorters aren't placed on the store, so I can't fetch them.

    Any help appreciated.

  2. Ok this is how I solved this issue:

    Method on a custom grid panel class

    Code:
      /**
       * Create a query link for current grid that can be used for external linking
       * @param {String} format Takes an optional format to temporary override the proxy format for rest stores
       */
      getQueryLink: function(format) {
        var filters = [];
        var groupers, sorters;
    
        this.filters.filters.each(function(item) {
          if (item.active) {
            Ext.Array.forEach(item.serialize(), function(item) {
              filters.push(item);
            });
          }
        });
        this.store.getAllFilters().forEach(function(item) {
          filters.push(item);
        });
        groupers = Fdd.util.Object.getObjectGroupers(this.store.groupers);
        sorters = Fdd.util.Object.getObjectSorters(this.store.sorters);
    
        var shouldRestoreFormat = false;
        if (Ext.isDefined(this.store.getProxy().format) && Ext.isDefined(format)) {
          var lastStoreFormat          = this.store.getProxy().format;
          this.store.getProxy().format = format;
          shouldRestoreFormat          = true;
        }
    
        var operation = Ext.create('Ext.data.Operation', {
          action: 'read'
        });
        var request = this.store.getProxy().buildRequest(operation);
        var urlQuery = Ext.urlAppend(
          this.store.getProxy().buildUrl(request),
          Ext.Object.toQueryString({
            filter: Ext.JSON.encode(filters),
            group: Ext.JSON.encode(groupers),
            sort: Ext.JSON.encode(sorters)
          }, true)
        );
    
        if (shouldRestoreFormat)
          this.store.getProxy().format = lastStoreFormat;
    
        return urlQuery;
      }
    Method for the button

    Code:
        var excelPrint = Ext.create('Ext.Action', {
          cls: 'icon-excel',
          handler: function() {
            // FIXME: GetQueryLink do not add format when proxy is an ajax proxy
            var linkQuery = me.getQueryLink('xlsx');
            console.log(linkQuery);
            this.setHref(linkQuery);
            return true;
          },
          href: '/trips.xlsx'
        });
    setHref method for button

    Code:
    Ext.override(Ext.button.Button, {
      /**
       * Set the current href of the button, you'll need to reset params
       * @param {String} newHref Href that will be used (required)
       * @return {String} Returns newHref
       */
      setHref: function(newHref) {
        this.btnEl.set({
          href: newHref
        });
    
        return newHref;
      }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    Answers
    3574
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Taking a look at the sorters property of the store I see the mixed collection has items in it.

    Using the array grid example and click on the price column header I get this output:

    Screen Shot 2012-09-19 at 2.29.01 PM.png

    Maybe I'm not understanding?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Taking a look at the sorters property of the store I see the mixed collection has items in it.

    Using the array grid example and click on the price column header I get this output:

    Attachment 38799

    Maybe I'm not understanding?
    Sorry, I made this question some time ago and I solved by myself yesterday night, I'll post the answer in a while.

    However yes I found that the store has sorters/groupers, while the filters are stored on the grid.
    I built a method that allows me to create a query url with filter/group/sort as params and now it's working fine.

    I hoped for a standard method but it's ok in this way too.

  5. #4
    Sencha User Fire-Dragon-DoL's Avatar
    Join Date
    Dec 2011
    Posts
    141
    Vote Rating
    1
    Answers
    9
    Fire-Dragon-DoL is on a distinguished road

      0  

    Default


    Ok this is how I solved this issue:

    Method on a custom grid panel class

    Code:
      /**
       * Create a query link for current grid that can be used for external linking
       * @param {String} format Takes an optional format to temporary override the proxy format for rest stores
       */
      getQueryLink: function(format) {
        var filters = [];
        var groupers, sorters;
    
        this.filters.filters.each(function(item) {
          if (item.active) {
            Ext.Array.forEach(item.serialize(), function(item) {
              filters.push(item);
            });
          }
        });
        this.store.getAllFilters().forEach(function(item) {
          filters.push(item);
        });
        groupers = Fdd.util.Object.getObjectGroupers(this.store.groupers);
        sorters = Fdd.util.Object.getObjectSorters(this.store.sorters);
    
        var shouldRestoreFormat = false;
        if (Ext.isDefined(this.store.getProxy().format) && Ext.isDefined(format)) {
          var lastStoreFormat          = this.store.getProxy().format;
          this.store.getProxy().format = format;
          shouldRestoreFormat          = true;
        }
    
        var operation = Ext.create('Ext.data.Operation', {
          action: 'read'
        });
        var request = this.store.getProxy().buildRequest(operation);
        var urlQuery = Ext.urlAppend(
          this.store.getProxy().buildUrl(request),
          Ext.Object.toQueryString({
            filter: Ext.JSON.encode(filters),
            group: Ext.JSON.encode(groupers),
            sort: Ext.JSON.encode(sorters)
          }, true)
        );
    
        if (shouldRestoreFormat)
          this.store.getProxy().format = lastStoreFormat;
    
        return urlQuery;
      }
    Method for the button

    Code:
        var excelPrint = Ext.create('Ext.Action', {
          cls: 'icon-excel',
          handler: function() {
            // FIXME: GetQueryLink do not add format when proxy is an ajax proxy
            var linkQuery = me.getQueryLink('xlsx');
            console.log(linkQuery);
            this.setHref(linkQuery);
            return true;
          },
          href: '/trips.xlsx'
        });
    setHref method for button

    Code:
    Ext.override(Ext.button.Button, {
      /**
       * Set the current href of the button, you'll need to reset params
       * @param {String} newHref Href that will be used (required)
       * @return {String} Returns newHref
       */
      setHref: function(newHref) {
        this.btnEl.set({
          href: newHref
        });
    
        return newHref;
      }
    });

Thread Participants: 1

Tags for this Thread