1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    zhijiang is on a distinguished road

      0  

    Default How to remove border from column layout

    How to remove border from column layout


    I have column layout inside fieldset:
    PHP Code:
    {
                
    xtype:"fieldset",
                
    title:"Shipping Information",
                
    autoHeight:true,
                
    items:
                [
                {
                    
    xtype:"combo",
                    
    fieldLabel'Ship to address',
                    
    name:'shipAddressId',
                    
    storeaddressStore,
                    
    displayField'display',
                    
    valueField'id',
                    
    mode'remote',
                    
    emptyText'Select a shipping address',
                    
    typeAhead:true,
                    
    loadingText'Loading Addresses List',
                    
    triggerAction'all',
                    
    width350
                
    },{
                    
    layout'column',
                    
    items:[
                    {
                        
    columnWidth.5,
                        
    layout'form',
                        
    items: [{
                            
    xtype:'radio',
                            
    fieldLabel'Shipping method',
                            
    boxLabel'Group Shipping',
                            
    name'shipingOption',
                            
    value'groupShipping',
                            
    checkedtrue,
                        }]

                    },{
                        
    columnWidth.5,
                        
    layout'form',
                        
    items: [{
                            
    xtype:'radio',
                            
    boxLabel'Single Shipping',
                            
    name'shipingOption',
                            
    value'singleShipping',
                            
    hideLabeltrue,
                            
    checkedfalse
                        
    }]
                    }]
                }
                ]
            } 
    It
    Attached Images

  2. #2

  3. #3
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    zhijiang is on a distinguished road

      0  

    Default


    I have tried put bodyBorder: false, to form layout and fieldset too, but it not works.
    I'm newbie to Extjs, could you please show me where exactly I should set this?

    Thanks,

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    zhijiang is on a distinguished road

      0  

    Default


    Anyone, please.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You need to remove the border from the panel with layout:'column' and from the nested panels, e.g.:

    Code:
    ...
    layout: 'column',
    border: false,
    defaults: {
      border: false
    },
    items: [
    ...

  6. #6
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    zhijiang is on a distinguished road

      0  

    Default


    It's works.

    Thanks very much....

  7. #7
    Ext User GeorgeJempty's Avatar
    Join Date
    Jan 2009
    Location
    Norcross, GA
    Posts
    22
    Vote Rating
    0
    GeorgeJempty is an unknown quantity at this point

      0  

    Default works for me a year later

    works for me a year later


    I'm just starting with ExtJS, searched the forum on this very issue, applied the suggested solution, and it works as advertised Am happy to become part of this community which obviously has outstanding contributors

    Quote Originally Posted by Condor View Post
    You need to remove the border from the panel with layout:'column' and from the nested panels, e.g.:

    Code:
    ...
    layout: 'column',
    border: false,
    defaults: {
      border: false
    },
    items: [
    ...

  8. #8
    Ext User
    Join Date
    Nov 2010
    Location
    Turkey
    Posts
    72
    Vote Rating
    0
    slckysr is on a distinguished road

      0  

    Default


    works for me two years later !

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Actually, if you're not using a title, tbar, bbar or footer/fbar then you're better off using an xtype:'container' instead of a panel, e.g.
    Code:
    {
      xtype: 'container',
      anchor: '0',
      layout: 'column',
      defaultType: 'container',
      defaults: {
        layout: 'form',
        defaultType: 'textfield',
        defaults: {
          anchor: '0'
        }
      },
      items: [{
        columnWidth: .5,
        items: [{
          fieldLabel: 'Field 1'
        }]
      },{
        columnWidth: .5,
        items: [{
          fieldLabel: 'Field 2'
        }]
      }]
    }

  10. #10
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Cypress, California
    Posts
    169
    Vote Rating
    44
    dougbieber will become famous soon enough dougbieber will become famous soon enough

      0  

    Default this works... but

    this works... but


    This works if all of the "items" are EXTJS components. It does not work if I insert the following as a column element. It will put the box around the html element:

    Code:
      {html: '<hr width="100%"/>'}
    I've modified the html element with a style height of "0" but then the subsequent component in the column gets the box around it.