X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..6a7e4474cba9d8be4b2ec445e10f1691f7277c50:/examples/ux/RowExpander.js

diff --git a/examples/ux/RowExpander.js b/examples/ux/RowExpander.js
index 377089cc..34bdd79e 100644
--- a/examples/ux/RowExpander.js
+++ b/examples/ux/RowExpander.js
@@ -1,231 +1,241 @@
 /*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-Ext.ns('Ext.ux.grid');
-
-/**
- * @class Ext.ux.grid.RowExpander
- * @extends Ext.util.Observable
- * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
- * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
- * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
- *
- * @ptype rowexpander
- */
-Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
-    /**
-     * @cfg {Boolean} expandOnEnter
-     * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
-     * key is pressed (defaults to <tt>true</tt>).
-     */
-    expandOnEnter : true,
-    /**
-     * @cfg {Boolean} expandOnDblClick
-     * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
-     * (defaults to <tt>true</tt>).
-     */
-    expandOnDblClick : true,
-
-    header : '',
-    width : 20,
-    sortable : false,
-    fixed : true,
-    menuDisabled : true,
-    dataIndex : '',
-    id : 'expander',
-    lazyRender : true,
-    enableCaching : true,
-
-    constructor: function(config){
-        Ext.apply(this, config);
-
-        this.addEvents({
-            /**
-             * @event beforeexpand
-             * Fires before the row expands. Have the listener return false to prevent the row from expanding.
-             * @param {Object} this RowExpander object.
-             * @param {Object} Ext.data.Record Record for the selected row.
-             * @param {Object} body body element for the secondary row.
-             * @param {Number} rowIndex The current row index.
-             */
-            beforeexpand: true,
-            /**
-             * @event expand
-             * Fires after the row expands.
-             * @param {Object} this RowExpander object.
-             * @param {Object} Ext.data.Record Record for the selected row.
-             * @param {Object} body body element for the secondary row.
-             * @param {Number} rowIndex The current row index.
-             */
-            expand: true,
-            /**
-             * @event beforecollapse
-             * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
-             * @param {Object} this RowExpander object.
-             * @param {Object} Ext.data.Record Record for the selected row.
-             * @param {Object} body body element for the secondary row.
-             * @param {Number} rowIndex The current row index.
-             */
-            beforecollapse: true,
-            /**
-             * @event collapse
-             * Fires after the row collapses.
-             * @param {Object} this RowExpander object.
-             * @param {Object} Ext.data.Record Record for the selected row.
-             * @param {Object} body body element for the secondary row.
-             * @param {Number} rowIndex The current row index.
-             */
-            collapse: true
-        });
-
-        Ext.ux.grid.RowExpander.superclass.constructor.call(this);
-
-        if(this.tpl){
-            if(typeof this.tpl == 'string'){
-                this.tpl = new Ext.Template(this.tpl);
-            }
-            this.tpl.compile();
-        }
-
-        this.state = {};
-        this.bodyContent = {};
-    },
-
-    getRowClass : function(record, rowIndex, p, ds){
-        p.cols = p.cols-1;
-        var content = this.bodyContent[record.id];
-        if(!content && !this.lazyRender){
-            content = this.getBodyContent(record, rowIndex);
-        }
-        if(content){
-            p.body = content;
-        }
-        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
-    },
-
-    init : function(grid){
-        this.grid = grid;
-
-        var view = grid.getView();
-        view.getRowClass = this.getRowClass.createDelegate(this);
-
-        view.enableRowBody = true;
-
-
-        grid.on('render', this.onRender, this);
-        grid.on('destroy', this.onDestroy, this);
-    },
-
-    // @private
-    onRender: function() {
-        var grid = this.grid;
-        var mainBody = grid.getView().mainBody;
-        mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
-        if (this.expandOnEnter) {
-            this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
-                'enter' : this.onEnter,
-                scope: this
-            });
-        }
-        if (this.expandOnDblClick) {
-            grid.on('rowdblclick', this.onRowDblClick, this);
-        }
-    },
-    
-    // @private    
-    onDestroy: function() {
-        this.keyNav.disable();
-        delete this.keyNav;
-        var mainBody = this.grid.getView().mainBody;
-        mainBody.un('mousedown', this.onMouseDown, this);
-    },
-    // @private
-    onRowDblClick: function(grid, rowIdx, e) {
-        this.toggleRow(rowIdx);
-    },
-
-    onEnter: function(e) {
-        var g = this.grid;
-        var sm = g.getSelectionModel();
-        var sels = sm.getSelections();
-        for (var i = 0, len = sels.length; i < len; i++) {
-            var rowIdx = g.getStore().indexOf(sels[i]);
-            this.toggleRow(rowIdx);
-        }
-    },
-
-    getBodyContent : function(record, index){
-        if(!this.enableCaching){
-            return this.tpl.apply(record.data);
-        }
-        var content = this.bodyContent[record.id];
-        if(!content){
-            content = this.tpl.apply(record.data);
-            this.bodyContent[record.id] = content;
-        }
-        return content;
-    },
-
-    onMouseDown : function(e, t){
-        e.stopEvent();
-        var row = e.getTarget('.x-grid3-row');
-        this.toggleRow(row);
-    },
-
-    renderer : function(v, p, record){
-        p.cellAttr = 'rowspan="2"';
-        return '<div class="x-grid3-row-expander">&#160;</div>';
-    },
-
-    beforeExpand : function(record, body, rowIndex){
-        if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
-            if(this.tpl && this.lazyRender){
-                body.innerHTML = this.getBodyContent(record, rowIndex);
-            }
-            return true;
-        }else{
-            return false;
-        }
-    },
-
-    toggleRow : function(row){
-        if(typeof row == 'number'){
-            row = this.grid.view.getRow(row);
-        }
-        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
-    },
-
-    expandRow : function(row){
-        if(typeof row == 'number'){
-            row = this.grid.view.getRow(row);
-        }
-        var record = this.grid.store.getAt(row.rowIndex);
-        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
-        if(this.beforeExpand(record, body, row.rowIndex)){
-            this.state[record.id] = true;
-            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
-            this.fireEvent('expand', this, record, body, row.rowIndex);
-        }
-    },
-
-    collapseRow : function(row){
-        if(typeof row == 'number'){
-            row = this.grid.view.getRow(row);
-        }
-        var record = this.grid.store.getAt(row.rowIndex);
-        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
-        if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
-            this.state[record.id] = false;
-            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
-            this.fireEvent('collapse', this, record, body, row.rowIndex);
-        }
-    }
-});
-
-Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
-
-//backwards compat
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.RowExpander
+ * @extends Ext.util.Observable
+ * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
+ * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
+ * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
+ *
+ * @ptype rowexpander
+ */
+Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
+    /**
+     * @cfg {Boolean} expandOnEnter
+     * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
+     * key is pressed (defaults to <tt>true</tt>).
+     */
+    expandOnEnter : true,
+    /**
+     * @cfg {Boolean} expandOnDblClick
+     * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
+     * (defaults to <tt>true</tt>).
+     */
+    expandOnDblClick : true,
+
+    header : '',
+    width : 20,
+    sortable : false,
+    fixed : true,
+    hideable: false,
+    menuDisabled : true,
+    dataIndex : '',
+    id : 'expander',
+    lazyRender : true,
+    enableCaching : true,
+
+    constructor: function(config){
+        Ext.apply(this, config);
+
+        this.addEvents({
+            /**
+             * @event beforeexpand
+             * Fires before the row expands. Have the listener return false to prevent the row from expanding.
+             * @param {Object} this RowExpander object.
+             * @param {Object} Ext.data.Record Record for the selected row.
+             * @param {Object} body body element for the secondary row.
+             * @param {Number} rowIndex The current row index.
+             */
+            beforeexpand: true,
+            /**
+             * @event expand
+             * Fires after the row expands.
+             * @param {Object} this RowExpander object.
+             * @param {Object} Ext.data.Record Record for the selected row.
+             * @param {Object} body body element for the secondary row.
+             * @param {Number} rowIndex The current row index.
+             */
+            expand: true,
+            /**
+             * @event beforecollapse
+             * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
+             * @param {Object} this RowExpander object.
+             * @param {Object} Ext.data.Record Record for the selected row.
+             * @param {Object} body body element for the secondary row.
+             * @param {Number} rowIndex The current row index.
+             */
+            beforecollapse: true,
+            /**
+             * @event collapse
+             * Fires after the row collapses.
+             * @param {Object} this RowExpander object.
+             * @param {Object} Ext.data.Record Record for the selected row.
+             * @param {Object} body body element for the secondary row.
+             * @param {Number} rowIndex The current row index.
+             */
+            collapse: true
+        });
+
+        Ext.ux.grid.RowExpander.superclass.constructor.call(this);
+
+        if(this.tpl){
+            if(typeof this.tpl == 'string'){
+                this.tpl = new Ext.Template(this.tpl);
+            }
+            this.tpl.compile();
+        }
+
+        this.state = {};
+        this.bodyContent = {};
+    },
+
+    getRowClass : function(record, rowIndex, p, ds){
+        p.cols = p.cols-1;
+        var content = this.bodyContent[record.id];
+        if(!content && !this.lazyRender){
+            content = this.getBodyContent(record, rowIndex);
+        }
+        if(content){
+            p.body = content;
+        }
+        return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
+    },
+
+    init : function(grid){
+        this.grid = grid;
+
+        var view = grid.getView();
+        view.getRowClass = this.getRowClass.createDelegate(this);
+
+        view.enableRowBody = true;
+
+
+        grid.on('render', this.onRender, this);
+        grid.on('destroy', this.onDestroy, this);
+    },
+
+    // @private
+    onRender: function() {
+        var grid = this.grid;
+        var mainBody = grid.getView().mainBody;
+        mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
+        if (this.expandOnEnter) {
+            this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
+                'enter' : this.onEnter,
+                scope: this
+            });
+        }
+        if (this.expandOnDblClick) {
+            grid.on('rowdblclick', this.onRowDblClick, this);
+        }
+    },
+    
+    // @private    
+    onDestroy: function() {
+        if(this.keyNav){
+            this.keyNav.disable();
+            delete this.keyNav;
+        }
+        /*
+         * A majority of the time, the plugin will be destroyed along with the grid,
+         * which means the mainBody won't be available. On the off chance that the plugin
+         * isn't destroyed with the grid, take care of removing the listener.
+         */
+        var mainBody = this.grid.getView().mainBody;
+        if(mainBody){
+            mainBody.un('mousedown', this.onMouseDown, this);
+        }
+    },
+    // @private
+    onRowDblClick: function(grid, rowIdx, e) {
+        this.toggleRow(rowIdx);
+    },
+
+    onEnter: function(e) {
+        var g = this.grid;
+        var sm = g.getSelectionModel();
+        var sels = sm.getSelections();
+        for (var i = 0, len = sels.length; i < len; i++) {
+            var rowIdx = g.getStore().indexOf(sels[i]);
+            this.toggleRow(rowIdx);
+        }
+    },
+
+    getBodyContent : function(record, index){
+        if(!this.enableCaching){
+            return this.tpl.apply(record.data);
+        }
+        var content = this.bodyContent[record.id];
+        if(!content){
+            content = this.tpl.apply(record.data);
+            this.bodyContent[record.id] = content;
+        }
+        return content;
+    },
+
+    onMouseDown : function(e, t){
+        e.stopEvent();
+        var row = e.getTarget('.x-grid3-row');
+        this.toggleRow(row);
+    },
+
+    renderer : function(v, p, record){
+        p.cellAttr = 'rowspan="2"';
+        return '<div class="x-grid3-row-expander">&#160;</div>';
+    },
+
+    beforeExpand : function(record, body, rowIndex){
+        if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
+            if(this.tpl && this.lazyRender){
+                body.innerHTML = this.getBodyContent(record, rowIndex);
+            }
+            return true;
+        }else{
+            return false;
+        }
+    },
+
+    toggleRow : function(row){
+        if(typeof row == 'number'){
+            row = this.grid.view.getRow(row);
+        }
+        this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
+    },
+
+    expandRow : function(row){
+        if(typeof row == 'number'){
+            row = this.grid.view.getRow(row);
+        }
+        var record = this.grid.store.getAt(row.rowIndex);
+        var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
+        if(this.beforeExpand(record, body, row.rowIndex)){
+            this.state[record.id] = true;
+            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
+            this.fireEvent('expand', this, record, body, row.rowIndex);
+        }
+    },
+
+    collapseRow : function(row){
+        if(typeof row == 'number'){
+            row = this.grid.view.getRow(row);
+        }
+        var record = this.grid.store.getAt(row.rowIndex);
+        var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
+        if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
+            this.state[record.id] = false;
+            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
+            this.fireEvent('collapse', this, record, body, row.rowIndex);
+        }
+    }
+});
+
+Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
+
+//backwards compat
 Ext.grid.RowExpander = Ext.ux.grid.RowExpander;
\ No newline at end of file