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

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.