Displaying components in Ext.form.Panel

Question

I have a custom component (a grid), that i want to add to a panel, and then have a strip of components on the top.

All the examples on the internet look like this :

var extPanel = Ext.create('Ext.form.Panel', {

    items: [{
        fieldLabel: 'Send To',
        name: 'to',
        anchor:'100%' 
    },{
        fieldLabel: 'Subject',
        name: 'subject',
        anchor: '100%' 
    }, 

I want to add my own custom component, called myGrid. I would expect some kind property called component passing in the items, but I have no idea, because there is no documentation on what this 'items' array can be.

var extPanel = Ext.create('Ext.form.Panel', {

    items: [{
        component : myGrid   
        anchor:'100%'  // anchor width by percentage
    }

Answer 1

您可以使用的xtype明确创建已定义components.You可以参考这个小提琴： 演示

Answer 2

I solved my problem by nesting items in items, like so :

        this.packageGrid = Ext.create('js.grid.PackageGrid', {
            xtype: 'packageGrid',
//            title: 'Packages',
            width: '100%'
        });

        var extPanel = Ext.create('Ext.Panel', {
            layout:'border',

            bodyPadding: 5,

            items:[{
                region:'center'
                ,layout:'fit'
                ,border:false,
                items:[
                    this.packageGrid
                ]
            },{
                region:'north'
                ,layout:'fit'
                ,border:false
                ,height:50
                ,collapsible:false,
                items:[
                    button
                ]
            }],

            width: '979px',
            height: '400px'

        });