Extjs学习笔记-1.TreePanel+TabPanel简单的树形菜单

最新推荐文章于 2018-05-10 10:34:10 发布
最新推荐文章于 2018-05-10 10:34:10 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： JAVA EXtjs 文章标签： extjs ext4 js ext javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/st291223883/article/details/29890231
版权

1、wmcoreframe.jsp

<%@ page contentType="text/html;charset=UTF-8" %>


 

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>.:GHT综合网管系统:.</title>

    <%@ includefile="/common/core/meta.jsp" %>

  <link rel="stylesheet"type="text/css" href="${ctx}/resource/core/ext-4.1.1/resources/css/ext-all.css"/>

  <link rel="stylesheet"type="text/css" href="${ctx}/css/core/ext/ext4-cn-font.css"/>

  <link rel="stylesheet"type="text/css" href="${ctx}/resource/core/ext-4.1.1/examples/shared/example.css"/>

  <link rel="stylesheet"type="text/css" href="${ctx}/resource/core/ext-4.1.1/examples/ux/css/CheckHeader.css"/>

  <script type="text/javascript"src="${ctx}/resource/core/ext-4.1.1/ext-all.js"></script>

  <script type="text/javascript"src="${ctx}/resource/core/ext-4.1.1/locale/ext-lang-zh_CN.js"></script>

  <script type="text/javascript"src="${ctx}/js/g2s/core/wmcoreframe.js"></script>

  </head>

 

  <body>

    <style type="text/css">

  .munuList {

    list-style: square;

    padding-left: 20px;

    margin-top: 6px;

    color: #000000;

    font-size: 12px;

    list-style-type:none;

  }

 

  a:link {

    color: #2C5394;

    text-decoration: none

  }

 

  a:visited {

    color: #2C5394;

    text-decoration: none

  }

 

  a:hover {

    color: #FF0000;

    text-decoration: underline

  }

 

  a:active {

    color: #2C5394;

    text-decoration: none

  }

 

  .title {

    background-color:#1F4D8B;

    padding: 5 5 5 5;

    color: white;

    width:100%;

    font-weight: bolder;

    text-align:center;

  }

  </style>

  </body>

</html>

2.、wmcoreframe.js

var treeClick;

var tabPanels =new Hashtable();

