首页的TabStrip 问题

yan

我做不到像例子这样的效果

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

<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

你的导航是啥样的？用什么方式实现的？

yan

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

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

Landroid

用到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

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

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

Landroid

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

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