Placing of combo box in west region of border layout

[ruchika]

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.

borderlayout.jpg

Thanks

[Condor]

Can you post your code?

[ruchika]

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]

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.

[ruchika]

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]

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]

No I need field labels. Please see the components inside the fieldset.