CODEWITHSUNDEEP
extjsextjs4
frosty
frosty

Reputation: 5370

using Panel instead of viewport in extjs

I would like to add a grid to my existing website. I understand that "viewport" takes up the whole page. As i just want part of the page i should "panel".

I've followed this example to setup my grid in a clean mvc style. 

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

However this example uses "viewport". 

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

I've changed this to the following. 

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

here is my tasklist

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

});

This all works. if i use viewport

Upvotes: 4

Views: 5210

Answers (1)

Amol Katdare
Amol Katdare

Reputation: 6760

Change 'Ext.grid.Panel' to 'Ext.panel.Panel' (in launch and tasklist snippets) and it will work as you expect it to.

Upvotes: 4

Related Questions