FineUI 官方论坛

标题: 【已确认】IFrame中的树如何与父窗口中的选项卡控件交互 [打印本页]
作者: wolkai    时间: 2013-11-22 07:41
标题: 【已确认】IFrame中的树如何与父窗口中的选项卡控件交互
前提：
左侧菜单是IFAME
问题：
1、点击菜单节点
2、未正常添加TAB
3、只激活对应前面（邮件收发）TAB,感觉ID好像一致

截图：
[attach]3741[/attach]初始化邮件收发正常
[attach]3742[/attach]
切换短信收发
[attach]3743[/attach]



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


作者: sanshi    时间: 2013-11-22 10:54
你自己都说明原因了：只激活对应前面（邮件收发）TAB,感觉ID好像一致
作者: wolkai    时间: 2013-11-22 13:03
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
x-debug.js 默认会被引用到页面上。你可以把 x-debug.js 中的函数拿出来，修改成符合你需求的。


需要上传重新问题的完整示例工程，方便调试解决问题
作者: wolkai    时间: 2013-11-22 14:16
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
wolkai 发表于 2013-11-22 14:16
附件太大
http://yunpan.cn/QUQTNz49xzAsa
老大帮我看看吧，我不太熟悉JS和extjs ,一直调试不通。

你只需要为不同的树节点设置不同的NodeID即可，类似：
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <Tree>
  3.     <TreeNode Text="突发事件申请管理">
  4.         <TreeNode NodeID="mail_1" Text="突发事件申请" Target="mainframe" NavigateUrl="./html/mail-1.html">
  5.         </TreeNode>
  6.         <TreeNode NodeID="mail_2" Text="突发事件收件箱" Target="mainframe" NavigateUrl="./html/mail-2.html" >
  7.         </TreeNode>
  8.         <TreeNode NodeID="mail_3" Text="突发事件发件箱" Target="mainframe" NavigateUrl="./html/mail-3.html" >
  9.         </TreeNode>
  10.     </TreeNode>
  11.     <TreeNode Text="通讯录管理">
  12.         <TreeNode NodeID="mail_4" Text="通讯录" Target="mainframe" NavigateUrl="./html/mail-4.html">
  13.         </TreeNode>
  14.     </TreeNode>
  15. </Tree>
复制代码


我回头会写个例子增加到 FineUI v4.0 的官网示例中
作者: wolkai    时间: 2013-11-22 16:03
谢谢老大，解决问题了，我写的是ID ，应该写成 NodeID
作者: sanshi    时间: 2013-11-22 16:07
这个会作为官方示例增加到 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
这个更新会增加到FineUI v4.0 中，代码已经提交，感兴趣的网友可以自行下载：https://fineui.codeplex.com/SourceControl/list/changesets

关键代码：
1. default.aspx中的JS：
  1. <script>
  2.         var mainTabStripClientID = '<%= mainTabStrip.ClientID %>';

  4.         F.ready(function () {

  6.             window.mainTabStrip = F(mainTabStripClientID);

  8.             var menuLis = $('.menu ul li');

  10.             function updateLeftMenu(menuType) {

  12.                 menuLis.removeClass('selected');
  13.                 menuLis.filter('.menu-' + menuType).addClass('selected');

  15.                 window.frames['leftframe'].location.href = './leftmenu.aspx?menu=' + encodeURIComponent(menuType);
  16.             }

  18.             // 点击顶部菜单，加载左侧IFrame菜单
  19.             menuLis.click(function (e) {
  20.                 var $this = $(this);
  21.                 var classNames = /menu\-(\w+)/.exec($this.attr('class'));
  22.                 if (classNames.length == 2) {
  23.                     var menuType = classNames[1];

  25.                     updateLeftMenu(menuType);
  26.                 }
  27.             });

  29.             // 根据页面的Hash值，来初始化左侧IFrame菜单
  30.             var hash = window.location.hash;
  31.             var hashArray = /.+\/html\/(.+)\-\d+\.html/.exec(hash);
  32.             if (hashArray && hashArray.length === 2) {
  33.                 updateLeftMenu(hashArray[1]);
  34.             }

  36.         });
  37.     </script>
复制代码

2. leftmenu.aspx 中的JS：
  1. <script>
  2.         var leftTreeID = '<%= leftTree.ClientID %>';

  4.         F.ready(function () {

  6.             // 展开树的第一个节点，并选中第一个节点下的第一个子节点（在右侧IFrame中打开）
  7.             var tree = F(leftTreeID);
  8.             var treeFirstChild = tree.getRootNode().firstChild;

  10.             // 展开第一个节点（如果想要展开全部节点，调用 tree.expandAll();）
  11.             treeFirstChild.expand();


  14.             // 初始化主框架中的树(或者Accordion+Tree)和选项卡互动，以及地址栏的更新
  15.             // treeMenu： 主框架中的树控件实例，或者内嵌树控件的手风琴控件实例
  16.             // mainTabStrip： 选项卡实例
  17.             // addTabCallback： 创建选项卡前的回调函数（接受tabConfig参数）
  18.             // updateLocationHash: 切换Tab时，是否更新地址栏Hash值
  19.             // refreshWhenExist： 添加选项卡时，如果选项卡已经存在，是否刷新内部IFrame
  20.             // refreshWhenTabChange: 切换选项卡时，是否刷新内部IFrame
  21.             // hashWindow：需要更新Hash值的窗口对象，默认为当前window
  22.             F.util.initTreeTabStrip(tree, parent.mainTabStrip, null, true, false, false, parent);

  24.         });
  25.     </script>
复制代码

[attach]3756[/attach]

[attach]3757[/attach]

作者: wolkai    时间: 2013-11-26 11:40
谢谢老大



欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4