View Full Version : Text Field width

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:

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

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

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


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?

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?


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

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

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


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

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.


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.

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

Perhaps an artifact from the conversion?


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

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