Results 1 to 7 of 7

Thread: Trying to get a radio button and textfield side-by-side ...

  1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    163

    Question Trying to get a radio button and textfield side-by-side ...

    ... but no luck.

    Here's the code:

    Code:
    xtype       : 'container',
                                    autoEl      : {},
                                    layout      : 'column',
                                    defaults    :{border:false, xtype:'panel'},
                                    items       : [
                                        {
                                            defaults:{anchor:'100%'},
                                            layout  : 'form',
                                            columnWidth : 1,
                                            items   : [
                                                {
                                                    xtype       : 'radio',
                                                    name        : 'site_demo_opd',
                                                    hideLabel   : true,
                                                    boxLabel    : 'Other data source: '
                                                }
                                            ]
                                        }, {
                                            defaults:{anchor:'100%'},
                                            layout      : 'form',
                                            width       : 50,
                                            items       : [
                                                {
                                                    xtype       : 'textfield',
                                                    name        : 'site_demo_op_other',
                                                    hideLabel   : true
                                                }
                                            ]
                                        }
                                    ]

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

    Default

    I would use:
    Code:
    {
    	xtype: 'container',
    	autoEl: 'div',
    	layout: 'column',
    	defaults: {
    		xtype: 'container',
    		autoEl: 'div',
    		layout: 'anchor',
    		defaults: {
    			anchor: '0'
    		}
    	},
    	items: [{
    		columnWidth: 1,
    		items: {
    			xtype: 'radio',
    			name: 'site_demo_opd',
    			boxLabel: 'Other data source: '
    		}
    	},{
    		width: 50,
    		items: {
    			xtype: 'textfield',
    			name: 'site_demo_op_other'
    		}
    	}]
    }
    But this is basically the same as your version, so I assume the problem it how you are using this container (it needs to be in another container with a width-managing layout).

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    163

    Default

    Right ... its is inside a fieldset that is inside a table that is nested inside a tab:

    Code:
            var publisher_tab_panel = new Ext.TabPanel({
                    xtype: 'tabpanel',
                    activeTab:0,
                    border:false,
                    anchor:'100% 100%',
                    deferredRender:false,
                    defaults:{
                        layout:'form',
                        bodyStyle:'padding:5px',
                        hideMode:'offsets'
                    },
                    items: [{
                        title: 'General Information',
                        layout:'table',
                        border: false,
                        autoScroll: true,
                        layoutConfig: {
                            columns: 2
                        },
                        items:[{
                            rowspan: 2,
                            cellCls: 'layoutCell',
                            layout: 'form',
                             width: 295,
                            items: [{
                                xtype:'fieldset',
                                title: ' Basic Information ',
                                autoHeight:true,
                                border: false,
                                labelWidth: 75,
                                defaults: {
                                    width   : 200
                                },
                                defaultType: 'textfield',
                                items: [{
                                    xtype: 'textfield',
                                    fieldLabel: 'Name',
                                    name: 'site[name]',
                                    allowBlank: false
                                },{
                                    xtype: 'textfield',
                                    fieldLabel: 'URL',
                                    name: 'site[url]',
                                    allowBlank: false
                                },{
                                    xtype: 'textarea',
                                    fieldLabel: 'Description',
                                    name: 'site[description]',
                                    allowBlank: false
                                },{
                                    xtype: 'hidden',
                                    name: '_method',
                                    value: ''
                                }]
                            }]
                         },{
                            layout: 'form',
                            cellCls: 'layoutCell',
                            width: 370,
                            items: [{
                                xtype:'fieldset',
                                title: 'trafffic',
                                autoHeight:true,
                                border: false,
                                labelWidth: 140,
                                defaults: {
                                    width   : 175
                                },
                                defaultType: 'textfield',
                                items: [{
                                    xtype      : 'combo',
                                    fieldLabel : 'asdfasdf',
                                    store      : [ 'Here', 'There', 'Anywhere' ]
                                }]
                            }, {
                                xtype:'fieldset',
                                title: 'Demographics',
                                autoHeight:true,
                                border: false,
                                labelWidth: 140,
                                defaults: {
                                    width   : 175
                                },
                                defaultType: 'textfield',
                                items: [{
                                    xtype       : 'combo',
                                    fieldLabel  : 'Gender',
                                    store       : [ 'Here', 'There', 'Anywhere' ]
                                },{
                                    xtype       : 'combo',
                                    fieldLabel  : 'Age',
                                    store       : [ 'Here', 'There', 'Anywhere' ]
                                },{
                                    xtype       : 'combo',
                                    fieldLabel  : 'Household Income',
                                    store       : [ 'Here', 'There', 'Anywhere' ]
                                },{
                                    xtype       : 'radio',
                                    name        : 'site_demo_op',
                                    hideLabel   : true,
                                    boxLabel    : 'Guesstimate',
                                    anchor      : '100%'
                                }, {
                                    xtype: 'container',
                                    autoEl: 'div',
                                    layout: 'column',
                                    defaults: {
                                        xtype: 'container',
                                        autoEl: 'div',
                                        layout: 'anchor',
                                        defaults: {
                                            anchor: '0'
                                        }
                                    },
                                    items: [{
                                        columnWidth: 1,
                                        items: {
                                            xtype: 'radio',
                                            name: 'site_demo_opd',
                                            boxLabel: 'Other data source: '
                                        }
                                    },{
                                        width: 50,
                                        items: {
                                            xtype: 'textfield',
                                            name: 'site_demo_op_other'
                                        }
                                    }]
                                }]
                            }]
                        }]
                    }
                });

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

    Default

    And this doesn't work?

    I would use the same config (but I would use anchor:'0' instead of giving the fieldset and the items in the fieldset a fixed width).

    ps. Or does it only not work on IE6 strict or IE6/7/8 quirks?

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    163

    Default

    That seems to help a little bit except now I notice that the form elements aren't properly laid out and sized until I resize the browser. Not sure why though.

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

    Default

    I tried your example and it did display almost correct (it does however need this patch).

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Posts
    163

    Default

    I'm using firefox at the moment and it renders fine ... BUT only after I resize the browser. Not sure why but its driving me nuts.

Posting Permissions

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