Как я могу добавить объект, который добавлен с Ext.create в мой Viewport?

Question

Я недавно использую Ext JS, и мне нужно добавить кнопку в моем окне просмотра.

Я пытался добавить его как элемент, но он не работает, когда я нажимаю на него:

items: [ {        
  xtype: 'datepicker',
  width: 211

},
{        
  xtype: 'datepicker',
  width: 211                            
},
{
  xtype: 'button',
  text: 'Search',
  width: 211
 },                     
],

Итак, в официальной документации я нашел другой способ добавить его:

Ext.create('Ext.Button', {
    text     : 'Button',
    renderTo : Ext.getBody(),
    listeners: {
        click: function() {
            // this == the button, as we are in the local scope
            this.setText('I was clicked!');
        },
        mouseover: function() {
            // set a new config which says we moused over, if not already set
            if (!this.mousedOver) {
                this.mousedOver = true;
                alert('You moused over a button!\n\nI wont do this again.');
            }
        }
    }
});

Но я хочу это в западном регионе, который я определил в своем окне просмотра, и я понятия не имею, как этого добиться, так как я совершенно новый в Ext JS.

Мой код:

function init() {
    Ext.application({
        name: 'MyApp',

        launch: function() {
            Ext.create('Ext.data.Store', {
                storeId:'prices',
                fields:['name', 'priceNight', 'totalPrice', 'Check-in', 'Check-out'],
                data:{'items':[

                ]},
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });

            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    title: 'West',
                    region: 'west',
                    margins: '0 5 0 5',
                    flex: .3,
                    collapsible: true,
                    split: true,
                    titleCollapse: true,
                    items: [
                        {        
                            xtype: 'datepicker',
                            width: 211

                        },
                        {        
                            xtype: 'datepicker',
                            width: 211                          
                        },
                        {
                            //I want the button here.
                        },                      
                    ],              
                }, {
                    title: 'Center',
                    region: 'center',
                    collapsible: false,
                    items: {
                        // I want to add it just there  
                        xtype: 'grid',
                        store: Ext.data.StoreManager.lookup('prices'),
                        columns: [

                        ],
                    }
                }]
            });
        }

    });
}

Мне нужна кнопка здесь:

Есть идеи?

Заранее спасибо!

Answer 1

Я только что понял, как это сделать!Я собираюсь опубликовать здесь то, что я сделал, поэтому, может быть, это будет полезно для некоторых людей:

Это просто, если вызвать его с помощью переменной.

Код кнопки:

var button = Ext.create('Ext.Button', {
    text     : 'Button',
    renderTo : Ext.getBody(),
    listeners: {
        click: function() {
            // this == the button, as we are in the local scope
            this.setText('I was clicked!');
        },
        mouseover: function() {
            // set a new config which says we moused over, if not already set
            if (!this.mousedOver) {
                this.mousedOver = true;
                alert('You moused over a button!\n\nI wont do this again.');
            }
        }
    }
});

В вашем окне просмотра вы просто должны добавить его как элемент:

...
items: [
  {
    items: button //button is the variable that we defined when we created the button
  }
]
...

Окончательный результат:

Я надеюсь, что это поможет кому-то, у кого тот же вопрос, что и у меня:)