javascript - パネル内に内部コンポーネントを作成する

Question

ここに作業コードがあります:コンテナ内に2つの異なるパネルを作成します:

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 に入れる必要がありますか?)