extjsのビューポートの代わりにPanelを使用

Question

私は既存のウェブサイトにグリッドを追加したいと思います。私は "ビューポート"がページ全体を占めることを理解しています。私はちょうどページの一部が必要なので、私は "パネル"にすべきです。

私はきれいなmvcスタイルでグリッドを設定するために、この例に従ってきました。

​​

ただし、この例では「ビューポート」を使用しています。

launch: function() { 
     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'tasklist', 
        title: 'Tasks', 
        html: 'List of tasks will go here' 
       } 
      ] 
     }); 
    } 

私はこれを以下に変更しました。ここ

launch: function() { 
    Ext.create('Ext.grid.Panel', { 
     layout: 'fit', 
     renderTo: 'panelcontainer', // i've added div to html 
     width: 1000, 
     height: 600, 
     items: [ 
      { 
       xtype: 'tasklist', 
       title: 'Tasks', 
       html: 'List of tasks will go here' 
      } 
     ] 
    }); 
} 

私のタスクリスト

Ext.define('AM.view.task.List', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.tasklist', 
    store: 'Tasks', 
    title: 'All Tasks', 
    initComponent: function() { 

     this.columns = [ 
      { header: 'Name', dataIndex: 'Name', flex: 1 }, 
      { header: 'ReferenceNumber', dataIndex: 'ReferenceNumber', flex: 1 }, 
      { header: 'ProductList', dataIndex: 'ProductList', flex: 1 }, 
      { header: 'Supplier', dataIndex: 'Supplier', flex: 1 }, 
      { header: 'ModifiedByUserName', dataIndex: 'ModifiedByUserName', flex: 1 }, 
      { header: 'Date', dataIndex: 'Date', flex: 1, type: 'date', dateFormat: 'Y-m-d' }, 
      { header: 'Id', dataIndex: 'Id', flex: 1 } 
     ]; 


     this.callParent(arguments); 
    } 

}); 

これはすべての作品です。ビューポートを使用している場合

Answer 1

'Ext.grid.Panel'〜'Ext.panel.Panel'（起動およびタスクリストスニペットで）変更すると、期待通りに機能します。