jQuery 对话框中的 ExtJs DatePicker答案

【问题标题】：ExtJs DatePicker Inside jQuery DialogjQuery 对话框中的 ExtJs DatePicker
【发布时间】：2016-06-04 04:17:50
【问题描述】：

我已经为此奋斗了一段时间，我希望这里有人遇到了类似的问题和解决方案。

背景

我们的项目是一个 ASP.NET MVC 4 站点。它同时使用 jQuery 1.11.3 和 Sencha ExtJs 4.2.2。我正在开发的功能之一是一个页面，该页面将调用具有单独报告参数的不同部分视图。部分也用于他们自己受人尊敬的页面。但是，此功能通过 jQuery ajax 动态加载部分视图并显示在 jQuery 对话框中。一些局部视图正在使用带有 Ext.menu.DatePicker 菜单的 ExtJs Ext.Button。在他们自己受人尊敬的页面上，日期选择器工作得非常好。但是，当部分加载到 jQuery 对话框中时，它会导致 datepicker 日历错误地设置位置，从而导致对话框中的大量溢出。

部分日期选择器的标记和代码

<td width="35%" class="tr35_form_input_normal">
    @Html.TextBoxFor(model => model.CutOff, new { @style = "float:left;" })
    <div id="datePickerButton" style="float:left;margin-top:-2px;"></div>
    <div style="clear:both;">
        @Html.ValidationMessageFor(model => model.CutOff)
    </div>
    @Html.HiddenFor(model => model.BeginDate)
    @Html.HiddenFor(model => model.EndDate)
</td>

<script type="text/javascript">
                Ext.create('Ext.Button', {
                    iconCls: 'x-form-date-trigger',
                    renderTo: 'datePickerButton',
                    handler: function () {
                        this.menu = new Ext.menu.DatePicker({
                            renderTo: 'datePickerButton',
                            autoShow: true,
                            handler: function (picker, date) {
                                $(cutOffDate).val(Ext.Date.format(date, 'n/j/Y')).change();
                            }
                        });

                        this.menu.picker.setMinDate(new Date($(hfBeginDate).val()));
                        this.menu.picker.setMaxDate(new Date($(hfEndDate).val()));
                        if (!isNaN(Date.parse($(cutOffDate).val()))) {
                            this.menu.picker.setValue(new Date($(cutOffDate).val()));
                        }
                    }
                });
</script>

这是它在自己页面上的外观和工作方式。

在我点击日期选择器按钮之前对话框的外观。

点击按钮时发生了什么。

我可以看到正在发生的事情，并且知道如何通过使用 jQuery 小部件工厂来使用 _allowInteraction 方法来修复它，我之前已经使用该方法解决了 ExtJs 网格及其在 jQuery 对话框中的过滤器的问题.但问题是，当我第一次单击按钮时，还没有创建 DatePicker，所以我无法找到元素/组件。

您会注意到 jQuery 对话框似乎溢出的另一件事。我尝试在所有底层元素上将溢出设置为隐藏，无论如何它仍然会将内部表单元素重新定位在某个负位置。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery jquery-ui extjs datepicker

【解决方案1】：

好的，所以在玩了一些之后，这是我的解决方案，它非常简单。

<script type="text/javascript">
Ext.override(Ext.menu.DatePicker, {
    initComponent: function(){
        this.callParent();
    },
    listeners: {
        show: function(){
            var el = $('#' + this.id);
            var dlg = $(el).parents('.ui-dialog');
            //Make sure we are dealing with a datepicker
            //inside of a jQuery dialog.
            if($(dlg).length > 0){
                $(dlg).find('div.x-css-shadow').remove()
                $(el).appendTo('body');
            }
        }
    }
});
</script>

【讨论】：