Bubble events - catch Key in iFrame and bubble to parent?

  1. #1

    Bubble events - catch Key in iFrame and bubble to parent?

    Hey,
    as described in this example I have made a Button that, when pressed, creates a new Tab in a TabPanel and loads a certain page in an iFrame:

    <script type="text/javascript">
            var addTab = function (tabPanel, id, url, title) {
                var tab = tabPanel.getComponent(id);
    
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: title,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: "iframe",
                            maskMsg: "Loading " + url + "..."
                        }
                    });
    
                }
                tabPanel.setActiveTab(tab);
            }
        </script>
    So, the "main page" has a TabPanel, and the different Tabs open different local ASPX-pages. When focus is on the "main page" I can press for example F2 and react accordingly:

    in "main page" (Default.aspx):

    <ext:KeyMap ID="KeyMap1" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="F2" />
                </Keys>
                <Listeners>
                    <Event Handler="Ext.net.DirectMethods.Focus_Text();" />
                </Listeners>
            </ext:KeyBinding>   
            ...
    and in code-behind (Default.aspx.cs):

    [DirectMethod]
    public void Focus_Text()
    {
         TextField1.Focus();
    }
    PRessing F2 when focus IS NOT ON any of the iFrames (the Tabs in the TabPanel) works as expected, the TextField gets focus. But if I am in the iFrame there is two problems:

    1) First, the KeyMap isnt active in that iframe since it is a Page on its own
    To solve this, I can add the same KeyMap to the iFrame-pages.
    But, then the second problems shows its ugly face ;-)

    2) When I catch the key press in the iFrame-page, I want as usual to shift focus to the TextField that is placed in Default

    How can I do that? Can I bubble the keypress back to Default.aspx somehow or can I directly frm the iFrame-page set focus to the TextField on the Default.aspx?

    Thx =)

    UPDATE - THE 'NAME' ATTRIBUTE MUST BE SET ON THE CONTROL
    So, after messing about with this I realized that on the TextField I need to set the "name" attribute in order to be able to search for the element:

    <ext:TextField ID="TextField1" Name="SearchBox" ItemID="SearchBox" runat="server"></ext:TextField>
    I actually set both ItemId and Name to be sure. Using this, I can access the TextField1 this way (from my iFrame aspx-page):

    <Event Handler="parent.document.getElementsByName('SearchBox').item(0).value='argh'" />
    Last edited by wagger; Mar 24, 2011 at 9:22 AM.
  2. #2
    I have tried some of the solutions here:

    http://forums.ext.net/showthread.php...-within-IFrame
    http://examples1.ext.net/#/Panel/Bas...Communication/

    but so far no luck. It might have to do with my "path", so I detail that here.

    On Default.aspx (the parent) I have a number of controls, like this:

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Collapsible="false" Height="100" Region="North" Split="True" Title="MyTitle">
                     <TopBar>
                         // yada yada yada
                     </TopBar>
                     <BottomBar>
                        <ext:StatusBar 
                            ID="StatusBar1" 
                            runat="server"
                            DefaultText="Default status">
                            <Items>
                                <ext:TextField ID="TextField1" runat="server"></ext:TextField>
                            </Items>
                        </ext:StatusBar>
                    </BottomBar>
                    // yada yada
    the "TextField1" above is the field I talked about in the initial post.

    Now, the TabPanel in Default.aspx is located here (starting from the top):

    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Collapsible="false" Height="100" Region="North" Split="True" Title="Alfa Webbgränssnitt">
                    // IN here is the TextField1 as aboive
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Collapsible="true" Layout="Fit" Region="East" Split="true" Title="East" Width="175">
                   // yada
                </ext:Panel>
                <ext:Panel ID="Panel5" runat="server" Collapsible="true" Height="100" Region="South" Split="true" Title="South">
                   // yada
                </ext:Panel>
                <ext:Panel ID="Panel6" runat="server" Collapsible="true" Layout="accordion" Region="West" Split="true" Title="West" Width="175">
                   // yada
                </ext:Panel>
                <ext:Panel ID="Panel9" runat="server" Layout="Fit" Region="Center" Title="Center">
                    <Items>
                        <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
                            <Items>
                                <ext:Panel ID="Panel10" runat="server" Closable="true" Title="Tab 1">
                                    <Items>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="Panel11" runat="server" Title="Tab 2">
                                    <Items>
                                    </Items>
                                </ext:Panel>
                               // Here my new TabPages will be created sort of =)
                            </Items>
                        </ext:TabPanel>
                    </Items>
                </ext:Panel>
                // ...
    So, how do I from the iFrame-aspx-page reference the TextField1 above? I tried the following:

    <Event Handler="parent.getBody().TextField1.setValue('TEST!');" />
    <Event Handler="parent.parent.getBody().TextField1.setValue('TEST!');" />
    <Event Handler="parent.parent.parent.getBody().TextField1.setValue('TEST!');" />

    Its not working... hmm =)
    Last edited by Daniil; Mar 24, 2011 at 11:20 PM. Reason: Please use [CODE] tags for all code
  3. #3
    Hi,

    What is the client id of TextField1? Well, I see that it's in a content page, so, obviously, "TextField1" is not client side id.

    Well, to correct it please set IDMode="Explicit":
    <ext:TextField ID="TextField1" runat="server" IDMode="Explicit">
    The second thing. As far as I can see that there is the following structure:
    parent -> iframe (please correct me if I'm wrong)

    So, you could use the following code:
    parent.TextField1.setValue('Hello World');
    Please note that 'parent' is a 'window' instance of parent page. So, not sure what you mean by parent.getBody().

    Regarding focusing the field

    You could call a parent's DirectMethod from an iframe page.
    parent.Ext.net.DirectMethods.Focus_Text();
  4. #4
    I did update my post a day or so ago, and the "ID" of the TextField couldnt be used for finding it. I needed to set "name=..." for it t work.

    the "parent.TextField1...." didnt work as I described in my first post and I guess it had to do with the fact that I didnt have a "name"-attribute??

    The "parent.getBody()" was just testing away as much as I could to get it working. In the end I ended up with this:
    <Event Handler="parent.document.getElementsByName('SearchBox').item(0).focus()" />

    I dont know that "IDMode" is, and searching http://dev.sencha.com/deploy/dev/docs/ doesnt yield any results. Where can I read what all those attributes mean?

    You can close this thread anyways, it is solved =)
  5. #5
    Quote Originally Posted by wagger View Post
    I did update my post a day or so ago, and the "ID" of the TextField couldnt be used for finding it. I needed to set "name=..." for it t work.

    the "parent.TextField1...." didnt work as I described in my first post and I guess it had to do with the fact that I didnt have a "name"-attribute??
    Why "ID" of the TextField could not be used for finding it?

    Well, TextField1 must be a client side id.


    I dont know that "IDMode" is, and searching http://dev.sencha.com/deploy/dev/docs/ doesnt yield any results. Where can I read what all those attributes mean?
    Well, it's a server side property, therefore, it's absent in ExtJS docs.

    Please follow
    http://forums.ext.net/showthread.php?12957
    Last edited by Daniil; Mar 26, 2011 at 2:02 PM.
  6. #6
    Thanks =)

    Even though I didnt understand much of what was said in the link you provided =( Anyways, I'll figure it out eventually =) thanks =)
  7. #7
    Quote Originally Posted by wagger View Post
    Even though I didnt understand much of what was said in the link you provided =( Anyways, I'll figure it out eventually =)
    Well, when you will face with it you will understand, I'm sure:)

Similar Threads

  1. [CLOSED] Accessing Parent from Iframe
    By stoque in forum 1.x Premium Help
    Replies: 18
    Last Post: Jun 03, 2011, 9:10 PM
  2. [CLOSED] moveable bubble panel?
    By dev in forum 1.x Premium Help
    Replies: 7
    Last Post: Mar 24, 2011, 3:31 PM
  3. Add Tab to Parent from within IFrame
    By peter.campbell in forum 1.x Help
    Replies: 1
    Last Post: Feb 04, 2011, 12:01 PM
  4. [1.0] IFrame communication with parent page
    By olakara in forum 1.x Help
    Replies: 1
    Last Post: Apr 20, 2010, 9:00 AM
  5. Replies: 0
    Last Post: Jun 24, 2009, 4:53 PM

Tags for this Thread

Posting Permissions