Question

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

背景

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

Markup＆amp;部分

上的日期选择器的代码

<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>

这就是它的外观＆amp;在它自己的页面上工作。

点击日期选择器按钮之前对话框的显示方式。

点击按钮时发生了什么。

通过使用jQuery小部件工厂来使用_allowInteraction方法，我可以看到发生了什么，并了解如何修复它，我之前已经完成了解决ExtJs网格及其问题的问题jQuery对话框内的过滤器。问题是，当我第一次点击按钮时还没有创建DatePicker，所以我无法找到元素/组件。

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

非常感谢任何帮助。

Answer 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>

ExtJs DatePicker内部jQuery对话框

1 个答案: