PDA

View Full Version : Howto properly remove contentpanel overflow.



wajatimur
22 Apr 2007, 10:56 AM
Hi all,

Could anyone please explain to me howto remove those overflow. These UI were build
on two Region(south+center) by BorderLayout.

1. Center using ContentPanel to show the dynamic form.
2. South also using ContentPanel but still empty.




<div id='page-reginfo' style="width:auto;height:400px">
<div id="panel-info" style="padding:5px">
<div id="form-info"></div>
</div>
<div id="panel-wealth" style="padding:5px">
<div id="form-wealth"></div>
</div>
<div id="panel-income" style="padding:5px">
<div id="form-income"></div>
</div>
<div id="panel-tool" style="background-color:#E0EEFA"></div>
</div>


regNode = Ext.DomQuery.selectNode('[@id="page-reginfo"]');
var layoutRegInfo = new Ext.BorderLayout(regNode, {
south: {
initialSize: 70,
titlebar: false
},
center: {
titlebar: true,
autoScroll:true
}
});
layoutRegInfo.beginUpdate();
layoutRegInfo.add('south', new Ext.ContentPanel('panel-tool', {fitToFrame:true}));
layoutRegInfo.add('center', new Ext.ContentPanel('panel-info', {
title: 'Maklumat Peribadi',
fitToFrame:true,
fitContainer:true
})
);
layoutRegInfo.add('center', new Ext.ContentPanel('panel-income', {
title: 'Maklumat Pendapatan',
fitToFrame:true,
fitContainer:true
})
);
layoutRegInfo.add('center', new Ext.ContentPanel('panel-wealth', {
title: 'Maklumat Harta',
fitToFrame:true,
fitContainer:true
})
);
layoutRegInfo.endUpdate();
layoutRegInfo.getRegion('center').showPanel('panel-info');
http://img475.imageshack.us/img475/9697/screenshotof2.png
(http://imajr.com/Screenshot_16412)

wajatimur
22 Apr 2007, 12:18 PM
Jack please help me!

KimH
23 Apr 2007, 12:01 AM
What's your HTML and/or JavaScript like for creating the fields and labels? Do you set the field width on any of these fields?

wajatimur
23 Apr 2007, 9:24 AM
Below is how i create my form



var frmIncome = new Ext.form.Form({
url: 'mods.php',
labelAlign: 'right'
});

frmIncome.column(
{width:300},
new Ext.form.ComboBox({
fieldLabel: 'Status',
hiddenName:'kstatus',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'kstatus'],
data : sppk.fdata.states
}),
displayField:'kstatus',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Pilih Status...',
selectOnFocus:true,
width:150
}),
new Ext.form.TextField({
fieldLabel: 'No. KP',
name: 'myid',
width:180
}),
new Ext.form.ComboBox({
fieldLabel: 'Warna KP',
hiddenName:'idcolor',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'idcolor'],
data : sppk.fdata.states
}),
displayField:'idcolor',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Pilih Warna KP...',
selectOnFocus:true,
width:150
}),
new Ext.form.TextField({
fieldLabel: 'Nama 1',
name: 'first',
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Nama 2',
name: 'first',
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Tempat Lahir',
name: 'birthplace',
width:150
}),
new Ext.form.DateField({
fieldLabel: 'Tarikh Lahir',
name: 'datebirth',
width:100
}),
new Ext.form.ComboBox({
fieldLabel: 'Jenis Pekerjaan',
hiddenName:'catjob',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'catjob'],
data : sppk.fdata.states
}),
displayField:'catjob',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Pilih Jenis Pekerjaan...',
selectOnFocus:true,
width:150
})
);

frmIncome.column(
{width:280},
new Ext.form.TextField({
fieldLabel: 'Nama 1',
name: 'first',
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Nama 2',
name: 'first',
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Jalan',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Lokasi',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Poskod',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Bandar',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Telefon',
name: 'first',
width:175
})
);
frmIncome.column(
{width:280},
new Ext.form.TextField({
fieldLabel: 'Pendapatan',
name: 'first',
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Belanja',
name: 'first',
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Jumlah Pinjaman',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Tarikh Lulus',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Bantuan',
name: 'first',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Bilangan Tanggungan',
name: 'first',
width:175
}),
new Ext.form.DateField({
fieldLabel: 'Tarikh Mula Terima Bantuan',
name: 'first',
width:100
})
);

frmIncome.render('form-income');

KimH
23 Apr 2007, 11:57 AM
It looks like you have a margin or padding of around 8 pixels left of the first column!? If you use Firebug in Firefox and click "Inspect" and then move over "Jenis Pekerjaan" does the container then go all the way to the right border? I suspect that it has a padding/margin next to it of 8 pixels (or the like).

wajatimur
29 Apr 2007, 10:41 AM
Problem solved, i remove the 'fitToFrame' and 'fitToContainer'.

rich weiskopf
28 May 2007, 6:17 AM
I've been working with the BorderLayout and center region, but needed to add fitContainer to get closer to the results I want.

Using release 1.0.1a on Windows XP professional and FF 2.0.0.3

Have a BorderLayout based on the \examples\complex.html example.
Removed south and east regions.
Incorporated the menu (north ) and tree (west) examples into it.
When I select an item from the tree, a tab is created and added to the center content panel

The body is:
<div id= "container">
<div id="center1" class="x-layout-inactive-content">
<div id="editorTabPanel" >
</div>
</div>
</div>

The center region is specified as:

center: {
titlebar: false,
autoScroll: true,
floatable: false,
closeOnTab: false
}

Then:

var editorContentPanel = new Ext.ContentPanel('center1', { closable: false, fitContainer: true});
layout.add('center', editorContentPanel);

jtabsA = new Ext.TabPanel('editorTabPanel', {
resizeTabs: true,
minTabWidth: 20,
preferredTabWidth: 150
});

The code to create and add the tab:
mainTab = jtabsA.addTab('anID', 'ALabel','',true);
jtabsA.activate('anID');


Also, set all padding references to the center content panel to 0 in the .css elements.

The results:
When the BorderLayout is initially displayed, the center content panel is just a little bit bigger than expected. A vertical scroll bar appears, but it seems it is only there to compensate for the lines around the center content panel itself. The scrollable amount is about the width of one of the top or bottom lines.

However, when I add a tab into jtabsA, an additional scroll bar appears and the scrollable amount for the center content panel scroll bar increases. It seems that the addition of the tab and its label ('ALabel') is added to the height of the center content panel and the 'fitToContainer' is no longer in effect.

Would like to maintain the 'fitToContainer' effect and not have the additional scroll bar nor the change to the initial scroll bar.

Any guidance will be appreciated.

TIA,
Rich