Newbie question: Form with Columns but no border

[amadman]

First post newbie here. Got the learning EXTjs book from Packt a while back and love it. it's been a great resource. I am stuck right now tho and would love a little help if somone can point me in the right direction. i looked at the FAQ and did a search before posting.

I have a form inside a tabpanel, i would like that form to have two columns, like the example from the EXT website on dynamic forms (attachment image1.jpg). However, when i try to duplicate that format in my form, i can see all the border/frames.

the problem is i dont want to see those nested borders/frames.

you can see my work in image2.jpg

here is the code snippet of the form inside the tab panel:

xtype: 'tabpanel',
activeTab: 0,
items: [{
	xtype: 'form',
	title: 'Customer Information',
	bodyStyle:'padding:5px 5px 0',		
	items: [{
		layout: 'column',									
		bodyStyle:'padding:5px 5px 0',
		items: [{
			columnWidth:.5,
            		layout: 'form',
			bodyStyle:'padding:5px 5px 0',
            		items: [{
				xtype: 'textfield',
				fieldLabel: 'Title',
				name: 'title',
				allowBlank: false
			},{
				xtype: 'textfield',
				fieldLabel: 'Director',
				name: 'director',
				anchor: '100%',
				vtype: 'name'
			},{
				xtype: 'datefield',
				fieldLabel: 'Released',
				name: 'released',
				disabledDays: [1,2,3,4,5]
			},{
				xtype: 'radio',
				fieldLabel: 'Filmed In',
				name: 'filmed_in',
				boxLabel: 'Color'
			},{
				xtype: 'radio',
				hideLabel: false,
				labelSeparator: '',
				name: 'filmed_in',
				boxLabel: 'Black & White'
			},{
				xtype: 'checkbox',
				fieldLabel: 'Available?',
				name: 'available'
			},{
				xtype: 'combo',
				name: 'genre',
				fieldLabel: 'Genre',
				mode: 'local',
				store: genres,
				displayField:'genre',
				width: 130
			}]
		},{
			columnWidth:.5,
            		layout: 'form',
			bodyStyle:'padding:5px 5px 0',
			items: [{
				xtype: 'textarea',
				name: 'description',
				hideLabel: true,
				labelSeparator: '',
				height: 200,
				anchor: '100%'
			}]
		}]
	}]

[jay@moduscreate.com]

glad you're enjoying Shea's book!

Try by setting border : false on your containers.

[mjlecomte]

Or instead of letting it include panels as the default items, go with the lower weight container:

    var tabs = new Ext.TabPanel({
        renderTo: document.body,
        width: 650,
        height: 300,
        activeTab: 0,
        frame: true,
        defaults: {
            autoHeight: true
        },
        items: [{
            xtype: 'form',
            title: 'Customer Information',
            bodyStyle: 'padding:5px 5px 0',
            items: [{
                layout: 'column',
                bodyStyle: 'padding:5px 5px 0',
                xtype: 'container',
                autoEl: 'div',
                items: [{
                    columnWidth: .5,
                    layout: 'form',
                    bodyStyle: 'padding:5px 5px 0',
                    xtype: 'container',
                    autoEl: 'div',
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Title',
                        name: 'title',
                        anchor: '-30',
                        allowBlank: false
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Director',
                        name: 'director',
                        anchor: '-30',
                        vtype: 'name'
                    }, {
                        xtype: 'datefield',
                        fieldLabel: 'Released',
                        name: 'released',
                        disabledDays: [1, 2, 3, 4, 5],
                        width: 130
                    }, {
                        xtype: 'radio',
                        fieldLabel: 'Filmed In',
                        name: 'filmed_in',
                        boxLabel: 'Color'
                    }, {
                        xtype: 'radio',
                        hideLabel: false,
                        labelSeparator: '',
                        name: 'filmed_in',
                        boxLabel: 'Black & White'
                    }, {
                        xtype: 'checkbox',
                        fieldLabel: 'Available?',
                        name: 'available'
                    }, {
                        xtype: 'combo',
                        name: 'genre',
                        fieldLabel: 'Genre',
                        mode: 'local',
                        //store: genres,
                        displayField: 'genre',
                        width: 130
                    }]
                }, {
                    columnWidth: .5,
                    layout: 'form',
                    bodyStyle: 'padding:5px 5px 0',
                    xtype: 'container',
                    autoEl: 'div',
                    items: [{
                        xtype: 'textarea',
                        name: 'description',
                        hideLabel: true,
                        labelSeparator: '',
                        height: 200,
                        anchor: '100%'
                    }]
                }]
            }]
        }]
    });