Geek Answers Handbook

ExtJS: mesh height 100%

I have a structure of this 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] }] });

There are two buttons on the toolbar: COURSES and EXAMS. I use these buttons to show / hide one of the two grids so that only one is displayed. The code for the buttons I use looks something like this:

 { 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(); } }

The question arises: how can I display the grid to fill the entire screen (especially in height?). I think I need to put something in a button handler or listener on my lattice, but I don’t know what to put. Any clues?

+4
source share
2 answers

The 'fit' layout is designed to accommodate one panel only. Instead, use the 'card' layout to switch between two or more panels that should share the same space:

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

Then your button handlers become:

 { 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); } }

In addition, if the toolbar variable in your example contains a real instance of Ext.Toolbar, your layout as a whole can be improved with another view view definition:

 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 ] } });

However, if you still need a border layout in your viewport for other reasons, then the map panel, toolbar and everything can be parked in the center area, as shown at the top of the answer.

+3
source

The compliance layout supports only one element, otherwise it wants to work. You will need to wrap it all up.

 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] } ] } ] }] });
+3
source

More articles:


All Articles