Ext version tested:
  • Ext 3.2.0


Adapter used:
  • ext
    [ ]yui
    [ ]jquery
    [ ]prototype


css used:
  • only default ext-all.css
    [ ]custom css (include details)




Browser versions tested against:
  • Chrome
  • IE6
  • FF3 (firebug 1.3.0.10 installed)
  • Safari 4


Operating System:
  • Windows Server 2003


Description:
  • Calling applyState on a GridPanel should apply a new column model to the grid when it is present in the state argument
  • Instead of calling setConfig on the ColumnModel the code is optimized to re-use existing columns
  • When updating an existing column it accesses hidden and more importantly the width property directly rather than using the ColumnModel's setColumnWidth helper function OR setting the ColumnModel's totalWidth to null.
  • You need to use the setColumnWidth function OR null totalWidth in order to get the totalWidth property recalculated.
  • The problem being seen is the columns are correctly being set but the width is all wrong...changing states from 3 columns to 1 column results in 1 column visible but stretched to the total width of the previous 3 columns.


The result that was expected:
  • Applying a new state to a grid where the columns are different from existing columns should result in the grid re-building its column correctly with the correct column width being applied and visible to the user.


The result that occurs instead:
  • The right number of columns are visible but the width is wrong - the width being the same as the previous total width of the columns.


Debugging already done:
  • Stepped through the code, observed problem, applied fix below...observed correct behavior.


Possible fix:

Override the grid's applyState function to flush the totalWidth attribute...forcing it to be recalculated...

Code:
applyState: function(state) {
    this.getColumnModel().totalWidth = null;

    pf.viewgrid.GridStatePanel.superclass.applyState.call(this, state);
},
Ideally, the existing applyState function should be re-written to null out the totalWidth property...

Code:
applyState : function(state){
    ....
    if (cs){
        ....
        cm.totalWidth = null;
    }
    ....
}