如何将使用 Ext.create 添加的对象添加到我的视口中？

Question

我是 Ext JS 的新手，我需要在我的视口中添加一个按钮。

我试过将它添加为一个项目，但是当我点击它时它不起作用：

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

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

那么，在官方documentation我找到了另一种添加方式：

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

我刚刚知道怎么做了！我将post 在这里做我所做的，也许它会对某些人有所帮助：

很简单，用一个变量调用就可以了。

按钮代码：

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
  }
]
...

最终结果：

我希望这对和我有同样问题的人有所帮助:)

如何将使用 Ext.create 添加的对象添加到我的视口中？

How can I add an object that is added with Ext.create to my Viewport?

extjs

extjs4.2