javascript - 在 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 架构师创建的标准应用程序结构，请在 View 文件夹中创建具有类定义的文件。

所以在点击处理程序中你将只有:

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