What's New?

[CLOSED] Panel did not refresh the content after manually trigger autoload

Page 1 of 3 123 LastLast
  1. #1
    Feb 01, 2012, 12:51 PM

    [CLOSED] Panel did not refresh the content after manually trigger autoload

    Hi:

    I have a page which is to show the PDF file on it. Basically I generate a pdf on server side and send the file id to the page. The page load the file into the panel by the id. In the page, I got a dropdown list which can select the page size and a refresh button to refresh the panel. The page is working fine for Chrome and IE9 but when I test it on IE8 there is a issue.

    In IE8 when page first time load it, everything is working fine. When I change the page size and click the refresh button, the panel shows the loading mask but never refresh the content unless you move the mouse to dropdown list drill down icon or select the other radio button on the page. This looks like the after autoload finished, the panel will not automatically refresh the content unless we do some activity on other Ext.Net control.

    The page code is:
    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ContentPage.Master"
    Inherits="System.Web.Mvc.ViewPage<WBS.Workware.Web.UI.Views.Model.DocumentViewModel>" %>

<%@ Import Namespace="WBS.Workware.Application.Document" %>
<%@ Import Namespace="WBS.Workware.Web.UI.Common" %>
<script runat="server">

    protected override void OnLoad(EventArgs e)
    {
        ShellHelper.RegisterClientScript("plugin-detector", "~/content/js/shell-print.js");
        ResourceManager.GetInstance().RegisterOnReadyScript("$shellPrint.initialise();");

        PanelContent.AutoLoad.Url = Url.Action("stream", "shell");

        ComboBoxPaperSize.SelectedItem.Value = Model.Options.PaperSize.ToString();
        CheckBoxScaleToFit.Checked = Model.Options.ScaleToFit;

        SpinnerPagesTall.Value = Model.Options.VerticalPages;
        SpinnerPagesWide.Value = Model.Options.HorizontalPages;

        RadioLandscape.Checked = Model.Options.Orientation == PaperOrientation.Landscape;
        RadioPortrait.Checked = Model.Options.Orientation == PaperOrientation.Portrait;

        RadioPortrait.BoxLabel = String.Format("{0}<div class='shell-radio shell-page-portrait'></div>",
            Strings.ShellPrintPortrait);
        RadioLandscape.BoxLabel = String.Format("{0}<div class='shell-radio shell-page-landscape'></div>",
                                                Strings.ShellPrintLandscape);


        HiddenDocumentId.Value = Model.DocumentId.ToString();
        base.OnLoad(e);
    }

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Document Viewer
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <form id="downloadForm">
    </form>
    <ext:Hidden runat="server" ID="HiddenDocumentId">
    </ext:Hidden>
    <ext:Viewport runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel runat="server" Layout="BorderLayout" Border="false">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server" StyleSpec="border-bottom-width: 0px;">
                        <Items>
                            <ext:Button runat="server" ID="ButtonClose" Text="<% $Resources: Strings, Close  %>"
                                Icon="Cancel">
                                <Listeners>
                                    <Click Handler="window.close();" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Button runat="server" ID="ButtonRefresh" Text="<% $Resources: Strings, Refresh  %>"
                                Icon="PageRefresh" IDMode="Static">
                                <Listeners>
                                    <Click Handler="PanelContent.reload();" Delay="1"/>
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarFill />
                            <ext:ToolbarSeparator />
                            <ext:Button runat="server" ID="ButtonExportPdf" Text="<% $Resources: Strings, ShellPrintDownloadPdf  %>"
                                Icon="PageWhiteAcrobat">
                                <DirectEvents>
                                    <Click Url="~/Shell/Stream" IsUpload="true" CleanRequest="true" FormID="downloadForm">
                                        <ExtraParams>
                                            <ext:Parameter Name="documentType" Value="Pdf" Mode="Value" />
                                            <ext:Parameter Name="streamMode" Value="Attachment" Mode="Value" />
                                            <ext:Parameter Name="documentId" Value="HiddenDocumentId.getValue()" Mode="Raw" />
                                            <ext:Parameter Name="options.paperSize" Value="ComboBoxPaperSize.getValue()" Mode="Raw" />
                                            <ext:Parameter Name="options.orientation" Value="RadioGroupOrientation.getValue().inputValue"
                                                Mode="Raw" />
                                            <ext:Parameter Name="options.horizontalPages" Value="SpinnerPagesWide.getValue()"
                                                Mode="Raw" />
                                            <ext:Parameter Name="options.verticalPages" Value="SpinnerPagesTall.getValue()" Mode="Raw" />
                                            <ext:Parameter Name="options.scaleToFit" Value="CheckBoxScaleToFit.getValue()" Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:FormPanel ID="Panel2" runat="server" Region="West" Width="200" Padding="0" Split="true"
                        Border="true" AutoScroll="true" MinWidth="200">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" Pack="Start" DefaultMargins="6 6 8 6" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel runat="server" Title="<% $Resources: Strings, ShellPrintPageSetup  %>"
                                Frame="true" Height="160" Layout="FormLayout" LabelAlign="Top">
                                <Items>
                                    <ext:ComboBox ID="ComboBoxPaperSize" runat="server" AllowBlank="false" AnchorHorizontal="80%"
                                        ForceSelection="true" Editable="false" Mode="Local" FieldLabel="<% $Resources: Strings, ShellPrintPaperSize  %>">
                                        <Items>
                                            <ext:ListItem Text="A4" Value="2" />
                                            <ext:ListItem Text="A3" Value="3" />
                                            <ext:ListItem Text="US Letter" Value="1" />
                                        </Items>
                                    </ext:ComboBox>
                                    <ext:RadioGroup runat="server" ColumnsNumber="2" ID="RadioGroupOrientation" HideLabel="true">
                                        <Items>
                                            <ext:Radio ID="RadioPortrait" runat="server" InputValue="Portrait" />
                                            <ext:Radio ID="RadioLandscape" runat="server" InputValue="Landscape" />
                                        </Items>
                                    </ext:RadioGroup>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="PanelPageScaling" runat="server" StyleSpec="padding-bottom: 10px"
                                Title="<% $Resources: Strings, ShellPrintPageScale  %>" Frame="true" Height="200"
                                Layout="FormLayout">
                                <Items>
                                    <ext:Checkbox runat="server" ID="CheckBoxScaleToFit" BoxLabel="<% $Resources: Strings, ShellPrintScaleToFit  %>"
                                        HideLabel="true">
                                    </ext:Checkbox>
                                    <ext:SpinnerField runat="server" ID="SpinnerPagesWide" TabIndex="2" MinValue="1"
                                        MaxValue="100" Width="60" FieldLabel="<% $Resources: Strings, ShellPrintPagesWide  %>"
                                        LabelAlign="Right">
                                    </ext:SpinnerField>
                                    <ext:SpinnerField runat="server" ID="SpinnerPagesTall" TabIndex="3" MinValue="1"
                                        MaxValue="100" Width="60" FieldLabel="<% $Resources: Strings, ShellPrintPagesTall  %>"
                                        LabelAlign="Right">
                                    </ext:SpinnerField>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FormPanel>
                    <ext:Panel runat="server" ID="PanelContent" Border="true" Region="Center">
                        <AutoLoad Mode="IFrame" ShowMask="true" ManuallyTriggered="true">
                            <Params>
                                <ext:Parameter Name="documentType" Value="Pdf" Mode="Value" />
                                <ext:Parameter Name="streamMode" Value="Inline" Mode="Value" />
                                <ext:Parameter Name="documentId" Value="function(){return HiddenDocumentId.getValue(); }"
                                    Mode="Raw" />
                                <ext:Parameter Name="options.paperSize" Value="function(){return ComboBoxPaperSize.getValue(); }"
                                    Mode="Raw" />
                                <ext:Parameter Name="options.orientation" Value="function(){return RadioGroupOrientation.getValue().inputValue; }"
                                    Mode="Raw" />
                                <ext:Parameter Name="options.horizontalPages" Value="function(){return SpinnerPagesWide.getValue(); }"
                                    Mode="Raw" />
                                <ext:Parameter Name="options.verticalPages" Value="function(){ return SpinnerPagesTall.getValue(); }"
                                    Mode="Raw" />
                                <ext:Parameter Name="options.scaleToFit" Value="function(){ return CheckBoxScaleToFit.getValue(); }"
                                    Mode="Raw" />
                            </Params>
                        </AutoLoad>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    <ext:Window runat="server" ID="WindowDetectionFailed" Modal="true" Width="550" Height="300"
        Closable="false" Hidden="true" Layout="FormLayout" HideLabels="true" Padding="10"
        Resizable="false" BodyCssClass="body-plain">
        <Items>
            <ext:Label ID="Label1" runat="server" Cls="shell-alert shell-warning" Text="<% $Resources: Strings, ShellPrintProblem %>">
            </ext:Label>
            <ext:Label ID="Label2" runat="server" Text="<% $Resources: Strings, ShellPrintPdfNotDetected %>">
            </ext:Label>
            <ext:DisplayField runat="server">
            </ext:DisplayField>
            <ext:RadioGroup runat="server" ColumnsNumber="1" ID="RadioDetectionChoice">
                <Items>
                    <ext:Radio runat="server" Checked="true" ID="RadioContinueExcel" InputValue="Excel"
                        BoxLabel="<% $Resources: Strings,ShellPrintPdfNotDetectedExportExcel %>">
                    </ext:Radio>
                    <ext:Radio runat="server" ID="RadioContinuePDF" InputValue="Continue" BoxLabel="<% $Resources: Strings, ShellPrintPdfNotDetectedContinue  %>">
                    </ext:Radio>
                    <ext:Radio runat="server" ID="RadioCancelPrint" InputValue="Close" BoxLabel="<% $Resources: Strings, ShellPrintPdfNotDetectedClose %>">
                    </ext:Radio>
                </Items>
            </ext:RadioGroup>
        </Items>
        <Buttons>
            <ext:Button runat="server" ID="ButtonDetectionContinue" Text="<% $Resources: Strings, Continue %>">
                <Listeners>
                    <Click Handler="
                    
                    switch(RadioDetectionChoice.getValue().inputValue)
                    {
                        case 'Excel':
                            WindowDetectionFailed.hide();
                            ButtonExportXls.fireEvent('click');
                            break;
                        case 'Continue':
                            WindowDetectionFailed.hide();
                            PanelContent.reload();
                            break;
                        case 'Close':
                            window.close();
                            break;

                    }
                    
                    " />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>
