在面板内创建内部组件

时间:2013-07-22 17:50:40

标签: javascript extjs panel containers

我在这里有工作代码:在容器内创建两个不同的面板:

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'AM',

    appFolder: 'app',

    controllers: [
        'Users'
    ],

      launch: function() {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            width: 900,
            height: 600,
            title: 'The Panel',
            layout: { 
            type: 'hbox'

            },
            items: [
                { xtype: 'panel', padding: 5, height: 500, width: '35%' },
                { xtype: 'userlist', padding: 5, height: 500, width: '65%' },
            ],
            listeners: {
                render: function() {
                  console.log('The Panel was rendered');
                }
            }
        });
    }

我想要做的是能够在左侧面板内部放置不同的组件(即组合框,输入框等)。我该怎么做?创建这些组件的最佳做法是什么? (一切都应该在app.js中吗?)

1 个答案:

答案 0 :(得分:1)

您正在寻找items配置属性。将其用作数组以添加子组件:

{
    xtype: 'panel',
    items: [
        { xtype: 'combo' }
    ]
}

您需要查看相关文档,如果您打算多使用ExtJS框架,那么您需要了解非常基本的信息:http://docs.sencha.com/extjs/4.2.1/#!/guide/components