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大家随意发挥
           
     });

转载于:https://www.cnblogs.com/hannover/archive/2010/10/10/1847319.html