ExtJs - columnwidth isn't saved

Question

I have my data to show in a standard ExtJs grid. The state is saved (the cookies exists), column-orders can be changed, and will be shown as they were left, but, my columnwidths are not reproduced.

Javascript:

    <div id="grid"> </div>
        <style type="text/css">
     .x-grid3-header-offset {width: auto;}
     </style>

    <script type="text/javascript">
    Ext.onReady(function(){
      Ext.grid.ColumnModel.override({
        setState : function(col, state) {
         Ext.applyIf(this.lookup[col], state);
        }
      });

        // define widget URL
        var widgetURL = '/this/is/a/dummyurl';



        // totaal: 766
        Ext.app.myData = {
          "totalRows":766,
          "rows":[
            ["1000310","3 CPE||426086","0","0","Standaard","Standaard","EUR","0,00","15,26","-15,26",""]
     // there's more, but I didn't want to waste space
        ]};
        Ext.state.Manager.setProvider(
        new Ext.state.CookieProvider({
            expires: new Date(new Date().getTime()+(1000*60*60*24*31)) //1 month from now
        }));

        function eur(val) {
        val = parseFloat(val);
        return "&euro; " + val.toFixed(2);
        }
        function eurint(val) {
        return "&euro; " + val;
        }

        function deb(val) {
        tmp = val.split('||');
        return ("<a href=\"/klanten/bekijk/klant/"+tmp[1]+"\" title=\""+tmp[0]+"\">"+tmp[0]+"</a>");
        }

        // create the data store
        Ext.app.store = new Ext.data.Store({
        storeId: 'myStore',
        proxy: new Ext.data.ScriptTagProxy({
          url: widgetURL,
          nocache: false,
          callbackParam: 'p_widget_num_return'
        }),
        baseParams: {
          'x01':43543543584
        },
        remoteSort: true,
        paramNames: {
          start: 'x02',
          limit: 'x03',
          sort:  'x04',
          dir:   'x05'
        },
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalRows',
            root: 'rows'
          }, [
              {name: 'referentie', type: 'string', mapping: '0'},
              {name: 'naam', type: 'string', mapping: '1' },
              {name: 'kredietlimiet', type: 'string', mapping: '2'},
              {name: 'internelimiet', type: 'string', mapping: '3'},
              {name: 'procedurenaam', type: 'string', mapping: '4' },
              {name: 'portefeuillenaam', type: 'string', mapping: '5' },
              {name: 'currency', type: 'string', mapping: '6' },
              {name: 'debitdb', type: 'string', mapping: '7'},
              {name: 'creditdb', type: 'string', mapping: '8'},
              {name: 'duedb', type: 'string', mapping: '9'},
              {name: 'dso', type: 'float', mapping: '10'}
              ,{name: 'code', type: 'string', mapping: '11'} // this data is optional
              ,{name: 'klant', type: 'string', mapping: '12'} // this data is optional
              ,{name: 'vertegenwoordiger', type: 'string', mapping: '13'} // this data is optional
          ])
         });

        var paging_toolbar = new Ext.PagingToolbar({
          paramNames: {start: 'x02', limit: 'x03'},
              pageSize: 25,
              store: Ext.app.store,
              displayInfo: true,
              displayMsg: 'Afgebeeld {0} - {1} van {2}',
              emptyMsg: 'Geen gegevens gevonden'
        });

        // trigger the data store load
        //store.load({params:{start:0, limit:pagesize}});
        //store.loadData(myData);

        // create the Grid
        Ext.app.grid = new Ext.grid.GridPanel({
        store: Ext.app.store,
        columns: [
          {id:'referentie',header: "Referentie", width: 50, sortable: true, dataIndex: 'referentie'},
                {id:'klant',header: "Bedrijf", width: 55, sortable: true, dataIndex: 'klant'},
                {id: 'debtor', header: "Naam", sortable: true, renderer: deb, dataIndex: 'naam'},
          {id:'kredietlimiet',header: "Limiet", width: 70, sortable: true, renderer: eurint, dataIndex: 'kredietlimiet', css : "text-align : right;"},
          {id:'procedure',header: "Procedure", width: 50, sortable: true, dataIndex: 'procedurenaam'},
          {id:'portefeuille',header: "Portefeuille", width: 50, sortable: true, dataIndex: 'portefeuillenaam'},
          {id:'currency',header: "Valuta", width: 40, sortable: true, dataIndex: 'currency'},
          {id:'deb',header: "Debet totaal", width: 75, sortable: true, renderer: eurint, dataIndex: 'debitdb', css : "text-align : right;"},
          {id:'cred',header: "Credit totaal", width: 80, sortable: true, renderer: eurint, dataIndex: 'creditdb', css : "text-align : right;"},
          {id:'due',header: "Openstaand saldo", width: 80, sortable: true, renderer: eurint, dataIndex: 'duedb', css : "text-align : right;"},
          {id:'dso',header: "D.V.(*)", width: 45, sortable: true, dataIndex: 'dso'}
                                  ],
        viewConfig: {
          forceFit: true
        },
        //loadMask: true,
        stripeRows: true,
        width:810,
        autoExpandColumn: 'debtor',
        autoHeight: true,
        stateful: true,
        stateId: 'grid',
        bbar: paging_toolbar
        });

        Ext.app.store.loadData(Ext.app.myData);
        Ext.app.grid.render('grid');

    });
    </script>

I searched the forums, I searched other forums, but i can't find what I am doing wrong. Help? :-) (be gentle...)

Answer 1

I found it:

I removed the autoExpander (so kudos for Robby), and removed this code at the top

Ext.onReady(function(){
  Ext.grid.ColumnModel.override({
    setState : function(col, state) {
     Ext.applyIf(this.lookup[col], state);
    }
  });

This was a bugfix that should've helped me, and while returning on my steps, and removing this bit, it worked. So basicly, I had to remove the autoExpander.

Answer 2

If you specify ForceFit then autoExpandColumn is ignored. Also with forceFit it continually fits the columns across the total width so that might be the issue. Try to remove the forceFit and autoExpandColumn properties.

Answer 3

In your code there no saving column sizes to cookie, no reading, no setting them... Why you expect to columns to be resized ? Also forceFit: true would not help.

Or there something what do not show ?