Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / examples / ux / RowExpander.js

diff --git a/examples/ux/RowExpander.js b/examples/ux/RowExpander.js
index 9e50b28..8ffd904 100644 (file)
--- a/examples/ux/RowExpander.js
+++ b/examples/ux/RowExpander.js
@@ -27,6 +27,12 @@ If you are unsure which license is appropriate for your use, please contact the
  */
 Ext.define('Ext.ux.RowExpander', {
     extend: 'Ext.AbstractPlugin',
+
+    requires: [
+        'Ext.grid.feature.RowBody',
+        'Ext.grid.feature.RowWrap'
+    ],
+
     alias: 'plugin.rowexpander',
 
     rowBodyTpl: null,
@@ -112,8 +118,17 @@ Ext.define('Ext.ux.RowExpander', {
             grid.features = features;
         }
 
-        grid.columns.unshift(this.getHeaderConfig());
-        grid.on('afterlayout', this.onGridAfterLayout, this, {single: true});
+        // NOTE: features have to be added before init (before Table.initComponent)
+    },
+
+    init: function(grid) {
+        this.callParent(arguments);
+
+        // Columns have to be added in init (after columns has been used to create the
+        // headerCt). Otherwise, shared column configs get corrupted, e.g., if put in the
+        // prototype.
+        grid.headerCt.insert(0, this.getHeaderConfig());
+        grid.on('render', this.bindView, this, {single: true});
     },
 
     getHeaderId: function() {
@@ -137,16 +152,14 @@ Ext.define('Ext.ux.RowExpander', {
         return o;
     },
 
-    onGridAfterLayout: function() {
-        var grid = this.getCmp(),
-            view, viewEl;
+    bindView: function() {
+        var view = this.getCmp().getView(),
+            viewEl;
 
-        if (!grid.hasView) {
-            this.getCmp().on('afterlayout', this.onGridAfterLayout, this, {single: true});
+        if (!view.rendered) {
+            view.on('render', this.bindView, this, {single: true});
         } else {
-            view = grid.down('gridview');
             viewEl = view.getEl();
-
             if (this.expandOnEnter) {
                 this.keyNav = Ext.create('Ext.KeyNav', viewEl, {
                     'enter' : this.onEnter,
@@ -179,7 +192,8 @@ Ext.define('Ext.ux.RowExpander', {
         var rowNode = this.view.getNode(rowIdx),
             row = Ext.get(rowNode),
             nextBd = Ext.get(row).down(this.rowBodyTrSelector),
-            record = this.view.getRecord(rowNode);
+            record = this.view.getRecord(rowNode),
+            grid = this.getCmp();
 
         if (row.hasCls(this.rowCollapsedCls)) {
             row.removeCls(this.rowCollapsedCls);
@@ -192,6 +206,12 @@ Ext.define('Ext.ux.RowExpander', {
             this.recordsExpanded[record.internalId] = false;
             this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
         }
+
+
+        // If Grid is auto-heighting itself, then perform a component layhout to accommodate the new height
+        if (!grid.isFixedHeight()) {
+            grid.doComponentLayout();
+        }
         this.view.up('gridpanel').invalidateScroller();
     },
 
@@ -209,7 +229,7 @@ Ext.define('Ext.ux.RowExpander', {
             id: this.getHeaderId(),
             width: 24,
             sortable: false,
-            fixed: true,
+            resizable: false,
             draggable: false,
             hideable: false,
             menuDisabled: true,