How to remove border from column layout

[zhijiang]

I have column layout inside fieldset:

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

                },{
                    columnWidth: .5,
                    layout: 'form',
                    items: [{
                        xtype:'radio',
                        boxLabel: 'Single Shipping',
                        name: 'shipingOption',
                        value: 'singleShipping',
                        hideLabel: true,
                        checked: false
                    }]
                }]
            }
            ]
        } 

It

[evant]

http://extjs.com/deploy/dev/docs/?cl...&member=border
http://extjs.com/deploy/dev/docs/?cl...ber=bodyBorder

[zhijiang]

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,

[zhijiang]

Anyone, please.

[Condor]

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

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

[zhijiang]

It's works.

Thanks very much....

[GeorgeJempty]

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

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

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

[slckysr]

works for me two years later !

[Condor]

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.

{
  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'
    }]
  }]
}

[dougbieber]

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:

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