You found a bug! We've classified it as EXTJS-6567 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #11
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    507
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    We had better results with using a combination of 'width' and 'flex' based columns than with 'forceFit'.

    The docs say:
    true to force the columns to fit into the available width. Headers are first sized according to configuration, whether that be a specific width, or flex. Then they are all proportionally changed in width so that the entire content width is used.
    With this understanding the behavior you described in your first post shouldn't come as a surprise:

    Depending on the width of the grid the col2's width is never actually the same. For example if col2's width is fixed at 30, its width is visibly different for a GridPanel that's 600px versus 700px in width.
    In a 'forceFit' grid no width is ever gonna be interpreted as an absolute width, but always changed into a flex value.

    This is the relevant code fragment in the Ext source:

    Ext.grid.ColumnLayout#completeLayout:
    Code:
    // For forceFit, just use allocated width as the flex value, and the proportions
    // will end up the same whatever HeaderContainer width they are being forced into.
    if (item.width) {
        item.flex = ownerContext.childItems[i].flex = item.width;
        delete item.width;
        childContext.widthModel = calculated;
        needsInvalidate = true;
    }
    We simply dumped 'forceFit' in favor of using flex which guarantees that absolute widths on columns actually remain absolute.

  2. #12
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    507
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      0  

    Default


    Column resizing, however, is still a problem.

    Forcing the column widths to stay inside the grid boundaries while the user resizes columns doesn't work for us in any setup, whether we use 'forceFit' or 'flex'.

    The problem seems that as one column is resized, its flex property is transformed into an absolute width. This makes sense since the user obviously wants this column to have a specific size. However, as the user keeps resizing other columns ultimately all columns in the grid might end up having an absolute width. There will be no column left to fill up the remaining space (or be downsized in order for the grid to stay within the grid with boundary).

    See Ext.grid.plugin.HeaderResizer
    Code:
    doResize: function() {
        if (this.dragHd) {
            var dragHd = this.dragHd,
                nextHd,
                offset = this.tracker.getOffset('point');
    
            // resize the dragHd
            if (dragHd.flex) {
                delete dragHd.flex;
            }
    
            Ext.suspendLayouts();
    
            // Set the new column width.
            dragHd.setWidth(this.origWidth + offset[0]);
    
            // In the case of forceFit, change the following Header width.
            // Constraining so that neither neighbour can be sized to below minWidth is handled in getConstrainRegion
            if (this.headerCt.forceFit) {
                nextHd = dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
                if (nextHd) {
                    delete nextHd.flex;
                    nextHd.setWidth(nextHd.getWidth() - offset[0]);
                }
            }
    
            // Apply the two width changes by laying out the owning HeaderContainer
            Ext.resumeLayouts(true);
        }
    },

  3. #13
    Sencha Premium Member karlsnyder0's Avatar
    Join Date
    Mar 2010
    Location
    Maryland, USA
    Posts
    81
    Vote Rating
    9
    karlsnyder0 is on a distinguished road

      0  

    Default


    UPDATE

    We've *kinda* resolved the resize issue with some code and overrides. The resizing works pretty well. When loading a GridPanel whose configuration contains a mix of columns with and without sizes, the size don't perfectly match resizing versus loading. This is better behavior because it is consistent versus the inconsistent behavior when sizing columns smaller where they actually appear larger.

    GridPanel
    Code:
                columns: {
                    items: this.columns,
                    
                    defaults: {
                        minWidth: 10
                    },
                    
                    resizer: new Ext.grid.plugin.HeaderResizer({
                        resizeNextHd: false,
                    }),
                    
                    // Add a helper grid property to keep track of the last column dragged.
                    listeners: {
                        'beforeresize': function(headerResizer, headerCt){
                            me.grid.lastDragHd = headerResizer.dragHd;
                        },
                        
                        'columnresize': function(headerCt, column, width){
                            // IMPORTANT: This must be fired only for the column that was actually resized and that can only be determined if we actually dragged the 
                            //  column edge.  Note that we use a grid property to keep track of the last column dragged because ExtJS somehow "forgets" when we implement
                            //  our resizer override.
                            if(me.grid.lastDragHd && (me.grid.lastDragHd.dataIndex == column.dataIndex)){
                                column.widthDeliberate = true;
                                
                                headerCt._columnJustResized = true;
                            }
                            
                            // If we are resizing during initial layout then we are here prematurely.
                            if(headerCt._columnJustResized){
                                delete headerCt._columnJustResized;
    
                                // Persist the Grid layout.
                                me.saveSetup(false);
                            }
                        },
                        
                        'afterresize': function(headerResizer, headerCt){
                            me.grid.lastDragHd = undefined;
                        }
                    }
                },
    Overrides (ext-fixes.js)
    Code:
    /* * Override Ext.grid.header.Container to allow a resizer property.
     */
    Ext.define('MyOverrides.Ext.grid.header.Container', {
        override: 'Ext.grid.header.Container',
        
        initComponent: function() {
            var me = this;
    
    
            me.headerCounter = 0;
            me.plugins = me.plugins || [];
    
    
            // TODO: Pass in configurations to turn on/off dynamic
            //       resizing and disable resizing all together
    
    
            // Only set up a Resizer and Reorderer for the topmost HeaderContainer.
            // Nested Group Headers are themselves HeaderContainers
            if (!me.isHeader) {
                if (me.enableColumnResize) {
                    me.resizer = me.resizer || new Ext.grid.plugin.HeaderResizer();
                    me.plugins.push(me.resizer);
                }
                if (me.enableColumnMove) {
                    me.reorderer = new Ext.grid.plugin.HeaderReorderer();
                    me.plugins.push(me.reorderer);
                }
            }
    
    
            // Base headers do not need a box layout
            if (me.isHeader && !me.items) {
                me.layout = me.layout || 'auto';
            }
            // HeaderContainer and Group header needs a gridcolumn layout.
            else {
                me.layout = Ext.apply({
                    type: 'gridcolumn',
                    align: 'stretchmax'
                }, me.initialConfig.layout);
            }
            me.defaults = me.defaults || {};
            Ext.applyIf(me.defaults, {
                triStateSort: me.triStateSort,
                sortable: me.sortable
            });
            
            me.menuTask = new Ext.util.DelayedTask(me.updateMenuDisabledState, me);
            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
                 * @param {Number} width
                 */
                '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
                 * @param {Ext.EventObject} e
                 * @param {HTMLElement} t
                 */
                '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
                 * @param {Ext.EventObject} e
                 * @param {HTMLElement} t
                 */
                '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
                 * @param {Number} fromIdx
                 * @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
                 * @param {Ext.menu.Menu} menu The Menu that was created
                 */
                'menucreate'
            );
        }
    });
    
    
    /*
     * Modified version of Ext.grid.plugin.HeaderResizer to fix the flex resizing bug.
     */
    Ext.define('MyOverrides.Ext.grid.plugin.HeaderResizer', {
        override: 'Ext.grid.plugin.HeaderResizer',
        
        resizeNextHd: true,
        
        doResize: function() {
            if (this.dragHd) {
                var dragHd = this.dragHd,
                    nextHd,
                    offset = this.tracker.getOffset('point');
                
                // *** We might not need this with the temporary fix below.  This allows us to cancel a resize so we might need it.
                if(this.headerCt.fireEvent('beforeresize', this, this.headerCt) == false)
                    return false;
                
                Ext.suspendLayouts();
                
                // *** If we are forceFit then use a temporary fix until 4.2
                var width = dragHd.getWidth() + offset[0];
                
                if (this.headerCt.forceFit)
                    width = dragHd.flex + offset[0];
                
                dragHd.setWidth(width);
    
    
                // In the case of forceFit, change the following Header width.
                // Constraining so that neither neighbour can be sized to below minWidth is handled in getConstrainRegion
                if (this.headerCt.forceFit && this.resizeNextHd) {
                    nextHd = dragHd.nextNode('gridcolumn:not([hidden]):not([isGroupHeader])');
                    if (nextHd) {
                        delete nextHd.flex;
                        nextHd.setWidth(nextHd.getWidth() - offset[0]);
                    }
                }
    
    
                // Apply the two width changes by laying out the owning HeaderContainer
                Ext.resumeLayouts(true);
                
                this.headerCt.fireEvent('afterresize', this, this.headerCt)
            }
        }
    });
    /*
     * END: Fix the column resizing in Ext 4.1.
     */

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar