Mar 23, 2011, 11:22 PM
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:
in "main page" (Default.aspx):
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:
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.