zoukankan      html  css  js  c++  java
  • ExtJs Tree加载选项卡,选项卡加载页面不用iframe

      点击树节点,自动加载选项卡对应的页面, 效果图:

      

      JS Code:

    一、创建TreeStore

     var store = Ext.create('Ext.data.TreeStore', {
                    root: {
                        expanded: true,
                        children: [
    				{ text: "Tab 1", panel: 'tab-1', leaf: true },
    				{ text: "Tab 2", panel: 'tab-2', leaf: true },
    				{ text: "Tab 3", panel: 'tab-3', leaf: true }
    			]
                    }
                });
    

      

    二、创建选项卡Tabs

     var tabs = Ext.create('Ext.tab.Panel', {
                    region: 'center', //for border layout
                    margins: '5 5 5 5',
                    defaults: { bodyPadding: 10 },
                    items: [
    			{
    			    title: 'Tab 1',
    			    itemId: 'tab-1',
    			    loader: {
    			        url: 'html1.htm',
    			        contentType: 'html',
    			        autoload: true,
    			        loadMask: true,
    			        scripts: true
    			    },
    			    listeners: {
    			        activate: function (tab) {
    			            tab.loader.load();
    			        }
    			    }
    
    			},
    			{
    			    title: 'Tab 2',
    			    itemId: 'tab-2',
    			    loader: {
    			        url: 'html2.htm',
    			        contentType: 'html',
    			        autoload: true,
    			        loadMask: true,
    			        scripts: true
    			    },
    			    listeners: {
    			        activate: function (tab) {
    			            tab.loader.load();
    			        }
    			    }
    			},
    			{
    			    title: 'Tab 3',
    			    itemId: 'tab-3',
    			    loader: {
    			        url: 'html3.htm',
    			        contentType: 'html',
    			        autoload: true,
    			        loadMask: true,
    			        scripts: true
    			    },
    			    listeners: {
    			        activate: function (tab) {
    			            tab.loader.load();
    			        }
    			    }
    			}
    		]
                });
    

      

    二、创建树

        var tree = Ext.create('Ext.tree.Panel', {
                    region: 'west', //for border layout
                    collapsible: true,
                    title: 'Menu',
                     200,
                    store: store,
                    rootVisible: false,
                    margins: '5 0 5 5',
                    listeners: {
                        select: function (s, m) {
                            tabs.setActiveTab(m.raw.panel);
                        }
                    }
                });
    

      源码地址:ExtJsDemo1

  • 相关阅读:
    Java 中的按值传递
    字符串排序(非字典排序)
    字符串匹配的KMP算法(转)
    效率更高的整数转化为字符串函数
    Trie 树(转)
    C 语言字符串(译)
    linux 下 epoll 编程
    CSS攻击:记录用户密码
    Wireshark(抓包神器)使用方法
    搭建KVM环境——Linux上安装KVM带web管理界面
  • 原文地址:https://www.cnblogs.com/xchit/p/3296557.html
Copyright © 2011-2022 走看看