Question

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

我已按照此示例以干净的mvc样式设置网格。

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

但是这个例子使用“viewport”。

   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'（在启动和任务列表代码段中），它会按预期运行。

在extjs中使用Panel而不是viewport

1 个答案: