탭 패널의 첫 번째 탭에 격자 패널 추가

Question

제대로 작동하는 격자가 있습니다. 이제이 GRID를 첫 번째 탭 패널에 추가해야합니다. 어떻게해야합니까?

는

내 코드 :

는

Ext.create('Ext.grid.Panel', { 
    xtype:'grid', 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     { header: 'Name', dataIndex: 'name' }, 
     { header: 'Email', dataIndex: 'email', flex: 1 }, 
     { header: 'Phone', dataIndex: 'phone' } 
    ], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

TAB.JS

Ext.create('Ext.tab.Panel', { 
    width: 300, 
    height: 200, 
    activeTab: 0, 
    items: [ 
     { 
      title: 'Tab 1', 
      xtype:'grid' 
     }, 
     { 
      title: 'Tab 2', 
      html : 'Another one' 
     } 
    ], 
    renderTo : Ext.getBody() 
}); 

내가 GRID.JS에서 xtype:grid 추가 한 GRID.JS 나는 TAB에서 해당 그리드에 액세스하려고 .JS는 첫 번째 탭에 있지만 표시되지 않습니다.

Answer 1

xtype: 'grid' - 이는 create standard Ext.grid.Panel and add it here을 의미합니다.

이 그리드를 만들고 변수에 저장 :

당신은 두 가지 옵션이 있습니다.

var _grid = Ext.create('...', {...}); 

Ext.create('Ext.tab.Panel', { 
    ... 
    items: [ 
     _grid 
    ] 
}); 

또는 새로운 xtype

Ext.define('MyGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.mygrid', 
    ... 

}); 

Ext.create('Ext.tab.Panel', { 
    ... 
    items: [{ 
     xtype: 'mygrid' 
    }] 
});