在Ext.form.Panel中顯示組件

Question

我有一個要添加到面板的自定義組件（網格），然后在頂部有一個組件條。

互聯網上的所有示例如下所示：

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

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

我想添加自己的自定義組件，稱為myGrid。 我希望有一種稱為組件的屬性可以傳入項目中，但是我不知道，因為沒有關於“項目”數組可以是什么的文檔。

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

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

Answer 1

您可以使用的xtype明確創建已定義components.You可以參考這個小提琴： 演示

Answer 2

我通過在項目中嵌套項目解決了我的問題，如下所示：

        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'

        });