Extjs 5鎖定網格列

Question

我想鎖定網格的前幾列，併爲其餘列提供水平滾動。我正在使用列標題gruping。

我已經使用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/