Ext.application({

       name:'wmcoreframe',

       launch:function(){

              var store =Ext.create('Ext.data.TreeStore', {

               autoScroll:true,//必要的时候自动滚动

               root: {

               expanded: true,

               children: [

                { text: 'G2S软交换网管系统',expanded: true,

                   children: [

                     {

                                 text:"系统信息",

                                  expanded: true,

                                 children:[

                                        {text:'版本信息',leaf: true,id:'1'},

                                        {text:'License信息',leaf: true,id:'2'},

                                        {text:'时间信息',leaf: true,id:'3'},

                                        {text:'地址信息',leaf: true,id:'4'},

                                        {text:'模块信息',leaf: true,id:'5'}

                                 ]

                     },{

                          text:"系统管理",

                           expanded: true,

                           children:[

                                {text:'在线呼叫',leaf: true,id:'6'},

                                        {text:'呼叫统计',leaf: true,id:'7'},

                                        {text:'呼叫记录',leaf: true,id:'8'},

                                        {text:'系统复位',leaf: true,id:'9'}

                           ]

                     },{

                          text:'呼叫管理',

                           expanded: true,

                           children:[

                                {text:'区域管理',leaf: true,id:'10'},

                                        {text:'终端用户',leaf: true,id:'11'},

                                        {text:'中继用户',leaf: true,id:'12'},

                                        {text:'服务级别',leaf: true ,id:'13'},

                                        {text:'功能级别',leaf: true, id:'14'},

                                        {text:'授权码',leaf: true, id:'15'},

                                        {text:'主叫转换',leaf: true, id:'16'},

                                        {text:'被叫转换',leaf: true, id:'17'},

                                        {text:'被叫识别',leaf: true, id:'18'},

                                        {text:'路由设置',leaf: true, id:'19'},

                                        {text:'组合转换',leaf:true, id:'20'},

                                        {text:'特服资源组',leaf: true, id:'21'},

                                        {text:'特服号码',leaf: true, id:'22'},

                                        {text:'系统音源',leaf: true ,id:'23'},

                                        {text:'IP范围限定',leaf: true, id:'24'}

                           ]

                     },{

                           text: "双归属",

                           expanded: true,

                           children:[

                                {text:'探测链路',leaf: true, id:'25'},

                                        {text:'接管配置',leaf: true ,id:'26'}

                           ]

                         

                     },{

                           text: "应用服务",

                           expanded: true,

                           children:[

                                {text:'一号通',leaf: true ,id:'27'},

                                        {text:'提醒服务',leaf: true ,id:'28'},

                                        {text:'语音信箱',leaf: true ,id:'29'},

                                        {text:'虚拟集团',leaf: true ,id:'30'},

                                        {text:'会议管理',leaf: true ,id:'31'}

                           ]

                         

                     },{

                           text: "调度业务",

                           expanded: true,

                           children:[

                                {text:'调度组',leaf: true, id:'32'}

                           ]

                         

                     },{

                           text: "日志信息",

                           expanded: true,

                           children:[

                                {text:'日志级别',leaf: true, id:'33'},

                                        {text:'系统日志',leaf: true, id:'34'},

                                        {text:'维护日志',leaf: true, id:'35'}

                           ]

                         

                     }

                     ,{

                           text: "备份恢复",

                           expanded: true,

                           children:[

                                {text:'备份数据',leaf: true, id:'36'},

                                        {text:'恢复数据',leaf: true, id:'37'}

                           ]

                         

                     }

                         ]

                     }

            ]

            }

              });

              //public function

              var addTab;

              var updateTab;

              //内容面板

              var contentPanel = newExt.TabPanel({

                     region : 'center',

                     enableTabScroll : true,

                     border:true,

                     activeTab : 0,

                     items : [{

                            id : 'homePage',

                            title : '首页',

                            autoScroll : true,

                            html : '<divstyle="color:#ff0000;"><h1align="center"><b><marquee direction="right"behavior="alternate" scrolldelay="100">欢迎使用G2S软交换管理系统</marquee></b></h1></div>'

                     }]

              });

              //树形面板

              var treepanel= newExt.tree.Panel({

                 id: 'westFrame',

            titleAlign: 'right',

           title: "<imageοnclick='window.top.reloadWestFrame()' src='" + ctx+"/image/refresh.gif' style='cursor:hand;width:16px;height:16px;'></image>",

            region: 'west',

            tabPosition: 'bottom',

            collapsible: true,

            hideCollapseTool:true,

            split: true,

            width: 250,

            minWidth: 50,

            maxWidth: 300,

            margin: '0 0 1 1',

            border:false,

            width:250,

            autoHeight:true,//自动设置高度

            autoScroll:true,//必要的时候自动滚动

            store:store,

            rootVisible: false,

            renderTo: Ext.getBody()

              });

             

      

             

              addTab = function(destTabPanel,id, tabTitle, targetUrl) {

                 var panel =  new Ext.panel.Panel({

                      id: id + '_panel',

                      title: "&nbsp;" +tabTitle + "&nbsp;",

                      loader: {

                          url: targetUrl,

                       //  renderer: 'html',

                          scripts: true,

                          scope: this,

                          autoLoad: true

                         /* ,callback: function() {

                              if (Ext.isIE8) {

                                  var ifrm = document.getElementById(id+'_Frame');

                                  ifrm.height=Ext.getCmp(id +'_panel').getHeight()-2;

                              }

                          }*/

                      },

                      autoScroll: true,

                      border: 1,

                      bodyBorder : false,

                      margins : '0 0 0 0',

                      closable:true

                 });

                 /**关闭*/

 

                 Ext.getCmp(id+'_panel').on(

                      'close',

                      function(panel) {

                          tabPanels.remove(id+'_panel');

                         // iframeRelease(panel);

                          delete panel;

                      }

                  );

                 tabPanels.put(id+'_panel',panel);

                 destTabPanel.add(panel).show();

              };

             

              updateTab = function(destTabPanel,id, tabTitle, targetUrl) {

                 var tab = destTabPanel.getComponent(id + '_panel');

                 if (tab) {

                      

                      //tabPanel.remove(tab);

                      destTabPanel.setActiveTab(tab);                //如果Tab存在，则将当前Tab切换到该Tab

                      return;

                 }

                 tab = addTab(destTabPanel, id, tabTitle, targetUrl);

                 destTabPanel.setActiveTab(tab);

                 

              };

 

                 

             

              // 设置树的点击事件五个参数Ext.view.View this,

              //Ext.data.Model record,HTMLElement item, Number index, Ext.EventObject e, Object eOpts

              treeClick=function (veiw, record,item, index, e, opts ) {

                     var url="";

                     var nodeId =record.raw.id;//获取id

                     var text=record.raw.text;//获取文字

                     if(text!='undefined'){

                if(text=='模块信息'){

                   url=ctx+'/g2s/sysinfo/module.action';

                }

                if(text=='地址信息'){

                   url=ctx+"/g2s/sysinfo/address.action";

                }

            }

                     /*******************alert(nodeId);

                     var n =contentPanel.getComponent(nodeId);

                     if(text!='undefined'){

                            if(text=='模块信息'){

                                   url=ctx+'/g2s/sysinfo/module.action';

                            }

                            if(text=='地址信息'){

                                   url=ctx+"/g2s/sysinfo/address.action";

                            }

                     }

                     if (n) {

                            contentPanel.remove(n);

                            contentPanel.setActiveTab(n);

                            return;

                            }

                     var tab =contentPanel.add({

                            'id' : nodeId,

                            'title' :text,

                            closable : true,

                            autoLoad : {

                                   url : url,

                                   scripts :true

                            } // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性

                     });

                     contentPanel.setActiveTab(tab);

 

*************************/

                     updateTab(contentPanel,nodeId, text, url);

              };

             

             

              treepanel.on('itemclick',treeClick);

             

             

             

              Ext.create('Ext.container.Viewport',{

        layout: 'border',

        items: [{

            id: 'topFrame',

            region: 'north',//北面内容

            height: 40,

            header: false,

            border: false,

            margins: '0 0 2 0',

           autoLoad : {

                url :ctx+"/common/core/g2s/header.jsp",//一个头部的内容，包括//顶端的图片

                scripts : true

            }

        },

             contentPanel,//中间内容面板

             treepanel//左边树

        , {

            id: 'bottomFrame',

            region: 'south',

            frame: true,

            height: 38,

            margin: '0 1 1 1',

            padding: '0 2 0 2',

            layout: {

                type: 'hbox',

                align: 'middle',

                pack: 'start'

            },

            items: [{

                id: 'bottomFrame_Left',

                xtype: 'container',

                height: 34,

                border: 0,

                padding: 0,

                flex: 7,

                layout: {

                    type: 'hbox',

                    align: 'middle',

                    pack: 'start'

                }

            },{

                id: 'bottomFrame_Right',

                xtype: 'container',

                border: 0,

                padding: 0,

                flex: 3,

                layout: {

                    type: 'hbox',

                    align: 'middle',

                    pack: 'end'

                }

            }]

        }]

    });

             

      

       }

});

