Question

我的数据显示在标准的ExtJs网格中。状态已保存（存在cookie），列顺序可以更改，并且会在它们被保留时显示，但是，我的列宽度不会被重现。

使用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>

我搜索了论坛，我搜索了其他论坛，但我找不到我做错了什么。救命？ :-)（温柔......）

Answer 1

如果指定ForceFit，则忽略autoExpandColumn。同样使用forceFit，它会在整个宽度上不断调整列，这可能是问题所在。尝试删除forceFit和autoExpandColumn属性。

Answer 2

在您的代码中没有保存列的大小到cookie，没有读取，没有设置它们......为什么您希望调整列的大小？ forceFit: true也无济于事。

还有什么东西没有显示？

Answer 3

我找到了它：

我删除了autoExpander（为Robby赢得了赞誉），并在顶部删除了此代码

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

这是一个应该帮助我的错误修正，在返回我的步骤并删除这一点时，它有效。所以基本上，我不得不删除autoExpander。

ExtJs - 不保存columnwidth

3 个答案: