Ext3 动态加载树菜单

Ext.onReady(function(){
 
 
 /** **************树根开始****************************** */
 var mainRoot = new Ext.tree.AsyncTreeNode({
  text : "菜单根节点",
  id : "root",
  leaf : false
 });
 var mainLoader = new Ext.tree.TreeLoader({
  url : "/LibrarySystem/menu/Menu_getMenus",
  baseParams : {
   id:""
  }

 });
 mainLoader.on("beforeload", function(loader, node) {
  loader.baseParams.id = (node.id == "root" ? "":node.id );
 });

 /****************树根结束****************************** */
 
 /*************头部面板开始***********************/
 var headPanel = new Ext.Panel({
  id:"headPanel",
  autoLoad:"/LibrarySystem/app/foot/head.html"
 });
 /*************头部面板开始***********************/
 
 /*************尾部面板开始***********************/
 var footPanel = new Ext.Panel({
  id:"footPanel",
  autoLoad:"/LibrarySystem/app/foot/foot.html"
 });
 /*************尾部面板结束***********************/
 
 
 /*************主要内容面板开始***********************/
 
 var mainTabPanel = new Ext.TabPanel({
  /* 内容 */
  id : "mainTabPanel",
  margins:"0 10 0 0",
  /*title : "内容",*/
  xtype : "tabpanel",
  activeTab : 0,
  items : [ {
   id : "welcome",
   title : "欢迎页面",
   iconCls : 'application_homeIcon',
   layout : "fit",
   html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/welcome/welcome.html></iframe>',
  } ]
 });
 
 var centerPanel = new Ext.Panel({
  id:"centerPanel",
  layout : "fit",
  items:mainTabPanel
 });
 /*************主要内容面板结束***********************/
 
 
 /*************主面板开始***********************/
 var mainPanel = new Ext.Panel({
  id : "mainPanel",
  layout : "border",
  items:[{
   region:"north",
   height:100,
   layout:"fit",
   frame:true,
   items:headPanel
  },{
   region:"south",
   height:30,
   layout:"fit",
   frame:true,
   items:footPanel
  },
  {
   frame:true,
   region:"west",
   width:200,
   title:"菜单",
   lines:false,
   autoScroll: true,
   layout:"fit",
   /*可收缩面板*/
   collapsible: true,
   /*可拉动边框*/
   split:true,
   id : "mainTreePanel",
   /*title : "树菜单",*/
   xtype : "treepanel",
   root : mainRoot,
   loader : mainLoader,
   rootVisible : false,
   enableTabScroll:true,
   /* 动态加载的树叶节点的监听事件 */
   listeners : {
    click : function(node, event) {
     event.stopEvent();// 阻止默认的事件
     if (node.isLeaf()) {
      // 叶子节点事件处理
      var tab = Ext.getCmp("mainTabPanel");
      // 此处可以进行ajax请求,获取autoLoad的路径
      //ajax请求url路径
      Ext.Ajax.request({
          url : "/LibrarySystem/menu/Menu_getMenusById",
          params: { id:node.id},
          success: function(response){
           var resultObject =  Ext.decode(response.responseText);
           var resultStateEnd = resultObject.url.split(".")[1];
           if(resultStateEnd=="jsp" || resultStateEnd=="html"){
            tab.add({
           id : node.id + "Tab",
           title : node.text,
           iconCls:resultObject.iconCls,
           html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src='+resultObject.url+'></iframe>',
           closable : true
          });
          /* 显示当前打开的面板 */
            tab.setActiveTab(node.id + "Tab");
           }else{
            tab.add({
           id : node.id + "Tab",
           title : node.text,
           html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/error/error.html></iframe>',
           closable : true
          });
          /* 显示当前打开的面板 */
            tab.setActiveTab(node.id + "Tab");
           }
          },
          failure: function(){
           Ext.Msg.show({
            title:"警告",
            msg:"请求数据失败",
            buttons:Ext.Msg.OK,
            icon: Ext.MessageBox.WARNING
           });
           tab.add({
          id : node.id + "Tab",
          title : node.text,
          html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src=/LibrarySystem/app/error/error.html></iframe>',
          closable : true
         });
         /* 显示当前打开的面板 */
           tab.setActiveTab(node.id + "Tab");
          }
       });
     } else {
      // 单击菜单显示或者隐藏
      node.toggle();
     }
    }
   }
  },{
   region:"center",
   layout:"fit",
   items:centerPanel
  }]
 });
 /*************主面板结束***********************/
 new Ext.Viewport({items:mainPanel,layout:'fit'});
});



评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值