zoukankan      html  css  js  c++  java
  • Extjs 菜单树、如何单击树弹出tab、如何用DataView显示图片

    效果图片:

    树菜单的建立,这里将动态树的产生:

    声明:homeTree

    var homeTree = new Neo.index.HomeTree({
         collapsible : true,
         split : true,
         margins : '5 0 5 5',
         cmargins : '5 5 5 5'
        });

    其中这个Neo.index.HomeTree是一个js文件,如下

    HomeTree.js:

    Ext.namespace("Neo");
    Ext.namespace("Neo.index");
    Neo.index.HomeTree = Ext.extend(Ext.tree.TreePanel, {
    id : 'homeTree',
    region : 'west',
    minSize : 100,
    maxSize : 300,
    collapsible : true,
    border : false,
    rootVisible : false,
    lines : false,
    autoScroll : true,
    root : new Ext.tree.AsyncTreeNode({
       id : 'tree-root',
       text : "系统功能",
       loader : new Ext.tree.TreeLoader({
        dataUrl : 'common.htm?action=getHomeMenu',     //调用controller的方法,加载树的数据项
        listeners : {
         "beforeload" : function(treeloader, node) {
          treeloader.baseParams = {
           id : node.id,
           method : 'POST'
          };
         },
         "click" : function(node, event) {
          // 叶子节点点击不进入链接
          if (node.isLeaf()) {
           // 显示叶子节点菜单
           event.stopEvent();
           ALLEvents(node);
          } else {
           // 不是叶子节点不触发事件
           event.stopEvent();
           // 点击时展开
           node.toggle();
          }

         }
        }
       })
    }),
    collapseFirst : false,
    initComponent : function() {
       Ext.apply(this, {

       });
       Neo.index.HomeTree.superclass.initComponent.apply(this,
         arguments);

    },
    onRender : function() {

       Neo.index.HomeTree.superclass.onRender.apply(this, arguments);
    }
    });
    Ext.reg('hometree', Neo.index.HomeTree);

    Conntroller的getHomeMenu方法:

    public void getHomeMenu(HttpServletRequest request, HttpServletResponse response)
    throws Exception {
       
        log.info("Someone come from ip address <" + request.getRemoteAddr()
        + ">");
        log.debug("reach CommonController getMenu");

         //树的叶子都是死的,大家可以换成对数据库的方式
        String jsonMenu =
        "[{text : '快速连接',iconCls: 'icon-hotel',expanded : true,children : [{text : '最新动态',id : 'donTai',iconCls : 'icon-dongtai',leaf : true},{text : '最新公告',id : 'gongGao',iconCls : 'icon-gonggao', leaf : true},{text : '文件下载',id : 'downFile',iconCls : 'icon-file', leaf : true},{text : '图片展览',id : 'picture',iconCls : 'icon-pic', leaf : true}]}]";
        System.out.println(jsonMenu);
        request.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.print(jsonMenu);

    }

    为这棵树添加点击事件:

    homeTree.on("click",function(node,event){
        if(node.id=="donTai")//donTai是他的节点id
        {
         tabs.add(new Neo.frontdesk.mainview.DongTaiGrid({//DongTaiGrid是一个js文件
             id : 'dongTai',
             title : '最 新 动 态',
             closable : true//是否允许关闭
            })).show();
            }else if(node.id=="gongGao")
        {
         tabs.add(new Neo.frontdesk.mainview.GongGaoGrid({
             id : 'gongGao',
             title : '最 新 公 告',
             closable : true
            })).show();
            }else if(node.id=="downFile")
        {
         tabs.add(new Neo.frontdesk.mainview.FileDownload({
             id : 'filedownload',
             title : '文 件 下 载',
             closable : true
            })).show();
            }else if(node.id=="picture")
        {
         tabs.add(new Ext.Panel({//这个是一个图片显示的panel,参照官方的例子,没有额外的js文件
              id:'images-view',
              frame:true,
              autoHeight:true,
              collapsible:true,
              closable : true,
              bodyStyle:'background-color:#FEFEFE;',//设置面板体的背景色
              style : 'padding:3px 3px 3px 3px',
              layout:'fit',
              title:'活 动 图 片',
              header : false,
            iconCls : 'icon-pic',                  //这tab的icon
              items: new Ext.DataView({   //这里用到了DataView
                  store: picStore=new Ext.data.JsonStore({
                      url: 'common.htm?action=ReadAllPictures',
                       autoLoad: true,
                       root: 'data',
                       id:'name',
                       fields:[
                             'picName', 'picUrl',
                         ]
                   }),
                   style : 'padding:10px 10px 10px 10px',
                  tpl: new Ext.XTemplate(
              '<tpl for=".">',
                  '<div class="thumbnail" id="{picName}">',//注意这个div样式的应用,没有这个样式则显示效果不佳
                  '<div class="thumb"><a href="public/images/HuoDong_Pics/{picUrl}" target="_blank" class="photo"><img src="public/images/HuoDong_Pics/{picUrl}" title="{picName}"></a></div>',
                  '<span class="x-editable">{picName}</span></div>',
              '</tpl>',
              '<div class="x-clear"></div>'
           ),
                  autoHeight:true,
                  //multiSelect: true,
                
                  emptyText: 'No images to display'
              })
           })
              ).show();
            }
       });
      

    这个网页西部的显示:
       var westCpt = new Ext.Panel( {
        region :'west',
        id :'west-panel',
        el :'west',
        split :true,
        width :225,
        minSize :160,
        maxSize :260,
        margins :'0 0 0 0',
        title :'快速导航',
        collapsible :true,
        layout :'accordion',
        layoutConfig : {
         animate :true
        },
        items : [ {
         title :'菜单',
         border :false,
         iconCls :'nav',
         items: homeTree //加载上面的那棵树
        }, {
         title :'设置',
         border :false,
         iconCls :'navigation'
        
        } ]
       });

    这个tabs是中间首次显示的tab,在上面引用的

    var tabs = new Ext.TabPanel({
                region:'center',
                deferredRender:true,
                activeTab:0,
                autoScroll :true,
                enableTabScroll:true,
                listeners:{
                     remove: function(tp, c){
                      c.hide();
                     }
                   },
                autoDestroy: false,
                items:[welcomePanel]//这个items大家随意发挥
               
         });

  • 相关阅读:
    atitit.TokenService v3 qb1 token服务模块的设计 新特性.docx
    Atitit attilax在自然语言处理领域的成果
    Atitit 图像清晰度 模糊度 检测 识别 评价算法 原理
    Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结
    atitit。企业的价值观 员工第一 vs 客户第一.docx
    Atitit 实现java的linq 以及与stream api的比较
    Atitit dsl exer v3 qb3 新特性
    Atititi tesseract使用总结
    Atitit 修改密码的功能流程设计 attilax总结
    atitit.TokenService v3 qb1  token服务模块的设计 新特性.docx
  • 原文地址:https://www.cnblogs.com/hannover/p/1847319.html
Copyright © 2011-2022 走看看