Extjs 日期选择器显示问题答案

【问题标题】：Extjs Date picker display issueExtjs 日期选择器显示问题
【发布时间】：2013-09-09 09:39:57
【问题描述】：

我为日期选择器编写了 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 中输出：

在第二个：

【问题讨论】：

当 id 相同时会出现此类问题。请告诉我您的两个 html 包含相同的代码。
这是通用控件，包含在两个不同的文件中，我已经尝试使用唯一 ID，所以我不认为这是 ID 问题。我尝试 limitall 的答案，它对我有用

标签： javascript html extjs datepicker

【解决方案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;
                }
            }

        },
    ]
});

【讨论】：