本文介绍如何在不引入Ext框架的情况下实现父窗体与子窗体间的ExtJS组件交互，包括父窗体向子窗体添加TreePanel及子窗体触发父窗体的MessageBox示例。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>学习EXT</title>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
</head>
<body>
<h1>父页</h1>
<iframe src="ifr.htm" width="400" height="300" frameborder="1" scrolling="yes" id="ifr1"></iframe>
</body>
</html>
<script> Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
title:"一棵小树",
width:300,
height:200,
loader:new Ext.tree.TreeLoader(),
root:new Ext.tree.AsyncTreeNode({text:"树根",children:[{text:"叶子1",leaf:true},{text:"叶子2",leaf:true}]})
});
tree.render(Ext.get("ifr1").dom.contentWindow.document.getElementById("ifr_div_1")); //父对子操作
});
</script>
----------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>子页</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script language="javascript">
function btnOnclick() {
self.parent.Ext.MessageBox.alert('提示', '你好，我的中国'); //子对父的操作
}
</script>
</head>
<body bgcolor="yellow">
<h3> 子页</h3>
<div id="ifr_div_1"></div>
<input type="button" value="按我" onclick="btnOnclick()" />
</body>
</html>
目的:
不用在子页面添加对Ext框架的引用!
扫一扫
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
