在EXT JS中顯示窗口

Question

var win,
        button = Ext.getCmp('show-btn');

    button.on('click', function(){
            win = Ext.define('MyApp.view.LeftRightWIndow', {
                extend: 'Ext.window.Window',

                height: 368,
                width: 546,
                title: 'My Window',

                initComponent: function() {
                    var me = this;

                    Ext.applyIf(me, {
                        items: [
                            {
                                xtype: 'container',
                                height: 193,
                                width: 515,
                                layout: {
                                    align: 'center',
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'container',
                                        flex: 1,
                                        margins: '',
                                        height: 135,
                                        padding: '10 10 10 10',
                                        width: 114,
                                        layout: {
                                            type: 'column'
                                        },
                                        items: [
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            },
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'container',
                                        flex: 1,
                                        margins: '',
                                        height: 135,
                                        padding: '10 10 10 10',
                                        width: 114,
                                        layout: {
                                            type: 'column'
                                        },
                                        items: [
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            },
                                            {
                                                xtype: 'textfield',
                                                padding: '0 0 10 0',
                                                width: 233,
                                                fieldLabel: 'Label'
                                            }
                                        ]
                                    }
                                ]
                            }
                        ],
                        dockedItems: [
                            {
                                xtype: 'toolbar',
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'tbtext',
                                        autoRender: true,
                                        cls: 'save',
                                        height: 26,
                                        padding: '5 5 5 5',
                                        width: 43,
                                        text: 'Save'
                                    },
                                    {
                                        xtype: 'tbseparator'
                                    },
                                    {
                                        xtype: 'tbtext',
                                        autoRender: true,
                                        cls: 'edit',
                                        height: 26,
                                        padding: '5 5 5 5',
                                        width: 43,
                                        text: 'Edit'
                                    }
                                ]
                            }
                        ]
                    });

                    me.callParent(arguments);
                }

            });
  });

按下show-btn時如何顯示窗口？
此代碼是使用Sencha Articheh創建的。 任何想法？

Answer 1

使用Ext.define()方法可以定義類，但不能創建該類的實例。 為了創建類實例，您必須使用Ext.create()方法。

另外，我建議將類定義移至單擊處理程序之外以分離文件。 如果使用的是Sencha architect創建的標准應用程序結構，請在視圖文件夾中創建具有類定義的文件。

因此，在點擊處理程序中，您將只有：

// create instance of MyApp.view.LeftRightWIndow class
win = Ext.create('MyApp.view.LeftRightWIndow');
// display window
win.show();

Answer 2

目前，單擊事件僅創建窗口對象而不顯示它。 要在單擊“ show-btn”后顯示窗口，只需調用window對象的show（）方法。 因此，嘗試將win.show()放在最后一行之前，如下所示：

...
                me.callParent(arguments);
            }

        });
    win.show();
});