2015-08-13 4 views
0

У меня есть макет TabPanel с макетом hbox внутри него. Панель 1 показывает вертикальную полосу прокрутки, но не охватывает все элементы. Как изменить размер всего содержимого в соответствии с изменением размера окна.Как сделать панели внутри TabPanel усаживаться/расширяться с размером окна

Ext.define('MyPanel', { 
     extend: 'Ext.panel.Panel',   
     layout: 'vbox', 
     initComponent: function() { 
      this.items = [ 
      { 
       xtype: 'panel', 
       items: [        
       Ext.create('AddressBar') 
       ] 
      }, 
      { 
       xtype: 'panel', 
       layout: 'hbox', 
       items: [        
       Ext.create('MyApp.view.Panel1'), 
       Ext.create('MyApp.view.Panel2') 
       ] 
      }      
      ]; 

      this.callParent(arguments); 
     } 
    }); 

// ПАНЕЛЬ 1 с выдачей полосы прокрутки

Ext.define('Panel1', { 
    extend: 'Ext.panel.Panel', 
    autoScroll: true, 
    minWidth: 250, 
    minHeight: 500, 
    maxHeight: 1000, 
    bodyStyle: 'padding: 10px', 
    initComponent: function() { 
     var thisPanel = this; 
     var items = [{  
      xtype: 'panel', 
      overflowY: 'auto', 
      items: [ 
      { 
       xtype: 'checkbox', 
       boxLabel: 'LodeData'     
      }, 
      { 
       xtype: 'checkboxgroup', 
       id: 'group', 
       labelWidth: 150, 
       overflowY: 'auto', 
       items: [ 
       { 
        name: 'check1', 
        checked: true 
       }, 
       { 
        name: 'check2', 
        checked: true 
       }, 
       { 
        name: 'check3', 
        checked: true 
       },     
       ]     
       layout: { 
        // align: 'stretch', 
        type: 'vbox', 
        pack: 'start' 
       } 
      }] 
     }   
     ]; 
     this.items = items; 
     this.callParent(); 
    } 

}); 
+0

Прежде чем я приду с ответом, я хочу, чтобы вы указали какую-то интересную информацию. Прежде всего, вы не должны использовать экземпляр на прототипе: https://sencha.guru/2015/07/29/instances-on-prototype-are-bad/ Во-вторых, вы - путь чрезмерно. Нет необходимости вставлять панель в панель на панели. Третье, что я хотел бы сказать, это то, что вы можете рассмотреть возможность использования формы вместо панели. В противном случае вы можете использовать контейнер вместо панели. Используйте наивысший возможный компонент в иерархии. Я думаю, что если вы уберете чрезмерные вещи, они упадут на свои места. – Tarabass

ответ

0

Спасибо @Tarabass за подробный ответ. Я буду учитывать это в следующий раз, когда я что-то создаю. Пока я решил проблему, используя flex

+0

Отлично! Рад, что ты это понял. – Tarabass

Смежные вопросы