PDA

View Full Version : How to Set the maximum width of the textField enterable area



roshan.khandelwal
2 Jun 2014, 2:56 PM
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 !!!

scottmartin
2 Jun 2014, 7:24 PM
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

roshan.khandelwal
3 Jun 2014, 10:30 AM
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 .

scottmartin
3 Jun 2014, 10:55 AM
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

roshan.khandelwal
3 Jun 2014, 11:31 AM
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 .

scottmartin
3 Jun 2014, 12:42 PM
>>> why the labelWidth of 6 gives me so much space

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

scottmartin
3 Jun 2014, 12:53 PM
As for your original post, something like this?



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]
});
});


49204

roshan.khandelwal
3 Jun 2014, 1:01 PM
Hmm.. Using margins.. Why did i not think of that.. !!
Thanks.. !!