Нужен пример вставки простой таблицы в вьюпорт в качестве xtype

[Allan Stark]

Нужен пример вставки простой таблицы в вьюпорт в качестве xtype

В руководстве сказано, что в качестве xtype может быть использован любой компонент EXT JS, дословно:
The key point to remember is that child items may be any class within the Component class hierarchy. We could easily be using a grid, toolbar, or button

Попытался сообразить что-то вроде этого (но выдает ошибку):

xtype: 'GridPanel',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
  {header: 'Name',  dataIndex: 'name'},
  {header: 'Email', dataIndex: 'email', flex:1},
  {header: 'Phone', dataIndex: 'phone'}
],
width: 400

При запихивании в регион вьюпорта контейнера, присвоения ему id, создания экземпляра объекта таблицы и рендеринга его в контейнер - работает...

[pauluss]

xtype: 'grid'

[pauluss]

контейнер создавать это лишнее, можно прямо грид запихнуть.
Вот пример:

Ext.onReady(function(){
viewport = Ext.create('Ext.Viewport', {
                id: 'layout',
                layout:'border',
                items:[
                    {
                        region:'center',
                        html:'smth'
                    },
                    getGrid()
                ]
           });
});

function getGrid(){

var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am']
        ];

var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'company'},
               {name: 'price',      type: 'float'},
               {name: 'change',     type: 'float'},
               {name: 'pctChange',  type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ],
            data: myData
        });

var grid = Ext.create('Ext.grid.Panel', {
            region: 'east',
            hideCollapseTool: true,
            store: store,
            columnLines: true,
            columns: [
                {
                    text     : 'Company',
                    flex     : 1,
                    sortable : false,
                    dataIndex: 'company'
                },
                {
                    text     : 'Price',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'price'
                },
                {
                    text     : 'Change',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'change'
                },
                {
                    text     : '% Change',
                    width    : 75,
                    sortable : true,
                    dataIndex: 'pctChange'
                },
                {
                    text     : 'Last Updated',
                    width    : 85,
                    sortable : true,
                    dataIndex: 'lastChange'
                }
            ],
            title: 'Array Grid (Click header to collapse)',
            viewConfig: {
                stripeRows: true
            }
        });
return grid;
}

[Allan Stark]

xtype: 'grid'

А можно где-то посмотреть список допустимых xtypes ? Или они соответствуют наименованиям пакетов ?
В документации о том - ни слова, а при попытке назвать по имени компонента - ошибка.

[pauluss]

Вот тут есть: http://docs.sencha.com/ext-js/4-0/#/api/Ext.Component
xtype пишется возле полного имени класса вверху.
Вот например грид (обратите внимание на верхнюю часть, где полное имя класса ): http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.Panel

[Allan Stark]

Ок, пасиба. Не обратил внимание...