используя Panel вместо viewport в extjs - PullRequest
Новая
       4

используя Panel вместо viewport в extjs

4 голосов
/ 20 июля 2011

Я хотел бы добавить сетку на свой существующий веб-сайт. Я понимаю, что "окно просмотра" занимает всю страницу. Поскольку я просто хочу часть страницы, я должен "панель".

Я следовал этому примеру, чтобы настроить сетку в чистом стиле 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);
    }

});

Это все работает. если я использую область просмотра

1 Ответ

4 голосов
/ 20 июля 2011

Измените 'Ext.grid.Panel' на 'Ext.panel.Panel' (в фрагментах запуска и списка задач), и все будет работать так, как вы ожидаете.

...