PDA

View Full Version : Placing of combo box in west region of border layout



ruchika
6 Dec 2009, 11:48 PM
Hi,
i am designed a page with border layout and have placed some combo boxes in the west region. When i load the page the combo boxes looks like overlapped as shown in the image attached. And then if i collapse the south region and expand it back the combo boxes are in the right position. I a not able to trace what might be going wrong. i am not even able to place a scroll bar in the west region.
Please suggest.

17618

Thanks

Condor
7 Dec 2009, 12:27 AM
Can you post your code?

ruchika
7 Dec 2009, 1:12 AM
var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: '20%',
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
//autoScroll:true,
items: [{
title: 'Navigation',
iconCls: 'nav',
autoScroll:true,
layout: {
type:'vbox',
padding:'5',
align:'stretch'
},
//bodyStyle:'padding:5px 5px 5px',
items:[
{
border: false,
frame:false,
anchor: '95%',
items:[combo1]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[combo2]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[Acctgroupcombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[subAcctcombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[orLbl]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[acTextFld]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[Futurescombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[exchangeCombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[combo6]
},{
xtype:'spacer',
height:1
},{
xtype:'fieldset',
autoHeight:true,
items:[{
xtype: 'radiogroup',
fieldLabel: 'Search<br>By ',
columns: 2,
align:'right',
items: [
{boxLabel: 'ABC', name: 'rb-vert', inputValue: 1},
{boxLabel: 'DEF', name: 'rb-vert', inputValue: 2, checked: true},
{boxLabel: 'GHI', name: 'rb-vert', inputValue: 3},
{boxLabel: 'JKL', name: 'rb-vert', inputValue: 4}
]
},{
xtype:'textfield',
fieldLabel: 'Business',
name: 'business',anchor: '95%'
},{
xtype:'textfield',
fieldLabel: 'Price',
name: 'mobile',anchor: '95%'
},{
xtype:'textfield',
fieldLabel: 'Delivery',
name: 'fax',anchor: '95%'
}]
},{
xtype:'label',
text:'View:'
},{
xtype: 'radiogroup',
columns: 2,
items: [
{boxLabel: 'View1', name: 'View1', inputValue: 1},
{boxLabel: 'View2', name: 'View2', inputValue: 2, checked: true}
]
},{
xtype:'label',
text:'Data:'
},{
xtype: 'radiogroup',
columns: 2,
items: [
{boxLabel: 'Export', name: 'export', inputValue: 1},
{boxLabel: 'Display', name: 'display', inputValue: 2, checked: true}
]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
anchor: '95%',
items:[comboboxSearch]
},{
xtype:'spacer',
height:1
},{
layout:'hbox',
layoutConfig: {
padding:'5',
align:'middle'
},
border:false,
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Save',
flex:1
},{
xtype:'button',
text: 'Submit',
flex:1
},{
xtype:'button',
text: 'Clear',
flex:1
}]
}]
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
},{
region: 'center', // a center region is ALWAYS required for border layout
layout:'anchor',
anchorSize: {width:800, height:600},
items:[{
title:'Item 1',
id: 'pnlResutView',
title: 'Result View',
contentEl:'treegriddata',
collapsible: true,
anchor:'100% 100%'
}]
}
]
});

Condor
7 Dec 2009, 2:33 AM
Your layout is overnested.

Why not make the Navigation panel layout:'anchor' and put all comboboxes directly into the items?

