在Ext.form.Panel中显示组件

时间:2014-06-24 14:05:06

标签: javascript extjs

我有一个自定义组件(网格),我想添加到面板,然后在顶部有一条组件。

互联网上的所有示例都是这样的:

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

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

我想添加自己的自定义组件,名为myGrid。我希望在项目中传递一些名为 component 的属性,但我不知道,因为没有关于这个'items'数组的文档。

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

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

2 个答案:

答案 0 :(得分:1)

您可以使用xtype显式创建已定义的组件。您可以参考这个小提琴:Demo

答案 1 :(得分:0)

我通过在项目中嵌套项目解决了我的问题,如下所示:

        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'

        });