javascript - Extjs 日期选择器显示问题

Question

我为日期选择器编写了 ExtJS 代码，并将其包含在两个不同的 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;
                }
            }

        },
    ]
});