在面板内创建内部组件答案

【问题标题】：Creating inner components inside a panel在面板内创建内部组件
【发布时间】：2013-07-21 13:45:33
【问题描述】：

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

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 中吗？）

【问题讨论】：

标签： javascript extjs panel containers

【解决方案1】：

您正在寻找 items 配置属性。使用它作为数组添加子组件：

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

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

【讨论】：

我想使用它，但我没有正确的语法（extjs 的新手，所以我很感激）。
但是我的整个应用程序中的每个组件都应该放入 app.js 吗？这似乎不是一个好主意。
绝对不是。您真的应该从 Sencha 在此处提供的“入门”指南开始：docs.sencha.com/extjs/4.2.1/#!/guide/getting_started 然后按照所有这些指南进行操作。您最终会得到一个类似于任何 OOP 包系统的文件结构。