</asp:Content>
    Last edited by Daniil; Feb 07, 2012 at 4:57 PM. Reason: [CLOSED]
  2. #2
    Feb 01, 2012, 5:14 PM
    Hi,

    Please try the following Click listener instead of your one.

    Example
    <Click Handler="var onReload = function () {
                    if (Ext.isIE8) {
                        PanelContent.load(Ext.apply(PanelContent.getAutoLoad(), {
                            callback : function (panel) {
                                (function () {
                                    panel.getBody().Ext.getBody().repaint();
                                }).defer(100, panel)
                            }
                        }));
                    } else {
                        PanelContent.reload();   
                    }
                };" 
        Delay="1" />
    Does it help?
  3. #3
    Feb 10, 2012, 5:39 PM
    No it still doesn't work. There is even no reload action.
    I manually try this
     PanelContent.load(Ext.apply(PanelContent.getAutoLoad(), {
                            callback : function (panel) {
                                (function () {
                                    panel.getBody().Ext.getBody().repaint();
                                }).defer(100, panel)
                            }
                        }));
    the panel shows the mask but still not refresh.
  4. #4
    Feb 10, 2012, 6:55 PM
    Please try to add the alert to check the repaint function is executed.
    alert("test");
panel.getBody().Ext.getBody().repaint();
    Can you see an alert box with the "test" text?
  5. #5
    Feb 13, 2012, 4:43 PM
    Quote Originally Posted by Daniil View Post
    Please try to add the alert to check the repaint function is executed.
    alert("test");
