PDA

View Full Version : contents of panel/portlet not resizing in different resolution of browsers



meenEXT
30 Oct 2009, 4:46 AM
Hi
I am facing a problem where I have BorderLayout and in "center" region I have panel (main Area) .this main area contains two rows of panels in a "column layout " .The page comes out nicely on a particular resolution but badly disfigures on another resolution/browser .
My problem is :
a) How to make the contents of these panels adjust /resize themselves on different resolution .
b) Also how to make the contents resize on expansion of a east-panel (in border layout a eastern panel exists which is collapsible)

I want to add that I tried above page in a portal format also where each of the above panel acted as portlet ,but then also same problem persisted .

I am sending the code here


function buildMainArea() {
var pnlCounter = buildCounterArea();
var pnlProperties = buildProperties();

var pnlMain = new Ext.Panel({
region : 'center',
bodyStyle:'padding:20px',
autoScroll:true,
border : false,
items : [ pnlCounter,
insertSeperatorPanel(),
pnlProperties,
insertSeperatorPanel()
]
});

return pnlMain;
}

function buildProperties() {
var pnlProperty1 = buildProperty1();
var pnlProperty2 = buildProperty2();
var pnlProperty3 = buildProperty3();
var pnlProperty4 = buildProperty4();
var pnlProperty5 = buildProperty5();
var pnlProperty6 = buildProperty6();

return new Ext.Panel({
layout : 'column',
border : false,
items : [ {
columnWidth : 0.5,
bodyStyle:'padding-right:5px',
border : false,
items : [ pnlProperty1, insertSeperatorPanel(),
pnlProperty2, insertSeperatorPanel(),
pnlProperty4
]
}, {
columnWidth : 0.5,
bodyStyle:'padding-left:5px',
border : false,
items : [ pnlProperty6, insertSeperatorPanel(),
pnlProperty3, insertSeperatorPanel(),
pnlProperty5
]
} ]
});
}

function buildCounterArea() {
return new Ext.Panel({
border : false,
items : [ new Ext.Panel({
border : true,
frame : true,
anchor : 'right',
cls : 'alignRight',
width : 80,
bodyStyle : 'padding:3px',
contentEl : 'countArea'
}) ]
});
}

function buildProperty1() {
var rg = new Ext.form.RadioGroup ({
layout : 'fit',
columns: 3,
vertical: true,
items: [
{boxLabel: 'A-B', name: 'rb-prop1'},
{boxLabel: 'C-D', name: 'rb-prop1'},
{boxLabel: 'E-F', name: 'rb-prop1'},
{boxLabel: 'AC-AD', name: 'rb-prop1'}
]
});

var fs = buildFieldSet('Sub 1', rg);
fs.height = Ext.isIE ? 180 : 190;
var pnlProperty = buildPanelWithEnableCheck('Property 1', fs);
pnlProperty.height = 255;

return pnlProperty;
}

function buildProperty2() {
var cmbOptions = [['123'], ['456']];
var cmb = buildSampleComboBox(cmbOptions);

var itms1 = new Ext.form.RadioGroup ({
columns : 3,
items : [
{boxLabel: 'X', name: 'rb-prop2'},
{boxLabel: 'Y', name: 'rb-prop2'},

]
});

var flds1 = buildFieldSet('Sub 1', itms1);
flds1.height = 60;
var flds2 = buildFieldSet('Sub 2', cmb);
flds2.height = 60;

if (Ext.isIE) {
flds1.width = 280;
flds1.height = 50;
flds2.width = 280;
flds2.height = 50;
}

var pnl = new Ext.Panel ({
layout : 'column',
items : [ {
columnWidth : 0.5,
bodyStyle:'padding-right:5px',
items : flds1
}, {
columnWidth : 0.5,
bodyStyle:'padding-left:5px',
items : flds2
} ]
});

var pnlProperty = buildPanelWithEnableCheck('Property 2', pnl);
pnlProperty.height = 130;
return pnlProperty;
}

function buildProperty3() {
var cmb1 = buildSampleComboBoxWithLabel([['A'], ['B']], 'Pqstruv');
var cmb2 = buildSampleComboBoxWithLabel([['C'], ['D']], 'abcdefg');

var flds1 = buildFieldSet('Sub 1', cmb1);
var flds2 = buildFieldSet('Sub 2', cmb2);

if (Ext.isIE) {
flds1.width = 278;
flds1.height = 50;
flds2.width = 278;
flds2.height = 50;
}

var pnl = new Ext.Panel({
layout : 'column',
bodyStyle:'padding:3px',
items : [ {
columnWidth : 0.5,
bodyStyle:'padding-right:5px',
items : [ flds1 ]
}, {
columnWidth : 0.5,
bodyStyle:'padding-left:5px',
items : [ flds2 ]
} ]
});

var pnlProperty = buildPanelWithEnableCheck('Property 3', pnl);
pnlProperty.height = 130;

return pnlProperty;
}

function buildProperty4() {
var rb = new Ext.form.RadioGroup({
columns: 4,
vertical: true,
items: [
{boxLabel: 'Larem', name: 'rb-prop4'},
{boxLabel: 'ipsum', name: 'rb-prop4'},


]
});

var fs = buildFieldSet('Sub 1', rb);
var pnlProperty = buildPanelWithEnableCheck('Property 4', fs);
return pnlProperty;
}

function buildProperty5() {
var cg = new Ext.form.CheckboxGroup({
columns: 4,
vertical: true,
items: [
{boxLabel: 'a1b1', name: 'chk-prop5'},
{boxLabel: 'a2b2', name: 'chk-prop5'},

]
});

var fs = buildFieldSet('Sub 1', cg);
var pnlProperty = buildPanelWithEnableCheck('Property 5', fs);
return pnlProperty;
}

function buildProperty6() {
var availableItems = [['Abc'], ['Abc def'], ['Xyz cd'], ['Lkj qwe'], ['Yuhm'],
['qtb'], ['hrhrh'], ['agahgah']];

var pnl = buildMultiSelectListWithSearch(availableItems);

var fs = buildFieldSet('Sub 1', pnl);
var pnlProperty = buildPanelWithEnableCheck('Property 6', fs);
pnlProperty.height = 255;
return pnlProperty;
}

Pls help me out of this basic problem as everybody would have met the situation where page behaving differently on diff. browsers ,
Thanks in advance !

Jaitsu
30 Oct 2009, 5:34 AM
try specifying


layout: 'fit'

on your center region