extjs gridpanel in einem panel nicht autoscroll oder resize

Question

Ich habe eine tabellarisch. In der Registerkarte habe ich ein Panel, das eine Symbolleiste und 3 Elemente enthält: [fieldset, ein gridpanel und ein anderes fieldset (oder einige Schaltflächen)]. Ich kann das Gridpanel nicht zur Anzeige der Bildlaufleiste bringen. Es funktioniert nur, wenn ich die maxheight/minheight des gridpanels einstelle.
Ich habe auch versucht, Gridpanel in einem Container zu wickeln. Kein Glück. In dem Beispiel verwende ich Fit-Layout. Ich habe versucht, "Anker" -Layout, und zugewiesen Anker: "100% 50%" zu Gridpanel, in der Hoffnung, dass es die Größe ändern würde, wenn ich die Größe des Browsers. Kein Glück.

Alternativ, wenn gridpanel das einzige Element in der Registerkarte ist, würde Autoscroll funktionieren. So erscheint es, wenn es in einem anderen Panel ist, Autoscroll/Resizing funktioniert nicht.

Habe ich hier etwas übersehen?

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

anzumerken, dass die Mutterplatte der Gridpanel fit Layout hat, es noch mehr als 1 Punkt hat (den Fieldset, das Gridpanel, und eine andere Fieldset). Ein fit Layout kann nur 1 Kind haben.

Auch das übergeordnete Element dieses fit Panel (das mit closable : false - die Registerkarte) hat keine Layoutdefinition.

Hier ist eine JsFiddle modified version of your code, die funktioniert.