Bug in Panel Loader

  1. #1

    Bug in Panel Loader

    Hello.

    I have this in aspx:
                        
    <ext:Panel ID="pnAddMercadoria" runat="server" Title="Adicionar Mercadorias" TitleAlign="Right" Height="250" Collapsible="true"
                            Collapsed="true" IconAlign="Right" Frame="true" Icon="Add">
                            <Loader
                                runat="server"
                                Url="addMercadoria.aspx"
                                Mode="Frame"
                                DisableCaching="true">
                                <LoadMask ShowMask="true" />
                            </Loader>
                            <Listeners>
                                <Expand Handler="this.reload();" />
                                <Collapse Handler="this.clearContent();" />
                            </Listeners>
                        </ext:Panel>
    in .apsx.cs:
            protected void cbOperacao_DirectChange(object sender, DirectEventArgs e)
            {
                LoadContents("fatAddMercadoria.aspx"); //for example.
            }
    
    
            protected void LoadContents(string vUrl)
            {
                this.pnAddMercadoria.LoadContent(new ComponentLoader()
                {
                    Url = vUrl,
                    Mode = LoadMode.Frame,
                    DisableCaching = true
                });
            }
    It turns out that this is giving problem, when calling the procedure the panel is only with the mask of "loading" and can not expand it, the attached image helps to understand.
    Click image for larger version. 

