PDA

View Full Version : Ensuring panel is visible in all resolution



webfriend13
5 Jun 2012, 8:22 PM
Hi All,

I have two grids. Each grid is placed in a separate panel. These panels are again been added to a panel. Please see the code below.



var p1 = new Ext.create('Ext.form.Panel', {
region: 'center',
layout: { type: 'fit', align: 'stretch' },
items: [gridOne]
}); var p2 = new Ext.create('Ext.form.Panel', {
region: 'south',
layout: { type: 'fit', align: 'stretch' },
items: [GridTwo]
});

var p3 = new Ext.create('Ext.form.Panel', {
layout: 'border',
region: 'center',
items: [p1, p2]
});
myTab.add(p3);



The problem:
In some of the monitors with low resolution, User is not able to see the panel2 (p2). The panel is not at all visible. What can i do to ensure this panel is visible all the time.

Farish
6 Jun 2012, 12:18 AM
add autoScroll: true to your panels to show scrollbars when there is insufficient space or small resolution. that way, the user can scroll to all parts of your app.

webfriend13
6 Jun 2012, 8:29 PM
Hi Farish,

Thank for quick reply but that option is not working :(

evant
6 Jun 2012, 9:06 PM
1) First off, not sure why you're using form panels everywhere
2) You're over-nesting, there's no need to put a grid in a single fit layout container

You want something like this:



Ext.onReady(function() {

Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'tabpanel',
items: {
xtype: 'container',
title: 'My Tab',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'My First Grid',
flex: 1,
xtype: 'grid',
// other grid options
}, {
title: 'My Second Grid',
flex: 1,
xtype: 'grid',
// other grid options
}]
}
}
})

});