Question

将数字字段（或日期字段）添加到表单面板时，不会调整数字字段的宽度以匹配面板宽度。这是一个简单的示例，显示文本字段已调整为适合可用空间，但数字字段不是。请参阅this jsFiddle。

它看起来像是Extjs选择器布局中的一个错误。有人有解决方法吗？

<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>

Answer 1

我无法解释为什么它的渲染方式与普通的textefield不同，但是extjs中的一个好的方法是指定元素的宽度，而不是让extjs布局为你计算它。添加锚：'100％'到你的数字字段，它应该没问题。

Answer 2

我认为如果你想为所有字段定义一些相同的值，你必须在dedatults属性中定义它。

请参阅your example已修改

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

Extjs数字段宽度不正确

2 个答案: