показать окно в 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, создайте файл с определением класса в папке просмотра.

Таким образом, в обработчик щелчка у вас будет просто:

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

Answer 2

В настоящий момент нажмите событие, просто создайте объект окна, не показывая его. Для показа вашего окна после нажатия «show-btn» вам нужно просто вызвать метод show() для объекта window. Поэтому постарайтесь разместить win.show() позапрошлые линиями, как это:

... 
       me.callParent(arguments); 
      } 

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