Extjs gridpanel ne se développe pas horizontalement dans un tabPanel

Question

Chacun de mes trois panneaux de grille Extjs ne s'étend pas horizontalement dans un tabPanel.

Les propriétés de chaque grille:

id: grid_id, 
    ds: ds, 
    cm: cm, 
    loadMask:  true, 
    view:   grouping_view, 
    plugins:  [expander, filters], 
    stateId:  which + '-grid-stateId', 
    stateful:  true, 
    stateEvents: ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'], 
    selModel:  checkbox, 
    // height:  400, 
    width:   GRID_WIDTH, 
    defaults:  {autoHeight: true}, 
    autoHeight: true, 
    collapsible: false, 
    animCollapse: false, 
    layout:  'fit', 

propriétés de TabPanel:

id:   'tab_panel', 
    renderTo: 'tabs', 
    activeTab: 0, 
    enableTabScroll: true, 
    defaults: {autoScroll:true, authHeight:true}, 
    plugins: new Ext.ux.TabCloseMenu(), 
    width:  GRID_WIDTH + 2, 
    autoHeight: true, 
    items: [  // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them 
    owned_grid, 
    managed_grid, 
    subscribed_grid 
    ], 

Answer 1

mise en page n'est pas une propriété valide pour une GridPanel.

Essayez d'utiliser:

viewConfig: { forceFit: true } 

au lieu

Answer 2

Il est la mise en page du conteneur que vous devez définir, à savoir:

var tp = new Ext.TabPanel({ 
    items: [{ 
     title: 'First tab', 
     layout: 'fit', 
     items: new Ext.GridPanel({ title: "Grid panel" }) 
    },{ 
     title: 'Second tab' 
    }] 
}); 

mises en page Fit signifie qu'il n'y a qu'un un élément dans le conteneur et il devrait s'agrandir pour prendre tout l'espace disponible. Supprimer toutes les références explicites à la largeur, autoWidth, etc

Answer 3

Je cherchais sur les forums pour un moyen de redimensionner automatiquement ma grille, mais n'a pas trouvé la solution, rien n'a fonctionné ... et puis j'ai lu la documentation Ext Js GridPanel : "

une grille nécessite une largeur dans laquelle pour faire défiler ses colonnes, et une hauteur qui pour faire défiler ses lignes Ces dimensions peuvent être soit mis en explicitement par la hauteur et options de configuration largeur ou. implicitement défini en utilisant la grille comme chil d élément d'un conteneur qui aura un gestionnaire de disposition fournir le dimensionnement de ses éléments enfants (par exemple le conteneur de la grille peut spécifier mise en page: 'fit'). "

..so Je viens de mettre pas la disposition de la grille, mais la mise en page du parent de grilles à quelque valeur que je veux (dans mon cas, le conteneur parent détient d'autres choses que seule la grille, donc je mis la mise en page: ' ancre ', puis en définissant l'ancre:' 100% 100% 'Je fais en sorte que la grille se dilate autant que possible.

et maintenant je l'AI TRAVAILLER: D yayyyy!