以下为效果图


 

永垂不朽_伟少
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs4 treePanel节点刷新JS函数
03-30
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
ExtJs4之TreePanel
hsany330的专栏
11-09 253
Tree介绍 树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。 在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。 1.ExtJs4之Grid详细 2.ExtJs4之TreePanel 简单的Tree 代码： <head> <title></title> <link href="/ExtUI/ExtJs4..
ExtJs4之treepanel
suxiaolsx的专栏
09-17 190
对于Extjs学习者来说，treepanel的运用是必不可少的，treepanel主要就包括store层和view层，注意store层是Ext.data.TreeStore，与我们常用的Ext.data.Store是属于并列关系，同继承于Ext.data.AbstractStore，因此tree节点都有默认的model，包括allowDrag，allowDrop，checked，cls，depth...
EXTJS4之TreePanel
低调走过
08-10 2361
在EXTJS4中，对3.x中的组件也做了部分的调整和功能上的改进。本文中咱们主要来看一下。tree组件在3.x和4中的区别。 1、3.x中当我们想让我们的tree通过异步加载数据时，我们必须将我们的root节点设置成异步节点（AsyncTreeNode），然后在我们的treeloader的beforeload事件中，做加载前的参数设置。如果，我们不将其root设置为异步节点，那么我们的tree
ExtJS4.2 树形表格
Java小白的博客
03-03 1452
extjs 树形表格
extjs4.2 隐藏treePanel 的节点
david的专栏
10-17 4891
利用treePanel 的view来获取页面的html元素，设置它的display属性为none;   Ext.onReady(function(){  var store = Ext.create('Ext.data.TreeStore', {     root: {         expanded: true,         children: [            
extjs4.2 treePanel 实现动态的增、删、改
雨陆聪辰的博客
12-22 3107
关于树是怎么生成的我就不解释了 我们主要讲的是 treePanel 实现动态的增、删、改 首先我们要有一个树 然后在树上加入监听事件： listeners: { checkchange: function(node, checked) { node.
Extjs4.2 Tree使用技巧小结demo
weixin_34185560的博客
07-01 183
本案例使用了Ext.Tree.Panel的如下知识点： 1.刷新、重新加载Tree，定位到上次的节点位置 2.Tree的右键操作 3.Extjs4.x Tree获取当前选中的节点 4.新增、修改、删除Tree节点 5.修改tree节点的属性，例如text，iconCls，leaf等 6.treedata rest proxy 7.treeStore.sync的同步回调方法 8.Ex...
ExtJS4学习笔记十一 树控件的使用
逸雨涵梦的专栏
08-21 1481
一、树面板简单示例  Javascript代码   var tree = Ext.create('Ext.tree.Panel', {       title: '树面板简单示例',       width : 150,       height : 100,       renderTo: Ext.getBody(),       root: {
Extjs treepanel 增加新的虚拟节点
Ellie
05-10 889
有时候我们需要在工作中添加一个虚拟根节点 var treeStore; Ext.ajax({ url: 'url', method: 'post', async: false, }, function (json) { Ext.Arra...
ExtJs4 笔记（10） Ext.tab.Panel 选项卡
weixin_30851409的博客
12-21 175
《回到系列目录 本篇讲解选项卡控件。 一、基本选项卡 首先我们来定义一个基本的选项卡控件，其中每个Tab各有不同，Tab的正文内容可以有三种方式获取： 1.基本方式:通过定义html和items的方式。 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文。 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据。 另外，...
extjs4 treepanel、 树、节点的操作
.
08-31 5705
这是个tree panel的实例，是基于extjs的mvc模式，先得对mvc模式有一定的了解 效果图 store存储层下加载tree数据的类 Ext.define('yang.store.frameAAA.module.FrameAAAWestTreeStore', { extend : 'Ext.data.TreeStore', storeId : 'frameAAAW
Extjs4之 treepanel 操作
为梦想放生,创造梦一样的未来！
11-18 774
var areaTreePanel, treeResource,childrenData,areaFormPanel,dataType,mdflag; Ext.onReady(function(){ Ext.define("treeModel", {// 定义树节点数据模型 extend : "Ext.data.Model", fields : [{
ExtJs treepanel和TabPanel配合使用
朝花夕拾
08-11 1787
tree.js Ext.onReady(function() { Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8'; var center = new Ext.TabPanel( { id : 'tab_main', region : 'center', frame : false,
extjs4.2点击树形菜单生成tab页并访问发送请求
renjinlong的专栏
05-10 246
 以下是全部代码，使用的是extjs4.2.1,，代码复制即可使用：      Ext.onReady(panelLayout); function panelLayout() { //新建tabpanel var tab = Ext.create('Ext.TabPanel', { region : 'center', defer...
extjs中treepanel和tabpanel结合实现布局
且行且珍惜
04-27 542
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_LayoutPage1.cshtml"; }@section Script{ <script> Ext.onReady(panelLayout); function panelLayout() { //新建tabpa
EXTJS4.2 后台管理菜单栏
09-01 130
EXTJS 代码： 第一种方法： { title: '汽车信息管理', layout: 'fit', items: [ { xtype: 'treepanel', border: 0, rootVis...
ExtJS专题-TreePanel(1)
ama7449的博客
09-09 163
这次我们来学习下ExtJS中的树面板（TreePanel），很多人都说，只是为了树，都要好好学习ExtJS！可见大家对Tree的一往情深。从另一方面来说，Tree这种结构在实际项目中也的确用得相当广泛，所以我们很有必要研究一下它。这次我们完成的树大致上有这样的功能：它的节点是动态异步从后台（存储在数据库中一张电子产品分类表）加载的，节点之间可以拖曳，节点可以编辑，同时还支持右键菜单，而且...
学习 ExtJS 4 面板与布局
萌萌的It人 www.itmmd.com
06-14 3043
面板Panel Ext.panel.Panel拓展自Ext.container.Container,它可以应用布局（默认为AUTO）也可以作为各种组件的容器，并且可以拓展出更加强大的面板。作为标准的面板组件包括5部分，底部工具栏（bottom toolbars）、顶部工具栏（top toolbars）、面板头部（header）、面板底部（footer）和面板体（body），面板组件还内置了折叠
ExtJs 2.1 学习笔记概览
1. ExtJs结构树：这部分内容可能讲解了ExtJs的基本组织结构，包括其组件层次、类库的模块化设计以及如何理解并利用这些结构进行应用开发。 2. 对ExtJs的态度：作者指出ExtJs虽然功能强大，但也存在一些问题，如加载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值