1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    6
    Vote Rating
    0
    amadman is on a distinguished road

      0  

    Default Newbie question: Form with Columns but no border

    Newbie question: Form with Columns but no border


    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:

    Code:
    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%'
    			}]
    		}]
    	}]
    Attached Images

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    glad you're enjoying Shea's book!

    Try by setting border : false on your containers.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar