Geek Answers Handbook

Using a panel instead of viewport in extjs

I would like to add a grid to my existing website. I understand that "viewport" spans the entire page. Since I just want a part of the page, I have to have a "panel".

I followed this example to set up the grid in a pure 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 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 task list

 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: 'Ymd' }, { header: 'Id', dataIndex: 'Id', flex: 1 } ]; this.callParent(arguments); } });

It all works. if i use viewport

+4
source share
1 answer

Change 'Ext.grid.Panel' to 'Ext.panel.Panel' (in the startup and task list snippets) and it will work as you expect.

+4
source

More articles:


All Articles