FineUI 官方论坛

标题: 首页的TabStrip 问题 [打印本页]

作者: yan 时间: 2012-4-20 13:23
标题: 首页的TabStrip 问题
本帖最后由 yan 于 2012-4-20 13:24 编辑

我做不到像例子这样的效果[attach]308[/attach]

我点的每一个页面都会在浏览器的新标签打开。

<ext:Region ID="mainRegion" runat="server" Position="Center" Layout="fit" Margins="0 0 0 0"
            ShowHeader="false" Title="">
            <Items>
                  <ext:TabStrip ID="mainTabStrip" EnableTabCloseMenu="true" ShowBorder="false" runat="server">
                     <Tabs>
                        <ext:Tab ID="Tab1" Title="首页" Layout="Fit" Icon="House" runat="server">
                              <Items>
                                 <ext:ContentPanel ID="ContentPanel1" ShowBorder="false" BodyPadding="10px" ShowHeader="false" AutoScroll="true"
                                    CssClass="intro" runat="server">
                                    欢迎进入........................................
                                 </ext:ContentPanel>
                              </Items>
                        </ext:Tab>
                     </Tabs>
                  </ext:TabStrip>
            </Items>
         </ext:Region>

script type="text/javascript">
      var IDS = {
         mainTabStrip: '<%= mainTabStrip.ClientID %>'
      };
</script>
<script src="./js/default.js" type="text/javascript"></script>

default.js文件：
function onReady() {
//var btnExpandAll = Ext.getCmp(IDS.btnExpandAll);
//var btnCollapseAll = Ext.getCmp(IDS.btnCollapseAll);
//var treeMenu = Ext.getCmp(IDS.treeMenu);
var mainTabStrip = Ext.getCmp(IDS.mainTabStrip);
//var windowSourceCode = Ext.getCmp(IDS.windowSourceCode);
// // 点击全部展开按钮
// btnExpandAll.on('click', function () {
//       treeMenu.expandAll();
// });
// // 点击全部折叠按钮
// btnCollapseAll.on('click', function () {
//       treeMenu.collapseAll();
// });

// // 点击树节点
// treeMenu.on('click', function (node, event) {
//       if (node.isLeaf()) {
//          // 阻止事件传播
//          event.stopEvent();
//          var href = node.attributes.href;
//          // 修改地址栏
//          window.location.hash = '#' + href;
//          // 新增Tab节点
//          addExampleTab(node);
//       }
// });
// 动态添加一个标签页
function addExampleTab(node) {
      var href = node.attributes.href;
      // 动态创建按钮
      var sourcecodeButton = new Ext.Button({
         text: "源代码",
         type: "button",
         cls: "x-btn-text-icon",
         icon: "./res.axd?icon=PageWhiteCode",
         listeners: {
            click: function (button, e) {
                  windowSourceCode.box_show('./source.aspx?files=' + href, '源代码');
                  e.stopEvent();
            }
         }
      });
//       var openNewWindowButton = new Ext.Button({
//          text: '新标签页中打开',
//          type: "button",
//          cls: "x-btn-text-icon",
//          icon: "./res.axd?icon=TabGo",
//          listeners: {
//             click: function (button, e) {
//                   window.open(href, "_blank");
//                   e.stopEvent();
//             }
//          }
//       });
//       var refreshButton = new Ext.Button({
//          text: '刷新',
//          type: "button",
//          cls: "x-btn-text-icon",
//          icon: "./res.axd?icon=Reload",
//          listeners: {
//             click: function (button, e) {
//                   // 注意：button.ownerCt 是工具栏，button.ownerCt.ownerCt 就是当前激活的标签页。
//                   Ext.DomQuery.selectNode('iframe', button.ownerCt.ownerCt.getEl().dom).contentWindow.location.reload(); //.replace(href);
//                   e.stopEvent();
//             }
//          }
//       });
//       // 动态添加一个带工具栏的标签页
//       var tabId = 'dynamic_added_tab' + node.id.replace('__', '-');
//       var currentTab = mainTabStrip.getTab(tabId);
//       if (!currentTab) {
//          mainTabStrip.addTab({
//             'id': tabId,
//             'url': href,
//             'title': node.text,
//             'closable': true,
//             'bodyStyle': 'padding:0px;',
//             'iconCls': 'icon_' + href.replace(/[^.]+\./, ''),
//             'tbar': new Ext.Toolbar({
//                   items: ['->', sourcecodeButton, '-', refreshButton, '-', openNewWindowButton]
//             })
//          });
//       } else {
//          mainTabStrip.setActiveTab(currentTab);
//       }
// }
mainTabStrip.on('tabchange', function (tabStrip, tab) {
      if (tab.url) {
         //window.location.href = '#' + tab.url;
         window.location.hash = '#' + tab.url;
      } else {
         window.location.hash = '#';
      }
});
var HASH = window.location.hash.substr(1);
var FOUND = false;
(function (node) {
      var i, currentNode, nodes, path;
      if (!FOUND && node.hasChildNodes()) {
         nodes = node.childNodes;
         for (i = 0; i < nodes.length; i++) {
            currentNode = nodes;
            if (currentNode.isLeaf()) {
                  if (currentNode.attributes.href === HASH) {
                     path = currentNode.getPath();
                     treeMenu.expandPath(path); //node.expand();
                     treeMenu.selectPath(path); // currentNode.select();
                     addExampleTab(currentNode);
                     FOUND = true;
                     return;
                  }
            } else {
                  arguments.callee(currentNode);
            }
         }
      }
})(treeMenu.getRootNode());

window.addExampleTab = addExampleTab;
}

作者: Landroid 时间: 2012-4-20 14:26
你的导航是啥样的？用什么方式实现的？

作者: yan 时间: 2012-4-20 22:20

Landroid 发表于 2012-4-20 14:26
你的导航是啥样的？用什么方式实现的？

左边是手风琴，点手风琴的节点就新建一个TAB在右边显示，就跟例子的一样。

作者: Landroid 时间: 2012-4-20 22:39
用到tree了么？
用到的话，下面的不注释
  //var treeMenu = Ext.getCmp(IDS.treeMenu);

// 点击树节点
// treeMenu.on('click', function (node, event) {
//       if (node.isLeaf()) {
//          // 阻止事件传播
//          event.stopEvent();
//          var href = node.attributes.href;
//          // 修改地址栏
//          window.location.hash = '#' + href;
//          // 新增Tab节点
//          addExampleTab(node);
//       }
// });

作者: yan 时间: 2012-4-20 22:53

Landroid 发表于 2012-4-20 22:39
用到tree了么？
用到的话，下面的不注释
//var treeMenu = Ext.getCmp(IDS.treeMenu);

这个tree我是在后台创建的。

作者: Landroid 时间: 2012-4-20 23:56

yan 发表于 2012-4-20 22:53
这个tree我是在后台创建的。

后台绑定的时候，给node添加onclientclick
详见帖子第7楼，
http://bbs.extasp.net/forum.php? ... mp;tid=197#lastpost

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)