ext实例二（ext4.2点击左侧树，右侧tabPanel显示iFrame）

如果我的博文能帮到你，我感到非常荣幸。能力所限，对于我所写的内容如有不详不对，你们能给一些意见的话我将非常感谢。以后我会将我在工作中学到的一些知识，尽量整理出来给大家分享。 你们的意见是我的动力

以上篇文章的效果图和代码为例讲解。
var treeStore : 是创建的用于显示的数据，提供给leftTree使用
var leftTree  : 是创建的左侧树容器（其中listeners为监听）

itemclick: function(view, rcd, item, idx, event, eOpts)
单击事件--代码功能：当该iFrame的tab对象不存在，创建一个新的iFrame,如果已创建了，那么直接切换显示（不重新访问url）。tab = Ext.getCmp("容器对象id值");
panelCenter.setActiveTab(tab);//显示该iFrame的tab;
//panelCenter.setActiveTab(0);通过已打开tab的位置显示，0表示第一个tab

itemclick: function(view, rcd, item, idx, event, eOpts){
	       	var dirid = rcd.raw.id; //节点id
	       	var dirleaf = rcd.raw.leaf; //节点leaf
		var tab = Ext.getCmp("tab_"+dirid);
	       	if(!tab && dirleaf){
	       		//newIframe
	       		createIframe(rcd);
	       	}else if(!dirleaf){
	       		return;
	       	}
		tab = Ext.getCmp("tab_"+dirid);
		panelCenter.setActiveTab(tab);
	      }

双击事件---代码功能：如果该iFrame的tab对象不存在，就新创建一个；如果已存在，则切换到这个tab,并重新请求一次链接url

itemdblclick: function(view, rcd, item, idx, event, eOpts){
	       	//alert("dbclick Body");
	       	var dirid = rcd.raw.id; //节点id
	       	var dirleaf = rcd.raw.leaf; //节点leaf
			var tab = Ext.getCmp("tab_"+dirid);
	       	if(!tab && dirleaf){
				// 添加新的tab，如果tab已经存在，则将其设置为当前可见tab
				createIframe(rcd);
			}else{
				tab.show();
			tab.load(tab.src);//重新加载该url地址
				tab = Ext.getCmp("tab_"+dirid);
				panelCenter.setActiveTab(tab);
			}
	      }

右击事件---代码功能：在这里可以做右键菜单，等事情

itemcontextmenu: function(view, rcd, item, idx, event, eOpts){
	    	  eOpts.preventDefault();//阻止浏览器右键
	    	  alert("右键点击事件");
	      }

左侧树完整代码:

var treeStore = Ext.create('Ext.data.TreeStore', {
  root: {
  	id: "0",
  	text: "根节点",
    expanded: true,
    children: [{id:"1",text: "业务模块", expanded: true, children: [   
            {id:"11",text: "应用管理", linkUrl: "general/appExec/go_main", leaf: true},   
            {id:"12",text: "产品管理", linkUrl: "general/appNormal/go_main", leaf: true},   
            {id:"13",text: "客户管理", linkUrl: "general/appTree/go_main", leaf: true},   
            {id:"14",text: "银行卡管理", linkUrl: "general/appTree/go_main", leaf: true}   
        ]},   
        {id:"2",text: "系统模块", expanded: true, children: [   
            {id:"21",text: "数据备份", linkUrl: "general/appNormal/gView/usermy?area_id=2",leaf: true},   
            {id:"22",text: "系统监控", linkUrl: "general/appTree/gView/treeuser?id=0",leaf: true}   
        ]}   
    ]}   
});   

//左边树
var leftTree = Ext.create('Ext.tree.Panel', {
	title: "业务模块",
  	store: treeStore,
  	border: false,
  	rootVisible: true,
  	listeners: {
	  	itemclick: function(view, rcd, item, idx, event, eOpts){
	       	var dirid = rcd.raw.id; //节点id
	       	var dirtext = rcd.raw.text; //节点text
	       	var dirleaf = rcd.raw.leaf; //节点leaf
	       	var dirurl = rcd.raw.linkUrl; //节点url
			var tab = Ext.getCmp("tab_"+dirid);
	       	if(!tab && dirleaf){
	       		//newIframe
	       		createIframe(rcd);
	       	}else if(!dirleaf){
	       		return;
	       	}
			tab = Ext.getCmp("tab_"+dirid);
			panelCenter.setActiveTab(tab);
	      },
        itemdblclick: function(view, rcd, item, idx, event, eOpts){
	       	//alert("dbclick Body");
	       	var dirid = rcd.raw.id; //节点id
	       	var dirleaf = rcd.raw.leaf; //节点leaf
			var tab = Ext.getCmp("tab_"+dirid);
	       	if(!tab && dirleaf){
				// 添加新的tab，如果tab已经存在，则将其设置为当前可见tab
				createIframe(rcd);
			}else{
				tab.show();
				tab.load(tab.src);
				tab = Ext.getCmp("tab_"+dirid);
				panelCenter.setActiveTab(tab);
			}
	      },
	      itemcontextmenu: function(view, rcd, item, idx, event, eOpts){
	    	  eOpts.preventDefault();
	    	  alert(12333);
	      }
	}
});
//左边
var menu=[leftTree,{title:"系统管理",html:"<ul style='list-style-type:none'><li>sssss</li></ul>"},{title:"配置管理"}]; 
var panelWest = new Ext.Panel({
	title: "菜单栏目",
	width:	250,
	maxWidth: 300,
	collapsible: true,//是否可以折叠
	region: "west",
	layout: "accordion",
	items: menu,//左侧的容器数组
	split: true //是否可以分开
});