스크롤 및 확장이 제대로 작동하지 않습니다.

Question

Ext.Window 내에 하나의 격자 패널이 있습니다. gridpanel의 스크롤 막대는 스크롤이 올바르게 작동하지 않는 동안 자동으로 위로 이동하며 Ext.Window이 확장되면 그리드 패널이 확장되지 않습니다. 나는 어떤 자산을 설정해야한다고 생각하니?. gridpanel에서 autoExpandColumn을 사용하면 문제가 해결됩니까? 나는이에 layout:'fit'을 추가 확대

extWin=new Ext.Window({ 
    title:"Locate Managed Object",items:[new Ext.grid.GridPanel({ 
     title: "Managed Elements", 
     region: "center", 
     height:250, 
     width:500, renderTo:"tree-id", 
     viewConfig: {forceFit: true}, 
     store: store, 
     sm: new GeoExt.grid.FeatureSelectionModel({selectControlelect}), 
     cm: new Ext.grid.ColumnModel({ 
      defaults: { 
       sortable: true 
      }, 
      columns: [ 
       {header:"Managed Elements",dataIndex:"fid"} 
      ] 
     }) 
    })] 
}); 
extWin.show(); 

는 잘 작동하지만, 스크롤이 작동하지 않습니다. 어느 시점에서 내가 틀렸다면 수정하십시오.

Answer 1

다음은 작동 예제입니다. 문제가 발생하면 알려주세요.

트릭은 layout입니다. 컨테이너의 레이아웃 속성 fit (이 경우 컨테이너는 윈도우 임)을 설정하고 너비, 높이와 같은 그리드의 크기 속성을 지정하지 마십시오.

Sencha Fiddle - GridPanel in Window

Ext.onReady(function(){ 
function createFakeData(count) { 
     var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'], 
      lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'], 
      ratings  = [1, 2, 3, 4, 5], 
      salaries  = [100, 400, 900, 1500, 1000000]; 

     var data = []; 
     for (var i = 0; i < (count || 25); i++) { 
      var ratingId = Math.floor(Math.random() * ratings.length), 
       salaryId = Math.floor(Math.random() * salaries.length), 
       firstNameId = Math.floor(Math.random() * firstNames.length), 
       lastNameId = Math.floor(Math.random() * lastNames.length), 

       rating  = ratings[ratingId], 
       salary  = salaries[salaryId], 
       name  = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]); 

      data.push({ 
       rating: rating, 
       salary: salary, 
       name: name 
      }); 
     } 
     return data; 
    } 

    Ext.define('Employee', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      {name: 'rating', type: 'int'}, 
      {name: 'salary', type: 'float'}, 
      {name: 'name'} 
     ] 
    }); 


    // create the Data Store 
    var store = Ext.create('Ext.data.Store', { 
     id: 'store', 
     pageSize: 50, 
     buffered: true, 
     purgePageCount: 0, 
     model: 'Employee', 
     proxy: { 
      type: 'memory' 
     } 
    }); 


Ext.create('Ext.window.Window', { 
    title: 'Hello', 
    height: 500, 
    width: 400, 
    closable: false, 
    collapsible: true, 
    layout: { 
     type: 'fit' 
    }, 
    items: { 
     xtype: 'grid', 
     border: false, 
     store: store, 
     loadMask: true, 
     disableSelection: true, 
     invalidateScrollerOnRefresh: false, 
     viewConfig: { 
      trackOver: false 
     }, 
     columns: [ 
      {xtype:'rownumberer',width:40,sortable:false}, 
      {text: 'Name',flex:1,sortable:true,dataIndex:'name'}, 
      {text: 'Rating',width:125,sortable:true,dataIndex:'rating'}, 
      {text: 'Salary',width:125,sortable:true,dataIndex:'salary',align:'right',renderer:Ext.util.Format.usMoney} 
     ]}   
}).show(); 

    var data = createFakeData(500), 
     ln = data.length, 
     records = [], 
     i = 0; 
    for (; i < ln; i++) { 
     records.push(Ext.ModelManager.create(data[i], 'Employee')); 
    } 

    store.loadData(records); 
});