【已确认】IFrame中的树如何与父窗口中的选项卡控件交互

wolkai · 发表于 2013-11-22 07:41:30

前提：
左侧菜单是IFAME
问题：
1、点击菜单节点
2、未正常添加TAB
3、只激活对应前面（邮件收发）TAB,感觉ID好像一致

截图：
初始化邮件收发正常

切换短信收发

我对extjs不是很熟，恳请大大帮下忙，这个问题如何处理？

sanshi · 发表于 2013-11-22 10:54:33

你自己都说明原因了：只激活对应前面（邮件收发）TAB,感觉ID好像一致

wolkai · 发表于 2013-11-22 13:03:36

sanshi 发表于 2013-11-22 10:54
你自己都说明原因了：只激活对应前面（邮件收发）TAB,感觉ID好像一致

我对extjs 不是很熟悉
1、我是调用老大你的default.js 中的 initTreeTabStrip 方法，但是该方法是传的控件对象，并没有传ID
2、我看了下initTreeTabStrip 是属于x-debug.js 中的一个方法，不知x-debug.js是否已经封装到Fineui中还是怎么处理的

sanshi · 发表于 2013-11-22 13:28:34

x-debug.js 默认会被引用到页面上。你可以把 x-debug.js 中的函数拿出来，修改成符合你需求的。

需要上传重新问题的完整示例工程，方便调试解决问题

wolkai · 发表于 2013-11-22 14:16:14

sanshi 发表于 2013-11-22 13:28
x-debug.js 默认会被引用到页面上。你可以把 x-debug.js 中的函数拿出来，修改成符合你需求的。

附件太大
http://yunpan.cn/QUQTNz49xzAsa
老大帮我看看吧，我不太熟悉JS和extjs ,一直调试不通。
我就想实现左侧浮动框架菜单，点击菜单后新增一个TAB ，在TAB中打开菜单导航导航地址。

现在功能实现，出现上面问题，恳请帮忙

sanshi · 发表于 2013-11-22 15:36:58

wolkai 发表于 2013-11-22 14:16
附件太大
http://yunpan.cn/QUQTNz49xzAsa
老大帮我看看吧，我不太熟悉JS和extjs ,一直调试不通。

你只需要为不同的树节点设置不同的NodeID即可，类似：

<?xml version="1.0" encoding="utf-8" ?>
<Tree>
<TreeNode Text="突发事件申请管理">
<TreeNode NodeID="mail_1" Text="突发事件申请" Target="mainframe" NavigateUrl="./html/mail-1.html">
</TreeNode>
<TreeNode NodeID="mail_2" Text="突发事件收件箱" Target="mainframe" NavigateUrl="./html/mail-2.html" >
</TreeNode>
<TreeNode NodeID="mail_3" Text="突发事件发件箱" Target="mainframe" NavigateUrl="./html/mail-3.html" >
</TreeNode>
</TreeNode>
<TreeNode Text="通讯录管理">
<TreeNode NodeID="mail_4" Text="通讯录" Target="mainframe" NavigateUrl="./html/mail-4.html">
</TreeNode>
</TreeNode>
</Tree>

复制代码

我回头会写个例子增加到 FineUI v4.0 的官网示例中

wolkai · 发表于 2013-11-22 16:03:12

谢谢老大，解决问题了，我写的是ID

，应该写成 NodeID

sanshi · 发表于 2013-11-22 16:07:03

这个会作为官方示例增加到 FineUI v4.0 中。

-增加示例iframe/topmenu4/default.aspx，演示IFrame中的树如何与父窗口中的选项卡控件交互（wolkai-4386）。

已更新至确认列表：http://fineui.com/bbs/forum.php?mod=viewthread&tid=4171

sanshi · 发表于 2013-11-22 16:14:36

这个更新会增加到FineUI v4.0 中，代码已经提交，感兴趣的网友可以自行下载：https://fineui.codeplex.com/SourceControl/list/changesets

关键代码：
1. default.aspx中的JS：

<script>
var mainTabStripClientID = '<%= mainTabStrip.ClientID %>';
F.ready(function () {
window.mainTabStrip = F(mainTabStripClientID);
var menuLis = $('.menu ul li');
function updateLeftMenu(menuType) {
menuLis.removeClass('selected');
menuLis.filter('.menu-' + menuType).addClass('selected');
window.frames['leftframe'].location.href = './leftmenu.aspx?menu=' + encodeURIComponent(menuType);
}
// 点击顶部菜单，加载左侧IFrame菜单
menuLis.click(function (e) {
var $this = $(this);
var classNames = /menu\-(\w+)/.exec($this.attr('class'));
if (classNames.length == 2) {
var menuType = classNames[1];
updateLeftMenu(menuType);
}
});
// 根据页面的Hash值，来初始化左侧IFrame菜单
var hash = window.location.hash;
var hashArray = /.+\/html\/(.+)\-\d+\.html/.exec(hash);
if (hashArray && hashArray.length === 2) {
updateLeftMenu(hashArray[1]);
}
});
</script>

复制代码

2. leftmenu.aspx 中的JS：

<script>
var leftTreeID = '<%= leftTree.ClientID %>';
F.ready(function () {
// 展开树的第一个节点，并选中第一个节点下的第一个子节点（在右侧IFrame中打开）
var tree = F(leftTreeID);
var treeFirstChild = tree.getRootNode().firstChild;
// 展开第一个节点（如果想要展开全部节点，调用 tree.expandAll();）
treeFirstChild.expand();
// 初始化主框架中的树(或者Accordion+Tree)和选项卡互动，以及地址栏的更新
// treeMenu：主框架中的树控件实例，或者内嵌树控件的手风琴控件实例
// mainTabStrip：选项卡实例
// addTabCallback：创建选项卡前的回调函数（接受tabConfig参数）
// updateLocationHash: 切换Tab时，是否更新地址栏Hash值
// refreshWhenExist：添加选项卡时，如果选项卡已经存在，是否刷新内部IFrame
// refreshWhenTabChange: 切换选项卡时，是否刷新内部IFrame
// hashWindow：需要更新Hash值的窗口对象，默认为当前window
F.util.initTreeTabStrip(tree, parent.mainTabStrip, null, true, false, false, parent);
});
</script>

复制代码

wolkai · 发表于 2013-11-26 11:40:49

谢谢老大

		自动登录	找回密码
密码			立即注册

【已确认】IFrame中的树如何与父窗口中的选项卡控件交互

本帖子中包含更多资源

本帖子中包含更多资源