X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/Container2.html diff --git a/docs/source/Container2.html b/docs/source/Container2.html index 82b08102..d54c25b1 100644 --- a/docs/source/Container2.html +++ b/docs/source/Container2.html @@ -1,14 +1,28 @@ -Sencha Documentation Project
/**
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
  * @class Ext.grid.header.Container
  * @extends Ext.container.Container
- * @private
  *
  * Container which holds headers and is docked at the top or bottom of a TablePanel.
  * The HeaderContainer drives resizing/moving/hiding of columns within the TableView.
  * As headers are hidden, moved or resized the headercontainer is responsible for
  * triggering changes within the view.
- *
- * @xtype headercontainer
  */
 Ext.define('Ext.grid.header.Container', {
     extend: 'Ext.container.Container',
@@ -28,14 +42,14 @@ Ext.define('Ext.grid.header.Container', {
     baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
     dock: 'top',
 
-    /**
+    /**
      * @cfg {Number} weight
      * HeaderContainer overrides the default weight of 0 for all docked items to 100.
      * This is so that it has more priority over things like toolbars.
      */
     weight: 100,
     defaultType: 'gridcolumn',
-    /**
+    /**
      * @cfg {Number} defaultWidth
      * Width of the header if no width or flex is specified. Defaults to 100.
      */
@@ -58,13 +72,13 @@ Ext.define('Ext.grid.header.Container', {
 
     dragging: false,
 
-    /**
+    /**
      * <code>true</code> if this HeaderContainer is in fact a group header which contains sub headers.
      * @type Boolean
      * @property isGroupHeader
      */
 
-    /**
+    /**
      * @cfg {Boolean} sortable
      * Provides the default sortable state for all Headers within this HeaderContainer.
      * Also turns on or off the menus in the HeaderContainer. Note that the menu is
@@ -72,10 +86,10 @@ Ext.define('Ext.grid.header.Container', {
      * items for every header.
      */
     sortable: true,
-    
+
     initComponent: function() {
         var me = this;
-        
+
         me.headerCounter = 0;
         me.plugins = me.plugins || [];
 
@@ -89,7 +103,7 @@ Ext.define('Ext.grid.header.Container', {
             me.reorderer = Ext.create('Ext.grid.plugin.HeaderReorderer');
             if (!me.enableColumnResize) {
                 me.resizer.disable();
-            } 
+            }
             if (!me.enableColumnMove) {
                 me.reorderer.disable();
             }
@@ -117,7 +131,7 @@ Ext.define('Ext.grid.header.Container', {
         });
         me.callParent();
         me.addEvents(
-            /**
+            /**
              * @event columnresize
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
@@ -125,7 +139,7 @@ Ext.define('Ext.grid.header.Container', {
              */
             'columnresize',
 
-            /**
+            /**
              * @event headerclick
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
@@ -134,7 +148,7 @@ Ext.define('Ext.grid.header.Container', {
              */
             'headerclick',
 
-            /**
+            /**
              * @event headertriggerclick
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
@@ -143,7 +157,7 @@ Ext.define('Ext.grid.header.Container', {
              */
             'headertriggerclick',
 
-            /**
+            /**
              * @event columnmove
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
@@ -151,26 +165,26 @@ Ext.define('Ext.grid.header.Container', {
              * @param {Number} toIdx
              */
             'columnmove',
-            /**
+            /**
              * @event columnhide
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
              */
             'columnhide',
-            /**
+            /**
              * @event columnshow
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
              */
             'columnshow',
-            /**
+            /**
              * @event sortchange
              * @param {Ext.grid.header.Container} ct The grid's header Container which encapsulates all column headers.
              * @param {Ext.grid.column.Column} column The Column header Component which provides the column definition
              * @param {String} direction
              */
             'sortchange',
-            /**
+            /**
              * @event menucreate
              * Fired immediately after the column header menu is created.
              * @param {Ext.grid.header.Container} ct This instance
@@ -184,6 +198,61 @@ Ext.define('Ext.grid.header.Container', {
         Ext.destroy(this.resizer, this.reorderer);
         this.callParent();
     },
+    
+    applyDefaults: function(config){
+        /*
+         * Ensure header.Container defaults don't get applied to a RowNumberer 
+         * if an xtype is supplied. This isn't an ideal solution however it's 
+         * much more likely that a RowNumberer with no options will be created, 
+         * wanting to use the defaults specified on the class as opposed to 
+         * those setup on the Container.
+         */
+        if (config && !config.isComponent && config.xtype == 'rownumberer') {
+            return config;
+        }
+        return this.callParent([config]);
+    },
+
+    applyColumnsState: function(columns) {
+        if (!columns || !columns.length) {
+            return;
+        }
+
+        var me = this,
+            i = 0,
+            index,
+            col;
+
+        Ext.each(columns, function (columnState) {
+            col = me.down('gridcolumn[headerId=' + columnState.id + ']');
+            if (col) {
+                index = me.items.indexOf(col);
+                if (i !== index) {
+                    me.moveHeader(index, i);
+                }
+
+                if (col.applyColumnState) {
+                    col.applyColumnState(columnState);
+                }
+                ++i;
+            }
+        });
+    },
+
+    getColumnsState: function () {
+        var me = this,
+            columns = [],
+            state;
+
+        me.items.each(function (col) {
+            state = col.getColumnState && col.getColumnState();
+            if (state) {
+                columns.push(state);
+            }
+        });
+
+        return columns;
+    },
 
     // Invalidate column cache on add
     // We cannot refresh the View on every add because this method is called
@@ -191,8 +260,17 @@ Ext.define('Ext.grid.header.Container', {
     onAdd: function(c) {
         var me = this;
         if (!c.headerId) {
-            c.headerId = 'h' + (++me.headerCounter);
+            c.headerId = c.initialConfig.id || ('h' + (++me.headerCounter));
+        }
+        //<debug warn>
+        if (Ext.global.console && Ext.global.console.warn) {
+            if (!me._usedIDs) me._usedIDs = {};
+            if (me._usedIDs[c.headerId]) {
+                Ext.global.console.warn(this.$className, 'attempted to reuse an existing id', c.headerId);
+            }
+            me._usedIDs[c.headerId] = true;
         }
+        //</debug>
         me.callParent(arguments);
         me.purgeCache();
     },
@@ -225,18 +303,36 @@ Ext.define('Ext.grid.header.Container', {
         if (!this.isHeader) {
             var me = this,
                 topHeaders = me.query('>gridcolumn:not([hidden])'),
-                viewEl;
+                viewEl,
+                firstHeaderEl,
+                lastHeaderEl;
 
             me.callParent(arguments);
 
             if (topHeaders.length) {
-                topHeaders[0].el.radioCls(me.firstHeaderCls);
-                topHeaders[topHeaders.length - 1].el.radioCls(me.lastHeaderCls);
+                firstHeaderEl = topHeaders[0].el;
+                if (firstHeaderEl !== me.pastFirstHeaderEl) {
+                    if (me.pastFirstHeaderEl) {
+                        me.pastFirstHeaderEl.removeCls(me.firstHeaderCls);
+                    }
+                    firstHeaderEl.addCls(me.firstHeaderCls);
+                    me.pastFirstHeaderEl = firstHeaderEl;
+                }
+
+                lastHeaderEl = topHeaders[topHeaders.length - 1].el;
+                if (lastHeaderEl !== me.pastLastHeaderEl) {
+                    if (me.pastLastHeaderEl) {
+                        me.pastLastHeaderEl.removeCls(me.lastHeaderCls);
+                    }
+                    lastHeaderEl.addCls(me.lastHeaderCls);
+                    me.pastLastHeaderEl = lastHeaderEl;
+                }
             }
         }
+
     },
 
-    onHeaderShow: function(header) {
+    onHeaderShow: function(header, preventLayout) {
         // Pass up to the GridSection
         var me = this,
             gridSection = me.ownerCt,
@@ -287,7 +383,20 @@ Ext.define('Ext.grid.header.Container', {
         me.fireEvent('columnshow', me, header);
 
         // The header's own hide suppresses cascading layouts, so lay the headers out now
-        me.doLayout();
+        if (preventLayout !== true) {
+            me.doLayout();
+        }
+    },
+
+    doComponentLayout: function(){
+        var me = this;
+        if (me.view && me.view.saveScrollState) {
+            me.view.saveScrollState();
+        }
+        me.callParent(arguments);
+        if (me.view && me.view.restoreScrollState) {
+            me.view.restoreScrollState();
+        }
     },
 
     onHeaderHide: function(header, suppressLayout) {
@@ -349,6 +458,10 @@ Ext.define('Ext.grid.header.Container', {
             for (i = 0; i < len; i++) {
                 itemToDisable = itemsToDisable[i];
                 if (!Ext.Array.contains(me.disabledMenuItems, itemToDisable)) {
+
+                    // If we only want to disable check change: it might be a disabled item, so enable it prior to
+                    // setting its correct disablement level.
+                    itemToDisable.disabled = false;
                     itemToDisable[itemToDisable.menu ? 'disableCheckChange' : 'disable']();
                     me.disabledMenuItems.push(itemToDisable);
                 }
@@ -356,7 +469,7 @@ Ext.define('Ext.grid.header.Container', {
         }
     },
 
-    /**
+    /**
      * Temporarily lock the headerCt. This makes it so that clicking on headers
      * don't trigger actions like sorting or opening of the header menu. This is
      * done because extraneous events may be fired on the headers after interacting
@@ -375,7 +488,6 @@ Ext.define('Ext.grid.header.Container', {
         if (this.view && this.view.rendered) {
             this.view.onHeaderResize(header, w, suppressFocus);
         }
-        this.fireEvent('columnresize', this, header, w);
     },
 
     onHeaderClick: function(header, e, t) {
@@ -429,6 +541,7 @@ Ext.define('Ext.grid.header.Container', {
         var me = this;
         // Delete column cache - column order has changed.
         delete me.gridDataColumns;
+        delete me.hideableColumns;
 
         // Menu changes when columns are moved. It will be recreated.
         if (me.menu) {
@@ -441,13 +554,13 @@ Ext.define('Ext.grid.header.Container', {
         var me = this,
             gridSection = me.ownerCt;
 
-        if (gridSection) {
+        if (gridSection && gridSection.onHeaderMove) {
             gridSection.onHeaderMove(me, header, fromIdx, toIdx);
         }
         me.fireEvent("columnmove", me, header, fromIdx, toIdx);
     },
 
-    /**
+    /**
      * Gets the menu (and will create it if it doesn't already exist)
      * @private
      */
@@ -456,6 +569,7 @@ Ext.define('Ext.grid.header.Container', {
 
         if (!me.menu) {
             me.menu = Ext.create('Ext.menu.Menu', {
+                hideOnParentHide: false,  // Persists when owning ColumnHeader is hidden
                 items: me.getMenuItems(),
                 listeners: {
                     deactivate: me.onMenuDeactivate,
@@ -468,34 +582,38 @@ Ext.define('Ext.grid.header.Container', {
         return me.menu;
     },
 
-    /**
+    /**
      * Returns an array of menu items to be placed into the shared menu
      * across all headers in this header container.
      * @returns {Array} menuItems
      */
     getMenuItems: function() {
         var me = this,
-            menuItems = [{
-                itemId: 'columnItem',
-                text: me.columnsText,
-                cls: Ext.baseCSSPrefix + 'cols-icon',
-                menu: me.getColumnMenu(me)
-            }];
+            menuItems = [],
+            hideableColumns = me.enableColumnHide ? me.getColumnMenu(me) : null;
 
         if (me.sortable) {
-            menuItems.unshift({
+            menuItems = [{
                 itemId: 'ascItem',
                 text: me.sortAscText,
-                cls: 'xg-hmenu-sort-asc',
+                cls: Ext.baseCSSPrefix + 'hmenu-sort-asc',
                 handler: me.onSortAscClick,
                 scope: me
             },{
                 itemId: 'descItem',
                 text: me.sortDescText,
-                cls: 'xg-hmenu-sort-desc',
+                cls: Ext.baseCSSPrefix + 'hmenu-sort-desc',
                 handler: me.onSortDescClick,
                 scope: me
-            },'-');
+            }];
+        }
+        if (hideableColumns && hideableColumns.length) {
+            menuItems.push('-', {
+                itemId: 'columnItem',
+                text: me.columnsText,
+                cls: Ext.baseCSSPrefix + 'cols-icon',
+                menu: hideableColumns
+            });
         }
         return menuItems;
     },
@@ -516,7 +634,7 @@ Ext.define('Ext.grid.header.Container', {
         activeHeader.setSortState('DESC');
     },
 
-    /**
+    /**
      * Returns an array of menu CheckItems corresponding to all immediate children of the passed Container which have been configured as hideable.
      */
     getColumnMenu: function(headerContainer) {
@@ -557,7 +675,7 @@ Ext.define('Ext.grid.header.Container', {
         header[checked ? 'show' : 'hide']();
     },
 
-    /**
+    /**
      * Get the columns used for generating a template via TableChunker.
      * Returns an array of all columns and their
      *  - dataIndex
@@ -573,14 +691,27 @@ Ext.define('Ext.grid.header.Container', {
             headers   = this.getGridColumns(flushCache),
             headersLn = headers.length,
             i = 0,
-            header;
+            header,
+            width;
 
         for (; i < headersLn; i++) {
             header = headers[i];
+
+            if (header.hidden || header.up('headercontainer[hidden=true]')) {
+                width = 0;
+            } else {
+                width = header.getDesiredWidth();
+                // IE6 and IE7 bug.
+                // Setting the width of the first TD does not work - ends up with a 1 pixel discrepancy.
+                // We need to increment the passed with in this case.
+                if ((i === 0) && (Ext.isIE6 || Ext.isIE7)) {
+                    width += 1;
+                }
+            }
             cols.push({
                 dataIndex: header.dataIndex,
                 align: header.align,
-                width: header.hidden ? 0 : header.getDesiredWidth(),
+                width: width,
                 id: header.id,
                 cls: header.tdCls,
                 columnId: header.getItemId()
@@ -589,7 +720,7 @@ Ext.define('Ext.grid.header.Container', {
         return cols;
     },
 
-    /**
+    /**
      * Returns the number of <b>grid columns</b> descended from this HeaderContainer.
      * Group Columns are HeaderContainers. All grid columns are returned, including hidden ones.
      */
@@ -597,7 +728,7 @@ Ext.define('Ext.grid.header.Container', {
         return this.getGridColumns().length;
     },
 
-    /**
+    /**
      * Gets the full width of all columns that are visible.
      */
     getFullWidth: function(flushCache) {
@@ -639,8 +770,8 @@ Ext.define('Ext.grid.header.Container', {
         }
     },
 
-    /**
-     * Returns an array of the <b>visible<b> columns in the grid. This goes down to the lowest column header
+    /**
+     * Returns an array of the <b>visible</b> columns in the grid. This goes down to the lowest column header
      * level, and does not return <i>grouped</i> headers which contain sub headers.
      * @param {Boolean} refreshCache If omitted, the cached set of columns will be returned. Pass true to refresh the cache.
      * @returns {Array}
@@ -649,7 +780,7 @@ Ext.define('Ext.grid.header.Container', {
         return Ext.ComponentQuery.query(':not([hidden])', this.getGridColumns(refreshCache));
     },
 
-    /**
+    /**
      * Returns an array of all columns which map to Store fields. This goes down to the lowest column header
      * level, and does not return <i>grouped</i> headers which contain sub headers.
      * @param {Boolean} refreshCache If omitted, the cached set of columns will be returned. Pass true to refresh the cache.
@@ -672,7 +803,22 @@ Ext.define('Ext.grid.header.Container', {
         return result;
     },
 
-    /**
+    /**
+     * @private
+     * For use by column headers in determining whether there are any hideable columns when deciding whether or not
+     * the header menu should be disabled.
+     */
+    getHideableColumns: function(refreshCache) {
+        var me = this,
+            result = refreshCache ? null : me.hideableColumns;
+
+        if (!result) {
+            result = me.hideableColumns = me.query('[hideable]');
+        }
+        return result;
+    },
+
+    /**
      * Get the index of a leaf level header regardless of what the nesting
      * structure is.
      */
@@ -681,7 +827,7 @@ Ext.define('Ext.grid.header.Container', {
         return Ext.Array.indexOf(columns, header);
     },
 
-    /**
+    /**
      * Get a leaf level header by index regardless of what the nesting
      * structure is.
      */
@@ -690,20 +836,22 @@ Ext.define('Ext.grid.header.Container', {
         return columns[index];
     },
 
-    /**
+    /**
      * Maps the record data to base it on the header id's.
      * This correlates to the markup/template generated by
      * TableChunker.
      */
-    prepareData: function(data, rowIdx, record, view) {
+    prepareData: function(data, rowIdx, record, view, panel) {
         var obj       = {},
-            headers   = this.getGridColumns(),
+            headers   = this.gridDataColumns || this.getGridColumns(),
             headersLn = headers.length,
             colIdx    = 0,
-            header, value,
+            header,
+            headerId,
+            renderer,
+            value,
             metaData,
-            g = this.up('tablepanel'),
-            store = g.store;
+            store = panel.store;
 
         for (; colIdx < headersLn; colIdx++) {
             metaData = {
@@ -711,16 +859,18 @@ Ext.define('Ext.grid.header.Container', {
                 style: ''
             };
             header = headers[colIdx];
+            headerId = header.id;
+            renderer = header.renderer;
             value = data[header.dataIndex];
 
             // When specifying a renderer as a string, it always resolves
             // to Ext.util.Format
-            if (Ext.isString(header.renderer)) {
-                header.renderer = Ext.util.Format[header.renderer];
+            if (typeof renderer === "string") {
+                header.renderer = renderer = Ext.util.Format[renderer];
             }
 
-            if (Ext.isFunction(header.renderer)) {
-                value = header.renderer.call(
+            if (typeof renderer === "function") {
+                value = renderer.call(
                     header.scope || this.ownerCt,
                     value,
                     // metadata per cell passing an obj by reference so that
@@ -742,14 +892,15 @@ Ext.define('Ext.grid.header.Container', {
                 delete metaData.css;
             }
             // </debug>
-            obj[header.id+'-modified'] = record.isModified(header.dataIndex) ? Ext.baseCSSPrefix + 'grid-dirty-cell' : Ext.baseCSSPrefix + 'grid-clean-cell';
-            obj[header.id+'-tdCls'] = metaData.tdCls;
-            obj[header.id+'-tdAttr'] = metaData.tdAttr;
-            obj[header.id+'-style'] = metaData.style;
+
+            obj[headerId+'-modified'] = record.isModified(header.dataIndex) ? Ext.baseCSSPrefix + 'grid-dirty-cell' : '';
+            obj[headerId+'-tdCls'] = metaData.tdCls;
+            obj[headerId+'-tdAttr'] = metaData.tdAttr;
+            obj[headerId+'-style'] = metaData.style;
             if (value === undefined || value === null || value === '') {
                 value = '&#160;';
             }
-            obj[header.id] = value;
+            obj[headerId] = value;
         }
         return obj;
     },
@@ -760,4 +911,6 @@ Ext.define('Ext.grid.header.Container', {
         }
     }
 });
-

\ No newline at end of file
+
+ +