Extending the RowExpander Plugin

Hi,

I refered the above sample and I implemented the sample nested grid using GridPanel 2.2. It is not expand the child grid. I got error from firebox during the childGrid = function(record, index) execution time.The error message is Ext={version:"2.2"};window["undefined"]=window["undefined"];Ext.apply=function(C,D,B{if({Ext.apply(C,B}if(C&&D&&typeof D=="object"){for(var A in D){C[A]=D[A]}}return C};(function(){var idSeed=0;var ua=navigator.userAgent.toLowerCase();

I have included the my sample code.

Code:

---

Ext.onReady(function() {
    var xg = Ext.grid;
    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
        { name: 'id' },
        { name: 'type' },
    ]);
    var dataType = [
        [10, 'Published'],
        [11, 'UnPublished']]

    // row expander
    var expander = new Ext.grid.RowExpander({
        remoteDataMethod:childGrid ,
        tpl: new Ext.Template('<div id="subRemData"></div>')
    });
    var masterGrid = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: dataType
        }),
        cm: new xg.ColumnModel([
            expander,
            { header: "Type", width: 200, sortable: true, dataIndex: 'type' }
        ]),
        viewConfig: {
            forceFit: true
        },
        autoHeight: true,
        hideHeaders: false,
        width: 800,
        height: 800,
        plugins: expander,
        collapsible: true,
        animCollapse: false,
        disableSelection: true,
        trackMouseOver: false,
        enableHdMenu: false,
        renderTo: document.getElementById('Div1')
    });

    // Child grid

    var dataPGName = [
        [10, 10, 'Retail Food'],
        [11, 11, 'Chemical']]

    var childGrid = function(record, index) {
        var id = record.get("code");
        var xg = Ext.grid;
        var detailedreader = new Ext.data.ArrayReader({}, [
            { name: 'id' },
            { name: 'code' },
            { name: 'name' },
        ]);
        var detailedstore = new Ext.data.Store({
            reader: detailedreader,
            data: dataPGName
        });
        var detailedgrid = new xg.GridPanel({
            store: detailedstore,
            cm: new xg.ColumnModel([
                { header: 'PG ID ', width: 50, sortable: true, dataIndex: 'code' },
                { header: 'PG Name', width: 120, sortable: true, dataIndex: 'name' }
            ]),
            autoHeight: true,
            collapsible: false,
            disableSelection: true,
            trackMouseOver: false,
            autoSizeColumns: true
        });
        detailedgrid.render(Ext.get('remData' + record.data.id));
    };
})

---

Please help me anyone how to rectify that issues.

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;
  }
},

---

Quote:

---

Originally Posted by ethraza

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.

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

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!

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?