1. #31
    Sencha User PulpMysteryFan's Avatar
    Join Date
    Aug 2008
    Posts
    94
    Vote Rating
    2
    PulpMysteryFan is on a distinguished road

      0  

    Default


    I'm using the extended RowExpander on a project. It's great. However, we tweaked it a little. I'm fairly clueless when it comes to Javascript (not to mention ExtJS), but the reader may still find this of interest.

    The problem was that we have pages with multiple RowExpanders (because there are multiple grids). But the id of the div being populated via getRemoteDataMethod() is not unique because it only looks at the row index. That meant only one "row 1" could be expanded, etc.

    There are two changes:

    1. We use a new "suffix" property to make the index unique. I tried to use "id", but when the calling routine tried to set "id" the expander didn't render. It wasn't worth figuring out, so I just added another property. Using "id" would be better.

    2. The remoteDataMethod signature is a little different because we changed it to pass the div element itself. That way the view doesn't need to know the secret name used for the div.

    Here's a snippet showing my changes:
    Code:
    getRemoteDataMethod : function (record, index, handle){
      if(!this.remoteDataMethod){  
        return;
      }
      return this.remoteDataMethod.call(this, record, index, Ext.get(this.getExpanderId(index)));
    },
    getExpanderId: function(index){
      // This is a customization.
      return "remData_ " + index + "_" + this.suffix;
    },
    beforeExpand : function(record, body, rowIndex){
      if(this.fireEvent('beforexpand', this, record, body, rowIndex) !== false){
        // If remoteDataMethod is defined then we'll need a div, with a unique ID,
        //  to place the content
        if(this.remoteDataMethod){
          //this.tpl = new Ext.Template("<div id='remData" + rowIndex + "' class='rem-data-expand'><\div>");
          this.tpl = new Ext.Template("<div id='" + this.getExpanderId(rowIndex) + "' class='rem-data-expand'><\div>");
        }
        if(this.tpl && this.lazyRender){
          body.innerHTML = this.getBodyContent(record, rowIndex);
        }
        return true;
      }else{
        return false;
      }
    },

  2. #32
    Sencha User
    Join Date
    May 2009
    Posts
    104
    Vote Rating
    0
    PV-Patrick is on a distinguished road

      0  

    Default


    Quote Originally Posted by ethraza View Post
    This post has helped me a lot, so I coming back to give my contribution......
    I am trying to get this working via your method ethraza, however I cannot get anything to show up in the expander TPL. I modified yours slightly to include additional parameters to pass to the store load, however that should not effect anything that I am aware of. The store loads fine and I get the correct JSON response. I even have a simple TPL that just has "Hi" in it. Any suggestions on what might be the problem? It just gets stuck with the Loading... icon inside the row.

  3. #33
    Ext User jjulian's Avatar
    Join Date
    Jul 2009
    Posts
    36
    Vote Rating
    0
    jjulian is on a distinguished road

      0  

    Default


    I also had a requirement on a project to show panels within a RowExpander. I used wolf's version of the class from this thread (THANKS!), but I found that the expanded panel's layout was not correct. I tried BorderLayout, ColumnLayout, but they all were overlapping items. I solved it by calling renderTo OUTSIDE the config with a bit of a delay on it (100ms).

    I've added a few other minor tweaks to it, such as passing on resize events from the grid, and destroying all saved panels on store load.

    You can find the code in my ext-extensions project on github. I named it PanelRowExpander.

    http://github.com/jjulian/ext-extensions/tree/master

  4. #34
    Sencha User
    Join Date
    Nov 2011
    Location
    Burlington, NC
    Posts
    9
    Vote Rating
    1
    cmadison0005 is on a distinguished road

      0  

    Default Id this thread still active? (Row Expander extension question)

    Id this thread still active? (Row Expander extension question)


    Hi all, i had a question regarding the plugin above in the context of the ExtJS MVC acrhitecture. I want the rowExpander to inject a grid panel, as opposed to just changing the styling and using content from the current row. I found an extension (AjaxRowExpander) http://blog.tremend.ro/2008/04/22/ex...ow-expander-2/ which i am unable to integrate.

    The examples i have found tend to create then entirety of the app within a single .js file, as opposed to the MVC type setup. My question is, how can i use the row expander to insert a container or panel of some sort such that i can place within it any component i desire?

    I cannot seem to port over the plugins which are written in single pieces of script as i continually get errors telling me that Ext.grid is undefined. This is odd bc the first line of app.js is:
    Code:
    Ext.require(['ux.grid.RowExpander', 'ux.grid.AjaxRowExpander']);
    subsequently, the require in rowExpander.js is:
    Code:
    requires: ['Ext.grid.feature.RowBody','Ext.grid.feature.RowWrap']
    SO i think fundamentally im trying to recreate the plugin using Ext.define as opposed to containing it within a single app.js file.

    Thanks for any advice!

  5. #35
    Sencha User
    Join Date
    Nov 2007
    Posts
    16
    Vote Rating
    0
    eyp is on a distinguished road

      0  

    Default


    Hi, I'm trying to migrate from ExtJs 2.3 to 3.4 (I've thought it'll be easier than trying to migrate directly to 4.0.7).

    In my app I was using this plugin, is it available for ExtJs 3?, is there another alternative?
    / Eduardo YaƱez Parareda /