ExtJS: grille 100% de la hauteur

Question

I ont une structure de ce type (Ext 3.3.1):

var page = new Ext.Viewport({ 
    layout: 'border', 
    anchor:'100% 100%', 
    renderTo: Ext.getBody(), 
    items: [{ 
     region: 'north', 
     height:'auto', 
     items: [toolbar] 
    },{ 
     region: 'center', 
     layout:'fit', 
     items: [gridCourses,gridExams] 
    }] 
}); 

Dans la barre d'outils, I ont deux boutons, des cours et des examens. J'utilise ces boutons pour afficher/masquer l'une des deux grilles, de sorte qu'une seule soit visible à la fois. Le code des boutons I utilise quelque chose comme ceci:

{ 
    text: 'Courses', 
    iconCls: 'show-courses', 
    handler: function(){ 
     gridCourses.store.reload(); 
     gridCourses.show(); 
     gridExams.hide(); 
    } 
},{ 
    text: 'Exams', 
    iconCls: 'show-exams', 
    handler: function(){ 
     gridExams.store.reload(); 
     gridCourses.hide(); 
     gridExams.show(); 
    } 
} 

La question est: (surtout en hauteur) comment puis-je avoir la grille affichée pour remplir l'écran. Je pense que je dois mettre quelque chose dans le gestionnaire des boutons ou un auditeur à mes grilles, mais je ne sais pas quoi mettre. Des indices?

Answer 1

La mise en page 'd'ajustement' sert uniquement à placer un seul panneau. Utilisez la disposition de « carte » au lieu de basculer entre deux ou plusieurs panneaux qui doivent partager le même espace:

{ 
    region: 'center', 
    layout: 'card', 
    // 0 here means the zeroth element of the items array. 
    activeItem: 0, 
    items: [ 
     gridCourses, 
     gridExams 
    ] 
} 

Vos gestionnaires bouton deviennent alors:

{ 
    text: 'Courses', 
    iconCls: 'show-courses', 
    handler: function() { 
     gridCourses.getStore().reload(); 
     gridCourses.ownerCt.getLayout().setActiveItem(gridCourses); 
    } 
}, 
{ 
    text: 'Exams', 
    iconCls: 'show-exams', 
    handler: function() { 
     gridExams.getStore().reload(); 
     gridExams.ownerCt.getLayout().setActiveItem(gridExams); 
    } 
} 

En outre, en supposant que la barre d'outils variables dans votre exemple contient une véritable instance de Ext.Toolbar, votre mise en page pourrait en général être améliorée avec une définition de viewport différente:

new Ext.Viewport({ 
    layout: 'fit', 
    items: { 
     xtype: 'panel', 
     layout: 'card', 
     activeItem: 0, 
     tbar: [ 
      { 
       text: 'Courses', 
       iconCls: 'show-courses', 
       handler: function() { 
        gridCourses.getStore().reload(); 
        gridCourses.ownerCt.getLayout().setActiveItem(gridCourses); 
       } 
      }, 
      { 
       text: 'Exams', 
       iconCls: 'show-exams', 
       handler: function() { 
        gridExams.getStore().reload(); 
        gridExams.ownerCt.getLayout().setActiveItem(gridExams); 
       } 
      } 
     ], 
     items: [ 
      gridCourses, 
      gridExams 
     ] 
    } 
}); 

Cela dit, si vous avez encore besoin d'une disposition de bordure sur votre fenêtre d'affichage pour d'autres raisons, le panneau de carte, la barre d'outils et tout, peuvent être parqués dans la région centrale comme indiqué en haut de la réponse.

Answer 2

La mise en forme ne prend en charge qu'un seul élément, sinon il a besoin de travailler. Vous devrez tout emballer.

var page = new Ext.Viewport({ 
    layout: 'border', 
    // anchor:'100% 100%', <- I don't think you need this, cause the Viewport is alsways bound to the fullscreen 
    // renderTo: Ext.getBody(), <- Same here. The viewport is alsways rendered to the body 
    items: [{ 
     region: 'north', 
     height:'auto', 
     items: [toolbar] 
    },{ 
     region: 'center', 
     layout:'fit', 
     items: [ 
      { 
       xtype: 'container', 
       items: [ 
        { 
         xtype: 'container' 
         layout: 'fit', 
         items: [Grid1] 
        }, 
        { 
         xtype: 'container' 
         layout: 'fit', 
         items: [Grid1] 
        } 
       ] 
      } 
     ] 
    }] 
});