Extjs日期选择器显示问题

Question

我为日期选择器编写了ExtJS代码，并将其包含在两个不同的HTML文件中。文本框的高度在第一个HTML文件中与在另一个HTML文件中不同。我的代码是：

Ext.create('Ext.form.Panel', {
    height: '15%',
    width: $("#MainWindow_Right_Panel").width() - 20,
    renderTo: 'FilterControl',
    id: 'DatePicker_Panel',
    border: 0,
    items: [
        {
            xtype: 'datefield',
            fieldLabel: 'To',
            name: 'to_date',
            style: 'float: right',
            id: 'todate',
            padding: 5,
            width: 130,
            labelWidth: 30,
            value: todate,
            maxValue: today,
            format: "d.m.Y",
            layout: 'form',
            listeners: {
                select: function(combo, value) {
                     todate=value;

                }
            }
        },
        {
            xtype: 'datefield',
            fieldLabel: 'From',
            style: 'float: right',
            labelWidth: 50,
            width: 150,
            name: '_fromdate',
            padding: 5,
            id: 'fromdate',
            value:fromdate,
            maxValue: today,
            format: "d.m.Y",
            layout: 'form',
            listeners: {
                select: function(combo, value) {
                   fromdate=value;
                }
            }

        },
    ]
});

在第一个HTML中输出：

在第二个：

Answer 1

你必须添加cls：'x-border-box，x-border-box'，

添加cls之后你的代码应该是这样的：

 Ext.create('Ext.form.Panel', {
    height: '15%',
    width: $("#MainWindow_Right_Panel").width() - 20,
    renderTo: 'FilterControl',
    id: 'DatePicker_Panel',
    border: 0,
    items: [
        {
            xtype: 'datefield',
            fieldLabel: 'To',
            name: 'to_date',
            style: 'float: right',
            **cls:'x-border-box, x-border-box',**
            id: 'todate',
            padding: 5,
            width: 130,
            labelWidth: 30,
            value: todate,
            maxValue: today,
            format: "d.m.Y",
            layout: 'form',
            listeners: {
                select: function(combo, value) {
                     todate=value;

                }
            }
        },
        {
            xtype: 'datefield',
            fieldLabel: 'From',
            style: 'float: right',
            **cls:'x-border-box, x-border-box',**
            labelWidth: 50,
            width: 150,
            name: '_fromdate',
            padding: 5,
            id: 'fromdate',
            value:fromdate,
            maxValue: today,
            format: "d.m.Y",
            layout: 'form',
            listeners: {
                select: function(combo, value) {
                   fromdate=value;
                }
            }

        },
    ]
});