Extjs number field width is incorrect

StackOverflow https://stackoverflow.com//questions/22026851

  •  21-12-2019
  •  | 
  •  

Question

When a number field (or date field) is added to a form panel, the width of the number field is not adjusted to match the panel width. Here is a simple example showing that the text field is adjusted to fit the available space, but the number field is not. See this jsFiddle.

It looks like a bug in the Extjs picker layout. Does anyone have a work-around?

<head>
<link rel="stylesheet" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/resources/css/ext-all.css">
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.namespace('E2cc.settings');
E2cc.settings.getString = function(s) { return s; }
</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
    width: 200,
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Text',
        border: 3,
        style: {
            borderColor: 'black',
            borderStyle: 'solid',
        }
    }, {
        xtype: 'numberfield',
        fieldLabel: 'Number',
        border: 3,
        style: {
            borderColor: 'red',
            borderStyle: 'solid'
        },
        name: 'date'
    }],
    renderTo: Ext.getBody()
});
});
</script>

</body>
Was it helpful?

Solution

I couldn't explain why it is rendered differently than a normal textefield, but a good pratice in extjs is to specify the width of your elements and not let extjs layout compute it for you. Add anchor: '100%' to your numberfield and it should be ok.

OTHER TIPS

I think that if you want to defined some same values to all the fields you must define it in the dedatults property.

see your example modified

Ext.create('Ext.form.Panel', { width: 200, defaults : { width: 200, labelWidth : 70 }, items: [{ xtype: 'textfield', fieldLabel: 'Text', border: 3, style: { borderColor: 'black', borderStyle: 'solid', } }, { xtype: 'numberfield', fieldLabel: 'Number', border: 3, style: { borderColor: 'red', borderStyle: 'solid' }, name: 'date' }], renderTo: Ext.getBody() });

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top