Name:	Sem título.jpg 
Views:	64 
Size:	89.6 KB 
ID:	24866

    To resolve this, either I leave the panel> Collapsed="false" <, or I add these lines:
            protected void LoadContents(string vUrl)
            {
                this.pnAddMercadoria.LoadContent(new ComponentLoader()
                {
                    Url = vUrl,
                    Mode = LoadMode.Frame,
                    DisableCaching = true
                });
               this.pnAddMercadoria.Collapsed = false;  //<<<<<
               this.pnAddMercadoria.Collapsed = true;  //<<<<<
            }
    But this is bad, because it is loading every time the event fires, and I would like it to be loaded only when the user has expanded the panel.

    tks for help;
  2. #2
    Hello @oespiao,

    Please provide a runnable and simplified code sample demonstrating how to reproduce the issue.

    The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.

    Tips for creating simplified code samples

    If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.

    When posting your code samples in the forums, please paste that sample within [CODE] tags. The [CODE] tags will add formatting and syntax highlighting to your sample.

    The following two forum posts provide many excellent tips for posting in the forums:

    1. More Information Required
    2. Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
  3. #3
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<object> list = new List<object>
                {
                    new {Text = "teste1.aspx", Value = 1},  //any page
                    new {Text = "teste2.aspx", Value = 2},  //any page
                };
    
                this.Store1.DataSource = list;
                this.Store1.DataBind();
             }
        }
    
        protected void cbTipo_DirectChange(object sender, DirectEventArgs e)
        {
            LoadContents(cbTipo.RawValue.ToString());
        }
    
        protected void LoadContents(string vUrl)
        {
            this.pnPanel.LoadContent(new ComponentLoader()
            {
                Url = vUrl,
                Mode = LoadMode.Frame,
                DisableCaching = true
            });
            // this.pnAddMercadoria.Collapsed = false;
            // this.pnAddMercadoria.Collapsed = true;
        }
    
    
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <ext:ResourceManager runat="server" />
        <title></title>
    </head>
    <body>
        <form id="Main" runat="server">
            <div>
                <table>
                    <tr>
                        <td>
                            <ext:ComboBox
                                ID="cbTipo"
                                runat="server"
                                DisplayField="Text"
                                ValueField="Value"
                                QueryMode="Local"
                                OnDirectChange="cbTipo_DirectChange">
                                <Store>
                                    <ext:Store ID="Store1" runat="server">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="Value">
                                                <Fields>
                                                    <ext:ModelField Name="Text" />
                                                    <ext:ModelField Name="Value" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                            </ext:ComboBox>
                        </td>
                    </tr>
                </table>
            </div>
            <table>
                <tr>
                    <ext:Panel ID="pnPanel" runat="server" Title="Teste" TitleAlign="Right" Height="250" Collapsible="true"
                        Collapsed="true" IconAlign="Right" Frame="true" Icon="Add">
                        <Loader
                            runat="server"
                            Url="x.aspx"
                            Mode="Frame"
                            DisableCaching="true">
                            <LoadMask ShowMask="true" />
                        </Loader>
                        <Listeners>
                            <Expand Handler="this.reload();" />
                            <Collapse Handler="this.clearContent();" />
                        </Listeners>
                    </ext:Panel>
                </tr>
            </table>
        </form>
    </body>
    </html>
  4. #4
    Hello @oespiao!

    Thanks for the sample code, fair enough!

    I think you just didn't choose a good event to bind the loading to. You can use the change event on the dropbox to bind the panel loader's URL only, and not reload it.

    If you want the panel to be reloaded if already expanded, then you can add a callback to the direct event from the combo box.

    Here's a reviewed version of the page you provided. A use case scenario will follow:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                List<object> list = new List<object>
                {
                    new {Text = "61771-page1.aspx", Value = 1},  //any page
                    new {Text = "61771-page2.aspx", Value = 2},  //any page
                };
    
                this.Store1.DataSource = list;
                this.Store1.DataBind();
             }
        }
    
        protected void cbTipo_DirectChange(object sender, DirectEventArgs e)
        {
            pnPanel.Loader.Url = cbTipo.SelectedItem.Text;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <ext:ResourceManager runat="server" />
        <title></title>
        <script type="text/javascript">
            var handleExpand = function (item) {
                // Expand only if an url has been chosen in the combo box
                if (item.getLoader().url) {
                    this.load();
                } else {
                    Ext.Msg.alert('No selection', 'Please select a page to load before trying to expand.');
                    return false;
                }
            }
    
            var handleRefreshPanel = function () {
                var panel = App.pnPanel;
    
                // We will load the panel again only and only if it is already expanded.
                if (!panel.collapsed) {
                    panel.load();
                }
            }
        </script>
    </head>
    <body>
        <form id="Main" runat="server">
            <ext:ComboBox
                ID="cbTipo"
                runat="server"
                DisplayField="Text"
                ValueField="Value"
                QueryMode="Local">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server" IDProperty="Value">
                                <Fields>
                                    <ext:ModelField Name="Text" />
                                    <ext:ModelField Name="Value" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <DirectEvents>
                    <Change OnEvent="cbTipo_DirectChange" Success="handleRefreshPanel();" />
                </DirectEvents>
            </ext:ComboBox>
            <ext:Panel
                ID="pnPanel"
                runat="server"
                Title="Teste"
                TitleAlign="Right"
                Height="250"
                Collapsible="true"
                Collapsed="true"
                IconAlign="Right"
                Frame="true"
                Icon="Add"
                WidthSpec="100%"
                >
                <Loader
                    runat="server"
                    Mode="Frame"
                    DisableCaching="true"
                    AutoLoad="false">
                    <LoadMask ShowMask="true" />
                </Loader>
                <Listeners>
                    <BeforeExpand Fn="handleExpand" />
                    <Collapse Handler="this.clearContent();" />
                </Listeners>
            </ext:Panel>
        </form>
    </body>
    </html>
    Use case:
    1. click the panel's expander button.
    A message will be shown, requiring the user to select something in the combo box.
    2. select one of the option in the combo box
    3. click the panel's expander button again
    The page pointed by the selected option will be loaded.
    4. select another entry in the combo box (with the panel still expanded)
    The loading mask will be displayed, and the contents updated.

    In order to ensure the load mask is properly being displayed, you may want to use a System.Threading.Thread.Sleep(1000); on the child pages' Page_Load() event.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Worked perfectly...
    Thank you so much.

Similar Threads

  1. panel loader + viewerjs
    By ampathdev in forum 4.x Help
    Replies: 1
    Last Post: Apr 05, 2016, 8:24 PM
  2. [CLOSED] Panel Loader 404 when IIS is down
    By Geovision in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 10, 2016, 2:06 PM
  3. Replies: 1
    Last Post: Aug 12, 2015, 11:43 AM
  4. [CLOSED] MVC - Panel - Loader
    By thchuong in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 15, 2014, 4:09 PM
  5. Panel Loader example in Razor
    By basder in forum 2.x Help
    Replies: 4
    Last Post: Mar 24, 2014, 3:34 PM

Posting Permissions