panel.getBody().Ext.getBody().repaint();
    Can you see an alert box with the "test" text?
    No, I can't see the alert box
  6. #6
    Feb 13, 2012, 4:48 PM
    Please try:
    <Click Handler="if (Ext.isIE8) {
                    PanelContent.load(Ext.apply(PanelContent.getAutoLoad(), {
                        callback : function (panel) {
                            (function () {
                                alert('I am here');
                                this.getBody().Ext.getBody().repaint();
                            }).defer(100, panel)
                        }
                    }));
                } else {
                    PanelContent.reload();  
                }" />
  7. #7
    Feb 14, 2012, 8:47 AM
    Quote Originally Posted by Daniil View Post
    Please try:
    <Click Handler="if (Ext.isIE8) {
                    PanelContent.load(Ext.apply(PanelContent.getAutoLoad(), {
                        callback : function (panel) {
                            (function () {
                                alert('I am here');
                                this.getBody().Ext.getBody().repaint();
                            }).defer(100, panel)
                        }
                    }));
                } else {
                    PanelContent.reload();  
                }" />
    Hi Daniil:
    No, I still can not see the alert box pop up. The page refresh but still the panel didn't
  8. #8
    Feb 14, 2012, 9:00 AM
    Please try:
    <Click Handler="alert('Is IE8? ' + Ext.isIE8);
                if (Ext.isIE8) {
                    PanelContent.load(Ext.apply(PanelContent.getAutoLoad(), {
                        callback : function (panel) {
                            alert('The callback is executed.');
                            (function () {
                                alert('I am here to repaint.');
                                this.getBody().Ext.getBody().repaint();
                            }).defer(100, panel)
                        }
                    }));
                } else {
                    PanelContent.reload(); 
                }" />
    Can you see any of alert boxes?
  9. #9
    Feb 14, 2012, 9:08 AM
    Quote Originally Posted by Daniil View Post
    Please try:
    <Click Handler="alert('Is IE8? ' + Ext.isIE8);
                if (Ext.isIE8) {
                    PanelContent.load(Ext.apply(PanelContent.getAutoLoad(), {
                        callback : function (panel) {
                            alert('The callback is executed.');
                            (function () {
                                alert('I am here to repaint.');
                                this.getBody().Ext.getBody().repaint();
                            }).defer(100, panel)
                        }
                    }));
                } else {
                    PanelContent.reload(); 
                }" />
    Can you see any of alert boxes?
    I can only see the first alert box pop up which said "Is IE8? true".
  10. #10
    Feb 14, 2012, 9:15 AM
    Please add:
    if (Ext.isIE8) {
    alert(Ext.encode(PanelContent.getAutoLoad()));
    and post the content of that alert box.
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] Windows autoload doesn't work as manually trigger load in client side
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Feb 29, 2012, 8:41 AM
  2. [CLOSED] IE9 Refresh window content
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 19
    Last Post: May 19, 2011, 12:47 PM
  3. Refresh ext:Panel content
    By reiben in forum 1.x Help
    Replies: 3
    Last Post: Mar 29, 2011, 5:01 PM
  4. Trigger store refresh event
    By dan182 in forum 1.x Help
    Replies: 4
    Last Post: Jun 23, 2010, 2:09 PM
  5. Load GridPanel manually with RemotePaging (without AutoLoad)
    By RPIRES in forum 1.x Help
    Replies: 4
    Last Post: Jun 14, 2010, 11:12 AM

Posting Permissions