Extjs数字字段宽度不正确

Extjs数字字段宽度不正确,extjs,extjs4.2,Extjs,Extjs4.2,将数字字段(或日期字段)添加到表单面板时,不会调整数字字段的宽度以匹配面板宽度。下面是一个简单的示例,显示文本字段已调整以适应可用空间,但数字字段未调整。看 它看起来像Extjs选择器布局中的一个bug。有人有工作吗 <head> <link rel="stylesheet" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.2.1/release/resources/css/ext-all.css"> &

将数字字段(或日期字段)添加到表单面板时,不会调整数字字段的宽度以匹配面板宽度。下面是一个简单的示例,显示文本字段已调整以适应可用空间,但数字字段未调整。看

它看起来像Extjs选择器布局中的一个bug。有人有工作吗

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

Ext.namespace('E2cc.settings');
E2cc.settings.getString=函数{返回s;}
Ext.onReady(函数(){
Ext.create('Ext.form.Panel'{
宽度:200,
项目:[{
xtype:'textfield',
fieldLabel:'文本',
边界:3,
风格:{
边框颜色:“黑色”,
边框样式:“实心”,
}
}, {
xtype:'numberfield',
fieldLabel:'编号',
边界:3,
风格:{
边框颜色:“红色”,
边框样式:“实心”
},
姓名:“日期”
}],
renderTo:Ext.getBody()
});
});

我无法解释为什么它的呈现方式不同于普通的textefield,但在extjs中,一个很好的做法是指定元素的宽度,而不是让extjs layout为您计算。在numberfield中添加anchor:“100%”,这样应该可以了。

我认为,如果要为所有字段定义相同的值,必须在dedatults属性中定义它

参见修改的

Ext.create('Ext.form.Panel'{
宽度:200,
默认值:{
宽度:200,
标签宽度:70
},
项目:[{
xtype:'textfield',
fieldLabel:'文本',
边界:3,
风格:{
边框颜色:“黑色”,
边框样式:“实心”,
}
}, {
xtype:'numberfield',
fieldLabel:'编号',
边界:3,
风格:{
边框颜色:“红色”,
边框样式:“实心”
},
姓名:“日期”
}],
renderTo:Ext.getBody()

});

您为字段指定了一个固定宽度
90
,但是默认情况下
fieldLabel
配置为大于该宽度。更改
labelWidth
@EvanTrimboli:oops,发布的代码与fiddle不匹配。固定的。