Results 1 to 8 of 8

Thread: How to Set the maximum width of the textField enterable area

  1. #1

    Default Answered: How to Set the maximum width of the textField enterable area

    How do you set the maximum width of the textField where the value can be entered ??

    I want to put two fields in a container of width 700 [with layout 'hbox'] , with some space between the fields.
    One of the fields is a textField and the other is a simple displayField .

    However as soon as i set the width of textField to be say like 400 , the area where the value can be entered expands to cover the entire width .
    And so again there is no space between the fields .

    So i was thinking is there a way to provide the width of the textField as 400 , but restrict the width of the enterableArea as like 200 ??

    I have tried maxWidth , but that doesn't work .

    A workable Solution , though i hate it ::
    One of the ways that i have found is to place each component further inside a container and then add these containers to the form . But i think it's unnecessary nesting and there should be an easier way !!!

  2. As for your original post, something like this?

    Code:
    var formPanel = Ext.create('Ext.form.Panel', {
        layout: {
            align: 'stretch',
            type: 'hbox'
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'C',
            name: 'country',
            labelWidth: 6,
            width: 200,
            style: 'border : 1px solid black'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Home',
            name: 'home_score',
            value: '10',
            margins: '0 0 0 150',
        }]
    
    });
    
    
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
            items: [formPanel]
        });
    });
    Attachment 49204

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Quick Note:

    The field label is a hbox layout of the label and editor. So your width is your total width for both and you can set labelWidth to determine the width of your label, editor:

    width: 200
    labelWidth: 50
    delta for editor will be 150

    If this does not help, then perhaps you can provide a quick example

  4. #3

    Default

    And that exactly is the point .
    I think there should be three things that user should be able to explicitly manage here . [ The width of the hbox , the width of the label and also the width of the editor ]

    From your example ::
    width: 200
    labelWidth: 50
    delta for editor will be 150

    If I now increase the width to be 400 , the delta for the editor increases to 350.. I don't want that.. I want the delta to stay at 150 .
    And this means that i could have white space from 200-400 and this will make putting the components in the form lot easier .

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    This has been discussed, cannot remember the outcome. Need to check.

    For now, perhaps you can create a quick layout and we can see what can be done:
    https://fiddle.sencha.com/#home

  6. #5

    Default

    Code:
    var formPanel = Ext.create('Ext.form.Panel' , {
        items : [
            {
                xtype : 'textfield' ,
                fieldLabel : 'Country' ,
                name :'country',
                labelWidth : '6' ,
                width : 800 ,
                style : 'border : 1px solid black'
            }
        ] 
        
    }) ;
    
    
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport' , {
            items : [formPanel]     	    
        }) ;
    });
    See , how the editor increases to cover the entire width .. [ 800 - 6 = 794.. ]

    Again I am not sure , why the labelWidth of 6 gives me so much space.. I normally use "try.sencha.com" , which would need close to 40-60 to show the same .
    But that is secondary .

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    >>> why the labelWidth of 6 gives me so much space

    It needs to be a numeric, not a string. : labelWidth : '6' , // should be numeric

  8. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    As for your original post, something like this?

    Code:
    var formPanel = Ext.create('Ext.form.Panel', {
        layout: {
            align: 'stretch',
            type: 'hbox'
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'C',
            name: 'country',
            labelWidth: 6,
            width: 200,
            style: 'border : 1px solid black'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Home',
            name: 'home_score',
            value: '10',
            margins: '0 0 0 150',
        }]
    
    });
    
    
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
            items: [formPanel]
        });
    });
    f286358.png
    Last edited by scottmartin; 3 Jun 2014 at 12:55 PM. Reason: Changed to displayfield

  9. #8

    Default

    Hmm.. Using margins.. Why did i not think of that.. !!
    Thanks.. !!

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
  •