网格列上的Extjs 5锁

Question

我希望锁定网格的前几列，并为其余的列提供水平滚动。正在使用列标题的咕噜声。

我使用了locked : true属性，并为这些列设置了静态宽度。但什么也没发生。我检查了所有可能的文档。不知道错误在哪里。有人能帮帮我吗？

代码如下所示

View.js的

Ext.define('MyModel.view.graphPanel', {
    extend: 'Ext.grid.Panel',
    layout:'border',
    alias: 'widget.graphPanel',
    name:'graphPanel',
    title: 'Tests',
    store: 'MyModel.store.settingStore',
    viewConfig: {
        stripeRows: true
    },
    columnLines: true,
    split:true,
    frame: true
});

Controller.js

Ext.define('MyModel.controller.myController', {
   extend:'Ext.app.Controller',
   models:['MyModel.model.settingModel'],
   stores:['MyModel.store.settingStore'],
   init: function() {
   Ext.Ajax.request({
            url: 'Sample.xml',
            success: function(response, opts) {
            var txt = response.responseText;
            parser=new DOMParser();
            xmlDoc=parser.parseFromString(txt,"text/xml");
            var columnArr = [];
            var outercolumnarr = [];
            var fieldArr = [];
            modelfieldArr = [];
            completeDataArr=[];

            //This builds all locked set of columns
            var headerArr = xmlDoc.getElementsByTagName('HEADER1');
            Ext.each(headerArr[0].getElementsByTagName('HEADER2'), function(header, index) {
                columnArr.push({
                    text: header.getAttribute('TEXT'),
                    dataIndex: header.getAttribute('DATAINDEX'),
                    locked:true,
                    width:100,
                    forceFit: true
                });
            });
            outercolumnarr.push({
                text:"General data",
                 width:400,
                columns:columnArr,
                locked:true
            });

            //Building scrollable columns
                var days = ['Sun','Mon',Tue'];
                Ext.each(days, function(day, index) {
                    columnArr = [];
                    Ext.each(headerArr[1].getElementsByTagName('HEADER2'), function(innerHeader, index) {
                    columnArr.push({    
                        text: innerHeader.getAttribute('TEXT'),
                        dataIndex: innerHeader.getAttribute('DATAINDEX')
                        });
                    });
                    outercolumnarr.push({
                        text:day,
                        columns:columnArr,
                    });
            });
            //outercolumnarr contains the final column array
            //Similarly build data array, model and field array for stores and models. 

            var store = Ext.data.StoreManager.lookup('MyModel.store.settingStore');
            store.setFields(modelfieldArr);
            store.setData(completeDataArr);

            //Reconfigure the grid
             var gridview = Ext.ComponentQuery.query('graphPanel')[0];
            gridview.reconfigure(store,outercolumnarr);

        }
    });
 }
});

Answer 1

因为要使用重新配置添加列，所以不隐式地启用enableLocking。您必须手动启用它。您可能会在MyModel.view.graphPanel定义中启用它，但可能还需要添加空列定义(columns: [])，因为没有该定义的框架中出现了错误。

工作样本：http://jsfiddle.net/nj4nk/11/