Results 1 to 4 of 4

Thread: How to change labelPad of combobox dynamically?

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    307
    Answers
    1

    Default Answered: How to change labelPad of combobox dynamically?

    Hi,

    I want to maintain the space between the component and it's label using labelPad in different resolutions.
    I have this panel with a combo box specified with a fixed "labelPad" but when I resize my window changing labelPad at runtime and re-rendering the combo is not working.

    PFB the code snippet:

    var combBox = Ext.create('Ext.form.ComboBox', {
    id : 'comboBox',
    flex : 1,
    minWidth : 150,
    store : someStore,
    fieldLabel : 'Select Type',
    labelStyle : 'margin-top:6px !important',
    queryMode : 'local',
    displayField : 'displayName',
    valueField : 'abbr',
    shadow : false,
    labelAlign : 'left',
    labelPad : 70
    });


    PFB code snippet when window is resized:

    var screenWidth = Ext.getBody().getViewSize().width;
    var combo = Ext.getCmp('comboBox');
    if(combo !== null)
    {
    if(Math.round(screenWidth>1500))
    {
    combo.labelPad = 100;
    }
    else
    {
    if(Math.round(screenWidth>1300))
    {
    combo.labelPad = 80;
    }
    else
    {
    combo.labelPad = 50;
    }
    }
    }

    combo.updateBox({'x':0, 'y':0, 'width' : 200, 'height' : 40});
    combo.updateLayout();
    combo.doComponentLayout();

    Ext.apply(combo, {labelPad:50});
    combo.updateLayout();
    combo.doComponentLayout();


    Support Appreciated.

    Shweta

  2. Hi Brian,

    I found the answer.

    PFB code for updating the labelPad dynamically ->

    var combo = Ext.getCmp('comboBox');
    var cell,label;
    combo.labelPad = 5;
    label = combo.labelEl;
    cell = combo.labelCell;

    label.setStyle('margin-right', combo.labelPad + 'px');
    cell.set({'width': (combo.labelPad + combo.labelWidth)});
    combo.updateLayout();

    The above works for me.

    Thanks,
    Shweta

  3. #2
    Sencha Premium User
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    This functionality is not part of the current framework. You could add some overrides to handle the padding widths.

    Code:
    Ext.define('Override.form.field.Text', {
        override : 'Ext.form.field.Text',
        
        setLabelPad : function(padding) {
            var me         = this,
                labelAlign = me.labelAlign,
                topLabel   = (labelAlign === 'top'),
                rightLabel = (labelAlign === 'right'),
                property, value;
            
            me.labelPad = padding;
            
            if (me.rendered) {
                property = topLabel ? 'padding-bottom' : 'padding-right';
                value = padding + 'px';
                me.labelEl.setStyle(property, value);
            }
        }
    });
    Regards,
    Brian


  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    307
    Answers
    1

    Default

    Hi Brian,

    I tried your given solution, it though changes the value of the property(which it did with my initial code as well) but does not show any change on the UI.

    I even tried updateLayout() and doComponentLayout() after updating labelPad but no luck

    Support Appreciated
    Shweta

  5. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    India
    Posts
    307
    Answers
    1

    Default

    Hi Brian,

    I found the answer.

    PFB code for updating the labelPad dynamically ->

    var combo = Ext.getCmp('comboBox');
    var cell,label;
    combo.labelPad = 5;
    label = combo.labelEl;
    cell = combo.labelCell;

    label.setStyle('margin-right', combo.labelPad + 'px');
    cell.set({'width': (combo.labelPad + combo.labelWidth)});
    combo.updateLayout();

    The above works for me.

    Thanks,
    Shweta

Tags for this Thread

Posting Permissions

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