Extjs Datefield 在 chrome 中不显示日历

Posted 2023-02-26

【中文标题】Extjs Datefield 在 chrome 中不显示日历

【英文标题】：Extjs Datefield does not show calender in chrome

【发布时间】：2013-07-24 14:50:00

【问题描述】：

您好，我有以下代码可以在 FF 和 IE 中使用，但是当在 chrome 中单击日历图标时，日历会跨越整个屏幕并且不显示任何日期。请帮忙

这里是代码

newDDEform = new Ext.form.FormPanel(
    formId: 'newDDEform',
    enableColumnMove: false,
    autoScroll: Ext.isGecko ? false : true, // true if IE
    monitorValid: true,
    frame: true,
    items: [
        
            xtype: 'textfield',
            fieldLabel: 'Form',
            width: 117,
            name: 'form_id',
            readOnly: true,
            value: formId
        ,
        
            xtype: 'textfield',
            fieldLabel: 'Rev',
            width: 117,
            name: 'revision',
            readOnly: true,
            value: rev
        ,
        
            xtype: 'textfield',
            fieldLabel: 'Site',
            name: 'site_id',
            id: 'site_id',
            width: 117,
            readOnly: true,
            value: siteId
        ,
        
            xtype: 'textfield',
            fieldLabel: 'Specimen ID',
            name: 'subject_id',
            id: 'subject_id',
            width: 117,
            allowBlank: false
        ,
        
            xtype: 'datefield',
            fieldLabel: 'Visit Date',
            name: 'visit_dt',
            id: 'visit_dt',
            format: 'M-d-Y',     // Mon-dd-yyyy
            autoHeight: true,
            width: 117,
            allowBlank: false,
            maxLength: 11
        ,
        
            xtype: 'textfield',
            fieldLabel: 'Visit#',
            name: 'visit_nbr',
            id: 'visit_nbr',
            width: 117,
            allowBlank: false
        ,
        
            xtype: 'textfield',
            fieldLabel: 'Sequence',
            name: 'seq_nbr',
            id: 'seq_nbr',
            width: 117,
            allowBlank: false
        
    ],      // end of panel items
    buttons: [
        
            xtype: 'button',
            text: 'Submit',
            id: 'submitbutton',
            formBind: true,
            handler: processAddDDEform
        
    ]
);          // end of panel 

newDDEformWindow = new Ext.Window(
    animateTarget: Ext.getBody(),
    height: 260,
    width: 260,
    id: 'newDDEformWindow',
    plain: true,
    resizable: true,
    title: 'Add New DDE Visit Form',
    items: newDDEform
);

【问题讨论】：

ExtJS 是什么版本的？

Extjs3.4 和 chrome 28

这在 Chrome 28 和 ExtJS 3.4 中对我来说很好用 jsfiddle.net/ydJud

想通了。您必须在 ext-all.css 或样式表中添加以下内容 .x-date-pickerborder:1px solid #1b376c;border-top:0 none;background:#fff;position:relative;width:117px 感谢您的帮助，代码也在使用 extjs 2.0

【参考方案1】：

将后面的代码添加到您的样式表中。 也许它有效。

.x-date-menu 
   width: 175;

【参考方案2】：

我不能像Woody说的那样做，我是这样做的：

table.x-date-inner 
   width:200px !important;