ps. Accordion layout has some width calculation issues. I recommend this override (http://www.extjs.com/forum/showthread.php?p=396044#post396044).

ruchika
8 Dec 2009, 1:42 AM
i have removed accordion layout and instead used form layout, all the components are coming properly, but i see lots of spaces.
Can you please suggest how do i remove the extra spaces in the west region.
And for text fields, is there any way to reduce the space between the label and the text box.
The code now is:

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: '30%',
collapsible: true,
margins: '0 0 0 0',
autoScroll:true,
layout: {
type:'form'
},
bodyStyle:'padding:5px 5px 5px',
items:[
{
border: false,
frame:false,
anchor: '95%',
items:[combo1]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[combo2]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[Acctgroupcombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[subAcctcombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[orLbl]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[acTextFld]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[Futurescombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[exchangeCombo]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
items:[combo6]
},{
xtype:'spacer',
height:1
},{
xtype:'fieldset',
layout:'form',
items :[{
xtype:'label',
text: 'Search Contract By'
},{
xtype: 'radiogroup',
hideLabel:true,
columns: 2,
anchor: '80%',
//align:'right',
items: [
{boxLabel: 'RIC', name: 'rb-vert', inputValue: 1},
{boxLabel: 'BBG', name: 'rb-vert', inputValue: 2, checked: true},
{boxLabel: 'NAM', name: 'rb-vert', inputValue: 3},
{boxLabel: 'EXC', name: 'rb-vert', inputValue: 4}
]
},{
xtype:'textfield',
fieldLabel: 'Contract',
name: 'business'//,anchor: '80%'
},{
xtype:'textfield',
fieldLabel: 'Price',
name: 'mobile'//,anchor: '80%'
},{
xtype:'textfield',
fieldLabel: 'Delivery',
name: 'fax'//,anchor: '80%'
}]
},{
xtype:'label',
text:'View:'
},{
xtype: 'radiogroup',
columns: 2,
hideLabel:true,
items: [
{boxLabel: 'Open Trades', name: 'View1', inputValue: 1},
{boxLabel: 'Positions', name: 'View2', inputValue: 2, checked: true}
]
},{
xtype:'label',
text:'Data:'
},{
xtype: 'radiogroup',
columns: 2,
hideLabel:true,
items: [
{boxLabel: 'Export', name: 'export', inputValue: 1},
{boxLabel: 'Display', name: 'display', inputValue: 2, checked: true}
]
},{
xtype:'spacer',
height:1
},{
border: false,
frame:false,
anchor: '95%',
items:[comboboxSearch]
},{
xtype:'spacer',
height:1
},{

xtype: 'buttongroup',
columns: 3,
border:false,
frame:false,
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Save'
},{
xtype:'button',
text: 'Submit',
id:'submitbtn',
handler: function() {
Ext.getCmp('submitbtn').disable();
var p = getFilters();
if(p == null){
alert("Please select an Account Group to fetch records");
if(Ext.getCmp('submitbtn').disabled){
Ext.getCmp('submitbtn').enable();
}
return;
}else{
onLoadShowGrid();
}
var newTitle = "Result: "
if(combo1.lastSelectionText != undefined && combo1.lastSelectionText != ""){
newTitle += combo1.lastSelectionText;
}
if(subAcctcombo.lastSelectionText != undefined && subAcctcombo.lastSelectionText != ""){
//remove acc name
var acc = subAcctcombo.lastSelectionText.substring(0,subAcctcombo.lastSelectionText.indexOf("--"));
newTitle += " | " + acc;
}else if(Acctgroupcombo.lastSelectionText != undefined && Acctgroupcombo.lastSelectionText != ""){
newTitle += " | "+Acctgroupcombo.lastSelectionText;
}
if(Futurescombo.lastSelectionText != undefined && Futurescombo.lastSelectionText != ""){
newTitle += " | "+ Futurescombo.lastSelectionText;
}
if(exchangeCombo.lastSelectionText != undefined && exchangeCombo.lastSelectionText != ""){
newTitle +=" | "+ exchangeCombo.lastSelectionText;
}

var pnl = Ext.getCmp('pnlResutView');
pnl.setTitle(newTitle);
if(Ext.getCmp('submitbtn').disabled){
Ext.getCmp('submitbtn').enable();
}
}
},{
xtype:'button',
text: 'Clear'
}]
}]
},{
region: 'center', // a center region is ALWAYS required for border layout
layout:'anchor',
anchorSize: {width:800, height:600},
items:[{
title:'Item 1',
id: 'pnlResutView',
title: 'Result View',
contentEl:'treegriddata',
//html:'Content 1',
collapsible: true,
anchor:'100% 100%'
}]
}
]
});

});
please see the screenshot of my screen attached.

Thanks

Condor
8 Dec 2009, 3:24 AM
The extra space is from the x-form-item field wrapper created by the form layout.

Since you are not using fieldLabels I recommend switching to layout:'anchor'.

ruchika
8 Dec 2009, 4:28 AM
No I need field labels. Please see the components inside the fieldset.