在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);
                }

            });
  });

how to show the Window when press the show-btn ?
this code im using Sencha Articheh to create. any idea?

Answer 1

With Ext.define() method you define class, but not creating instance of the class. For creating class instance you have to use Ext.create() method.

Also I recommend to move class definition outside click handler to separate file. If you are using standard application structure created by Sencha architect, create file with class definition in view folder.

So in click handler you will have just:

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

Answer 2

On the present moment click event just create window object without displaying it. For showing your window after clicking on 'show-btn', you need just to invoke show() method of window object. So try to place win.show() before last line, like this:

...
                me.callParent(arguments);
            }

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