在 extjs 中使用 Panel 而不是视口答案

【问题标题】：using Panel instead of viewport in extjs在 extjs 中使用 Panel 而不是视口
【发布时间】：2011-07-20 14:45:38
【问题描述】：

我想在我现有的网站上添加一个网格。我知道“视口”占据了整个页面。因为我只想要页面的一部分，所以我应该“面板”。

我已经按照这个示例以干净的 mvc 样式设置了我的网格。

http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

但是，此示例使用“视口”。

   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);
    }

});

这一切都有效。如果我使用视口

【问题讨论】：

当您使用 Panel 时究竟会发生什么？是否有任何错误、异常？
您好，感谢您的回复。我通过使用“Ext.container.Container”得到了这个工作。不太清楚后果。但它有效。

标签： extjs extjs4

【解决方案1】：

将 'Ext.grid.Panel' 更改为 'Ext.panel.Panel'（在启动和任务列表 sn-ps 中），它将按您的预期工作。

【讨论】：