PDA

View Full Version : Text Field width



pdm
15 Aug 2012, 7:12 AM
I'm not sure if this is a bug or a change since updating my project 4.0.7 to 4.1.1

I want to add fixed width text fields in a container with hbox layout . As soon as I add a width value, the input box itself in the text field becomes tiny inside the text field component.

Here's a screenshot and code from Architect reproducing the problem:
37975

Ext.define('MyApp.view.MyContainer1', { extend: 'Ext.container.Container',
layout: {
align: 'stretch',
type: 'hbox'
},
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
width: 100
}
]
});
me.callParent(arguments);
}
});

el_chief
15 Aug 2012, 9:53 AM
the width includes the width of the label. try 200

scottmartin
15 Aug 2012, 10:45 AM
You will need to calculate the width-fieldWidth to set the delta of the editor.

Scott.

pdm
15 Aug 2012, 11:54 PM
Here's what 200 looks like. Also I set labelWidth to 0 and Label to nothing and hideLabel to true.

@Scott please clarify. What is the fieldWidth? Had this behaviour changed since 4.0.7?

scottmartin
16 Aug 2012, 6:51 AM
My mistake .. I must of had the word 'field' in my head.
It should be width-labelWidth to determine the width of the editor.

Perhaps I misunderstood based on your new info...
Are you trying hide the label and you are getting this small artifact?

Scott.

pdm
16 Aug 2012, 7:03 AM
here it is in 4.0.7 - this is what I want
38009

in all my screenshots I have selected the textfield. In the following under 4.1.1 you can see the input element inside the textfield component is tiny
38010

scottmartin
16 Aug 2012, 7:23 AM
Created the following in SA, and I also pasted you code and I did not see that gap. What exact version of Ext4.1.1 are you using? Can you provide more info?

loaded fine in a quick jsfiddle example
http://jsfiddle.net/EUxY2/

Scott

pdm
16 Aug 2012, 7:44 AM
I am using Sencha Architect 2.1.0 Build 584 (the latest) and all my screenshots are from that, but the issue also appears in the browser when loading from http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js

scottmartin
16 Aug 2012, 7:47 AM
What browser are you testing with? I see your first screen is using SA .. but I am unable to duplicate this.

Scott.

pdm
16 Aug 2012, 7:57 AM
Chrome 21.

Your JS fiddle works fine. I tried exporting the project and viewing in Chrome and it's fine. I restart Architect and reload the project and it's fine. But my original converted project still has the problem.

Maybe it's a bug.

scottmartin
16 Aug 2012, 8:02 AM
But my original converted project

Perhaps an artifact from the conversion?

Scott.

pdm
16 Aug 2012, 8:10 AM
Could be, but I have also reproduced the issue several times in Architect:
1. New Project > ExtJS 4.1.x
2. Add container
3. Add textfield to container
4. set width on textfield to '100'
5. delete Label on textfield
6. the input box is tiny

scottmartin
16 Aug 2012, 8:32 AM
I would post a bug report in SA forums with your details.

Scott.