Results 1 to 7 of 7

Thread: Placing of combo box in west region of border layout

  1. #1

    Default Placing of combo box in west region of border layout

    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

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Can you post your code?

  3. #3

    Default

    Code:
    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%'
                    }]
        }
               ]
            });

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    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.

  5. #5

    Default

    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:
    Code:
     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
    Attached Images Attached Images

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    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'.

  7. #7

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •