Custom grid rendering in SMVC extjs4

[rpoddar]

For our application we came up custom grid component by extending Ext.grid.Panel
But while using custom grid in MVC rendering sequence got changed.
Because of this expand and collapse row is throwing "nextBd is null" error


Rendering sequence using custom grid :

1. custom grid
2. plugins
3. view port

Correct rendering sequence should be

1.view port
2.plugin
3. custom grid

Any idea for rendering the correct sequence .

---------------------------Custom grid------------------------------
Ext.require([
    'Ext.grid.*'
]);
Ext.define('Custom.WrapperGridPanel', {
       extend          :'Ext.grid.Panel',
      border: true,
       
      
        initComponent: function() {
        	   
	       	var config = {
	       	};
	       	alert('xx1');
	       this.buildConfig(config);
	       Ext.apply(this, Ext.apply(this.initialConfig, config));
	
	       var me = this;
		   me.callParent(arguments);
       },
        
       buildConfig: function(config) {
    	   alert('xx');
           	this.buildSelType(config);
       		this.buildStore(config);
       		this.buildViewConfig(config);
       		this.buildColumns(config);
       		this.buildPlugins(config);
       		this.buildFeatures(config);
       		this.buildTbar(config);
       		this.buildBbar(config);
       },
       buildPlugins : function(config) {
    	       
       },more code for custom grid 
---------------------------Custom grid------------------------------

----------------------------Main grid  using custom grid ---------------------


Ext.require([
         	
         	'TPApp.store.AttributeStore',
         	'TPApp.store.TPStore'
         	
         	
         ]);


Ext.define('TPApp.view.MainGrid', {
             extend   : 'Custom.WrapperGridPanel',
             alias    : 'widget.MainGrid',
             stores   : ['TPStore','AttributeStore','WeightStore'],
             id:'mainGrid',
             autoWidth:true,
             autoScroll:true,
             renderTo : Ext.getBody(),
             initComponent: function() {
             	console.log("MainGrid initComponent called.");
                 var me = this;
                
               // nested grid start //
                me.callParent(arguments);


                 me.getView().on('expandbody', function(node, record, eNode) {
         	var element = Ext.get(eNode).down('.ux-row-expander-box');
         	 // alter the fields (swap the model data index with the child data index)
                     var attributeType = record.get("name");
                     alert("attributeType"+attributeType);
                    var grid ='';
                   if(attributeType === "Severity") {
                   } else if (attributeType === "Src IP") {
                  } else {
                      Ext.Msg.alert('please select the attribute type !');
         			  return 
                   }
                     Ext.apply(grid, me.expandable);
                     grid.on('itemclick', function(view) {
                         me.getView().getSelectionModel().deselectAll();
                     });
                     
                     element.swallowEvent(['click', 'mousedown', 'mouseup', 'dblclick'], true);
                     grid.render(element);
                 });
                 me.getView().on('collapsebody', function(node, record, eNode) {
                     Ext.get(eNode).down('.ux-row-expander-box').down('div').destroy();
                 });
                 
                 // nested grid end //
             },buildPlugins : function(config) {
          	   config.plugins = [
         	           {
         			       ptype: 'RowExpander',
         			        rowBodyTpl: ['<div class="ux-row-expander-box"></div>'],
         			        expandOnRender: true,
         			        expandOnDblClick: false
                        },
                        
	                        Ext.create('Ext.grid.plugin.CellEditing', {
	                             clicksToEdit: 1,
	         			        listeners: {
	         					    edit: function(){
	         						   // refresh summaries
	         					      
	         						   Ext.getCmp('mainGrid').getView().refresh();
	         					    }
	         			        } 
	                       })
                       
                       
          	   ]
             }, // more code for main grid 

----------------------------Main grid using custom grid ---------------------

[mitchellsimoens]

Is it only because of the plugin?

[rpoddar]

we don`t know the issue is with plugin or WrapperGridPanel


But we are suspecting WrapperGridPanel is the culprit,because if we use Ext.grid.panel rendering happening correctly.

we extended Ext.grid.Panel to WrapperGridPanel (see the below code )


Question is :


1. WrapperGridPanel is the correct way are not ( please see the below code ) Does MVC supports
extended grid ?


can u please give sample example of extending the grid with overriding options like
below WrapperGridPanel


Thx
Vin

[rpoddar]

Yes the problem is with row expander plugin , we extended Ext.grid.Panel to WrapperGridPanel

and started using WrapperGridPanel as super class , but row expander plugin throws

nextBd is null
https://localhost/js/extJS/ux/RowExpander.js
Line 205

you can find the code in below mail thread .

Thx
Vin