extjs gridpanel wewnątrz panelu nie autoscroll lub zmień rozmiar

Question

Mam tabpanel. Na karcie mam panel zawierający pasek narzędzi i 3 elementy: [zestaw pól, panel gridowy i inny zestaw pól (lub niektóre przyciski)]. Nie mogę wyświetlić panelu grid pokazującego pasek przewijania. Działa tylko wtedy, gdy ustawię maxheight/minheight gridpanel.
Próbowałem również owijać gridpanel wewnątrz kontenera. Brak szczęścia. W tym przykładzie używam układu dopasowania. Próbowałem układu "kotwicy" i przypisałem kotwicę: "100% 50%" do gridpanelu, mając nadzieję, że zmieni się rozmiar, gdy zmieniam rozmiar przeglądarki. Brak szczęścia.

Alternatywnie, jeśli gridpanel jest TYLKO pozycją w zakładce, funkcja automatycznego przewijania działałaby. Tak więc pojawia się, gdy znajduje się w innym panelu, autoskalowanie/zmiana rozmiaru nie działa.

Czy coś mi tu brakowało?

Ext.application({ 
    name: 'MyApp', 
    launch: function() { 

     // create the data store 
     var d = ['company', 100]; 
     var myData = []; 
     for (var i = 0; i < 50; i++) { 
      myData[i] = d; 
     } 
     var store = Ext.create('Ext.data.ArrayStore', { 
      fields: [{ 
       name: 'company' 
      }, { 
       name: 'price', 
       type: 'float' 
      }], 
      data: myData 
     }); 

     Ext.create("Ext.container.Viewport", { 
      layout: { 
       type: 'border' 
      }, 
      items: [{ 
       xtype: 'toolbar', 
       id: 'headerbar', 
       region: 'north', 
       height: 30 
      }, { 
       xtype: 'toolbar', 
       id: 'menubar', 
       region: 'north', 
       height: 30 
      }, { 
       xtype: 'tabpanel', 
       itemId: 'maintabpanel', 
       activeTab: 0, 
       region: 'center', 
       plain: true, 
       margins: '5 5 5 5', 
       layout: 'fit', 
       items: [{ 
        closable: false, 
        title: 'Tab', 
        margins: '0 0 0 0', 
        items: [{ 
         xtype: 'panel', 
         title: 'Panel', 
         layout: 'fit', 
         tools: [{ 
          type: 'help', 
          tooltip: 'Help' 
         }, { 
          type: 'close', 
          tooltip: 'Close' 
         }], 
         items: [{ 
          xtype: 'fieldset', 
          title: 'Field Set', 
          layout: 'hbox', 
          items: [{ 
           xtype: 'textfield', 
           fieldLabel: 'Input' 
          }] 
         }, { 
          xtype: 'gridpanel', 
          autoScroll: true, 
          store: store, 
          columns: [{ 
           text: 'Company', 
           flex: 1, 
           sortable: true, 
           dataIndex: 'company' 
          }, { 
           text: 'Price', 
           flex: 1, 
           sortable: true, 
           dataIndex: 'price' 
          }], 
          viewConfig: { 
           autoFit: true 
          } 
         }, { 
          xtype: 'fieldset', 
          title: 'Field Set 2', 
          layout: 'hbox', 
          items: [{ 
           xtype: 'textfield', 
           fieldLabel: 'Output' 
          }] 
         }] 

        }] 
       }] 
      }, { 
       xtype: 'box', 
       id: 'footer', 
       region: 'south', 
       html: '<h1> Copyright 2012</h1>', 
       height: 30 
      }] 
     }); 
    } 
}); 

Answer 1

Zauważ, że panel dominującą gridpanel ma fit układ, ale ma więcej niż 1 produkt (ten zestaw pól, na gridpanel, a inny zestaw pól). Układ fit może mieć tylko jedno dziecko.

Również rodzic tego panelu fit (ten z closable : false - karta) nie ma definicji układu.

Oto działa JsFiddle modified version of your code.