[CLOSED] Tab Panel reload

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Tab Panel reload

    Hi,

    I need to reload the content of a couple of tabs on the page on the ComboBox Select direct event. My server code looks similar to this:

            protected void ComboInvestigators_Select(object sender, DirectEventArgs e)
            {
                var tab1 = this.TabPanel1.Items.FirstOrDefault<Component>(comp => comp.ID.Equals("tab1"));
                if (tab1 != null)
                    (tab1 as Ext.Net.Panel).Reload();
    
                var tab2 = this.TabPanel1.Items.FirstOrDefault<Component>(comp => comp.ID.Equals("tab2"));
                if (tab2 != null)
                    (tab2 as Ext.Net.Panel).Reload();
            }
    The markup for the TabPanel with the Listener:

                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center"
                    EnableTabScroll="true">
                    <Items>
                        <ext:Panel ID="tab1" runat="server" Title="Tab 1">
                            <AutoLoad Mode="IFrame" Url="~/TabPage1.aspx" ShowMask="true" />
                            <Listeners>
                                <Activate Handler="PanelExplorer.layout.setActiveItem(#{MenuPanel1});
                                                    PanelExplorer.items.each(function (item) {
                                                        if (item.menu.rendered) {
                                                            item.clearSelection();
                                                        }
                                                    });
                                                    PanelExplorer.getComponent('MenuPanel1').setSelection(#{mnTab1});" Delay="1" />
                            </Listeners>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
    The first tab is static while others are created dynamically. This works fine when the reloaded tab panel is the selected panel. Otherwise, inactive tab panels display distorted and partially loaded content after reloading that way. Please suggest a solution to the issue.

    Edit in: While we are at it, the server side TabPanel1.Items don't contain any dynamically created in Javascript tabs. What's the right way to access those tabs in the direct event?

    Thanks,

    Vadym
    Last edited by Daniil; May 30, 2012 at 6:38 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by vadym.f View Post
    Edit in: While we are at it, the server side TabPanel1.Items don't contain any dynamically created in Javascript tabs. What's the right way to access those tabs in the direct event?
    You can use the following.

    1. Put a created tab reference to window
    window[tab.id] = tab;
    2. Use
    Ext.Net.Panel tab = X.GetCmp<Ext.Net.Panel>("tabId");
    to get a proxy class. "A proxy class" means that it's not a real control, it just generates a respective script during DirectEvent to be executed on client.

    3. Call
    tab.Reload();
    By the way what about to reload the tabs on client?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,



    You can use the following.

    1. Put a created tab reference to window
    window[tab.id] = tab;
    2. Use
    Ext.Net.Panel tab = X.GetCmp<Ext.Net.Panel>("tabId");
    to get a proxy class. "A proxy class" means that it's not a real control, it just generates a respective script during DirectEvent to be executed on client.

    3. Call
    tab.Reload();
    By the way what about to reload the tabs on client?
    Hi Daniil,

    Thanks for the response!

    Ext.Net.Panel tab = X.GetCmp<Ext.Net.Panel>("tabId");
    throws a JS error if the tab wasn't actually created. Somehow, it doesn't evaluate to null on the server in that situation. Could you be more specific how to use the call to
    window[tab.id] = tab;
    to get a reference to the tab object in direct event?

    tab.Reload();
    on the server works if the tab is currently selected. If it's not, the content is not reloaded properly, e.g., the GridPanel BottomBar is not loaded. I've tried to code a Listener for the ComboBox like this:

    <Listeners><Select Handler="var tab=#{TabPanel1}.getComponent('tab1');tab.reload();" /></Listeners>
    That works about the same as the server call - fine for the selected tab, poorly for the inactive ones.

    Thanks,

    Vadym
  4. #4
    Well, indeed, there might be problems to load the content into a hidden iframe. Is the issue reproducible in all browsers or, maybe, is it IE related issue?

    Please try to set up
    LayoutOnTabChange="true"
    for the TabPanel and/or
    HideMode="Offsets"
    for the tabs.

    Quote Originally Posted by vadym.f View Post
    Ext.Net.Panel tab = X.GetCmp<Ext.Net.Panel>("tabId");
    throws a JS error if the tab wasn't actually created.
    Well, I think you should not call the Reload method for not created tabs.

    Quote Originally Posted by vadym.f View Post
    Could you be more specific how to use the call to
    window[tab.id] = tab;
    to get a reference to the tab object in direct event?
    Well, when you create a tab, register it:
    var tab = /* create tab */;
    
    window[tab.id] = tab;
    It's all if you need to reload the tabs on server. The things will become much easier if you would reload them on client.
  5. #5
    Quote Originally Posted by Daniil View Post
    Well, indeed, there might be problems to load the content into a hidden iframe. Is the issue reproducible in all browsers or, maybe, is it IE related issue?

    Please try to set up
    LayoutOnTabChange="true"
    for the TabPanel and/or
    HideMode="Offsets"
    for the tabs.
    The issue seems to be IE related. FireFox 12 handles that well. Is there any workaround for IE? These settings didn't work:
    LayoutOnTabChange="true"
    HideMode="Offsets"
    Quote Originally Posted by Daniil View Post
    Well, I think you should not call the Reload method for not created tabs.
    That's exactly my point. How do I know on the server side which tabs were created in JS and which weren't?
    Ext.Net.Panel tabAlerts = X.GetCmp<Ext.Net.Panel>("tab1");
    returns not null even if this tab never existed.

    Do I have to register tabs' IDs as you suggested, maybe using Hidden fields?
    window[tab.id] = tab;
    Thanks,

    Vadym
  6. #6
    Quote Originally Posted by vadym.f View Post
    The issue seems to be IE related. FireFox 12 handles that well. Is there any workaround for IE?
    I am afraid a single workaround is activating each tab before reloading.

    Quote Originally Posted by vadym.f View Post
    That's exactly my point. How do I know on the server side which tabs were created in JS and which weren't?
    Ext.Net.Panel tabAlerts = X.GetCmp<Ext.Net.Panel>("tab1");
    returns not null even if this tab never existed.
    Understand now. Well, there is no info on server about created widgets on client. So, a single way to get it on server is passing from client. You can use any approach you wish - saving created ids in Hidden field (-s) or passing them via DirectEvent ExtraParams.

    Do you really need to reload the tabs from server?
  7. #7
    Quote Originally Posted by Daniil View Post
    I am afraid a single workaround is activating each tab before reloading.



    Understand now. Well, there is no info on server about created widgets on client. So, a single way to get it on server is passing from client. You can use any approach you wish - saving created ids in Hidden field (-s) or passing them via DirectEvent ExtraParams.

    Do you really need to reload the tabs from server?
    It would be nice to because of the Load mask. I know it's not easily available via the Listener event model. Then again, my problem is that inactive tabs aren't reloaded gracefully either on the server or on the client. Maybe, I should keep an array of all hidden tabs to be reloaded in the Session or window object and reload only one at a time when it's selected by the user? But it's a bit convoluted. Anyway, thanks for your help!

    Vadym
  8. #8
    Quote Originally Posted by vadym.f View Post
    It would be nice to because of the Load mask. I know it's not easily available via the Listener event model.
    Please clarify are you facing any troubles with masking when reloading the tabs on client? If yes, could you clarify what exactly troubles?


    Quote Originally Posted by vadym.f View Post
    Then again, my problem is that inactive tabs aren't reloaded gracefully either on the server or on the client.
    Well, yes. A possible workaround is
    Quote Originally Posted by Daniil;
    I am afraid a single workaround is activating each tab before reloading.

    Quote Originally Posted by vadym.f View Post
    Maybe, I should keep an array of all hidden tabs to be reloaded in the Session or window object and reload only one at a time when it's selected by the user? But it's a bit convoluted.
    I think it would be a good solution! In addition it would improve performance.
  9. #9
    Quote Originally Posted by Daniil View Post
    Please clarify are you facing any troubles with masking when reloading the tabs on client? If yes, could you clarify what exactly troubles?
    Is there any way to show the EventMask when a tab is being reloaded in the ComboBox Select listener or in TabPanel Activate listener handler?

    Thanks,

    Vadym
  10. #10
    Do you need a mask on the whole page?
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] reload usercontrol in panel & checkbox
    By nhg_itd in forum 1.x Premium Help
    Replies: 3
    Last Post: Oct 10, 2011, 8:46 AM
  2. Grid Panel Reload
    By karthik.arian03 in forum 1.x Help
    Replies: 6
    Last Post: Feb 17, 2011, 11:31 AM
  3. [CLOSED] Efficient Panel Reload
    By macap in forum 1.x Premium Help
    Replies: 1
    Last Post: Oct 25, 2010, 2:25 PM
  4. [CLOSED] Reload an iframe within a panel
    By jeremyl in forum 1.x Premium Help
    Replies: 3
    Last Post: Nov 05, 2009, 12:55 PM
  5. Reload central panel content
    By Dgsoft.ru in forum 1.x Help
    Replies: 1
    Last Post: Apr 08, 2009, 6:34 AM

Tags for this Thread

Posting Permissions