Отображение сетки внутри видового экрана на щелчке - Ext JS

Question

Что я пытаюсь сделать, это добавить сетку, которая является шириной панели, созданной в моем app.js 65%

Ext.application({ 
    name: 'AM', 
    appFolder: 'app', 
    controllers: [ 'Metadata', 'Print', 'Export' ], 
    launch: function() { 
     var types = Ext.create('AM.store.Type'); 
     Ext.create('Ext.panel.Panel', { 
      renderTo: Ext.getBody(), 
      width: 1000, 
      height: 600, 
      title: '<center>MetaCenter</center>', 
      layout: 'hbox', 
      style: { marginLeft: 'auto', marginRight: 'auto' }, 
      items: [ 
       { xtype: 'panel', padding: 5, height: 500, width: '35%', 
        items: [ 
              ... 

         { xtype: 'button', text: 'Search', 
          listeners: { 
           click: function() { 
            console.log('Search Button clicked'); 
            //Code to create panel view? 
          } 
         }, 
        ], 

       } 

Я не явно создавая область просмотра, поэтому я не верю, что могу сделать функцию viewport.add ('grid'), но я не уверен. Есть идеи?

Answer 1

Вы можете добавить сетку при создании контейнера с hidden: true, а затем показать его, когда кнопка нажата:

{ 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    }, 
    items: [ 
     { 
      xtype: 'panel', 
      flex: 0.35, 
      items: [ 
       ... 
       { 
        xtype: 'button', 
        text: 'Search', 
        listeners: { 
         click: function(btn) { 
          btn.up('panel').nextSibling().show(); 
         } 
        } 
       } 
      ] 
     }, 
     { 
      xtype: 'grid', 
      flex: 0.65, 
      hidden: true, 
      ... 
     } 
    ] 
}