Results 1 to 3 of 3

Thread: left padding for combo box

  1. #1

    Default left padding for combo box

    how do I add left padding for combo box.I want to shift 'Duration' combo box below start time text box.please see attach image and code below for details
    =========
    // JScript File
    var stDate = new Ext.data.SimpleStore({
    fields: ['id', 'Protocol1'],
    data : [['1','24 Aug'],['2','25 Aug']]
    });

    var stTime = new Ext.data.SimpleStore({
    fields: ['id', 'Protocol2'],
    data : [['1','2hrs'],['2','24hrs']]
    });

    Application.ReportsForm = Ext.extend(Ext.form.FormPanel,
    {
    border:false ,initComponent:function()
    {

    /////// config start

    var config = {

    layout:'form',
    //frame:'true',
    url: '../Submit.htm<#SessionID>',
    width: 590,
    bodyStyle:'padding:25px',
    defaults: {width: 430},
    labelWidth: 70,
    labelAlign:'right',
    defaultType: 'textfield',
    items: [
    {
    xtype: 'compositefield',
    fieldLabel: 'Start Date',
    items: [

    {
    xtype: 'combo',
    name: 'genre',
    displayField:'Protocol1',
    mode: 'local',
    store: stDate,
    anchor:'40%'
    },
    {
    xtype: 'label',
    style:'width:43',
    formBind:true
    },
    {
    xtype: 'displayfield',
    value: 'Start Time'
    },
    {
    name : 'minutes',
    xtype: 'numberfield',
    width: 48,
    allowBlank: false
    },
    {
    xtype: 'displayfield',
    value: 'UTC'
    }
    ]
    }, {
    xtype: 'label',
    style:'width:43',
    formBind:true,
    anchor:'54%'
    },

    //
    {
    xtype: 'combo',
    hide:true,
    style:'padding:50px',
    fieldLabel: ' Duration',
    name: 'genre',
    displayField:'Protocol2',
    mode: 'local',
    store: stTime,
    anchor:'54%',
    //formBind:true,
    width:'160'

    }


    //



    ,{
    xtype:'label',
    html:'<hr/>',
    width:'80%'
    },{

    xtype:'tbbutton',
    text:'Go',
    width:'40',
    name:'update_time',
    style:'margin-left:392',
    formBind:true,
    scope:this,
    handler: this.submit

    }
    //the rest of your form goes here

    ]};


    Ext.apply(this, Ext.apply(this.initialConfig, config));
    // });

    Application.ReportsForm.superclass.initComponent.apply(this, arguments);

    } // eo function initComponent

    ,onRender:function()
    {
    // this.store.load();
    Application.ReportsForm.superclass.onRender.apply(this, arguments);

    } // eo function onRender


    ,submit:function()
    {
    this.getForm().submit
    (
    {
    standardSubmit: true,
    url : this.url,
    success : this.onSuccess,
    failure : this.onFailure
    }
    );
    }
    ,onSuccess:function(form, action)
    {
    Ext.MessageBox.alert("Success","Form Submitted SuccessFully");
    }

    ,onFailure:function(form, action)
    {
    Ext.MessageBox.alert("Failure","Form could not be Submitted.");
    }

    });

    Ext.reg('Reports', Application.ReportsForm);
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747

    Default

    You could place the ComboBox inside of a Container with a layout of 'form' (in order to continue to use the fieldLabel) and in turn place that container inside another Container with a layout of 'hbox'. Then add to the beginning of that outer Container an Ext.Spacer (xtype: 'spacer') component and give it a particular width that will align it to the Start Time text box. If your form stays at a width of 590, this method will suffice.

    Code:
    {
        xtype: 'container',
        layout: 'hbox',
        items: [{
            xtype: 'spacer',
            width: 350 // this is arbitrarily chosen and needs to be adjusted
        },{
            xtype: 'container',
            layout: 'form',
            labelWidth: 70,
            labelAlign: 'right',
            items: [{
                xtype: 'combo',
                fieldLabel: 'Duration',
                // ...
            }]
        }]
    }
    You can apply the same sort of scheme to your Start Date -> Start Time if you wanted to. The downside is nested containers in order to continue using the fieldLabel that's offered with the 'form' layout.

  3. #3

    Default

    thank you. it worked. but I am facing new problem with rendering on firefox 3.5 and chrome 0.2.149.27.combo box looks distorted. please find attach imagecombo box.JPG

Similar Threads

  1. form padding-left problem ?
    By bsahin in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 9 Jan 2011, 11:36 PM
  2. Replies: 2
    Last Post: 18 May 2010, 12:38 PM
  3. combo box list not left aligned
    By caultonpos in forum Sencha Ext JS Q&A
    Replies: 3
    Last Post: 8 Dec 2009, 11:12 AM
  4. ComboBox left padding
    By andreacfm in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 17 Sep 2009, 11:07 PM
  5. Replies: 2
    Last Post: 2 Sep 2008, 2:02 PM

Posting Permissions

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