`
猜不透
  • 浏览: 132268 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extjs4.2点击树形菜单生成tab页并访问发送请求

阅读更多



 以下是全部代码,使用的是extjs4.2.1,,代码复制即可使用: 

 

 

Ext.onReady(panelLayout);

function panelLayout() {
                //新建tabpanel
	var tab = Ext.create('Ext.TabPanel', {
		region : 'center',
		deferredRender : false,
		activeTab : 0,
		resizeTabs : true, // turn on tab resizing
		minTabWidth : 115,
		tabWidth : 135,
		enableTabScroll : true
	});
	var viewPort = Ext.create('Ext.Viewport', {
		layout : "border",
		items : [ {
			region : 'north',
			minHeight : 100,
			html : 'north'
		}, {
			title : 'West Region is collapsible',
			region : 'west',
			xtype : 'panel',
			width : 200,
			collapsible : true, // 设置可折叠
			id : 'west-region-container',
			layout : 'fit',
			margins : '0 0 0 0',
			layout : 'accordion',
			title : '菜单',
			split : true,
			collapsible : true,
			layoutConfig : {
				animate : true
			},     
			items : [{
                        title : '业务信息处理',
                        xtype : 'treepanel',
                        expanded : true,
                        animate : true,
                        enableDD : false,
                        border : false,
                        containerScroll : true,
                        root : {
                            text : '..',
                            id:'root',
                            children : [{
                                text : '业务信息',
                                id : 'bussinessInfo_gotoBusinessInfo.do',
                                leaf : true
                            }, {
                                text : '组织管理',
                                leaf : true,
                                id :'dept_list.jsp'
                            }]
                        },
			listeners:{
	//添加节点点击事件	itemclick: function(v,r,item){
					var n = tab.getComponent(r.raw.id);
					 if(r.raw.id=='root'){
					 	return;
					 }
                                        if (!n) { // 判断是否已经打开该面板
                                            n = tab.add({
                                                'id' : r.raw.id,
                                                'title' : r.raw.text,
                                                 closable : true, // 通过html载入目标页
                                                 html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+r.raw.id+'"></iframe>'
                                            });
                                        }
                                    tab.setActiveTab(n);
                             } 
			}
                    }, {
                        title : '信息中心',
                        border : false,
                        html : '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
                    }, {
                        title : '系统设置',
                        border : false,
                        html : '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
                    }]
		},tab, {
			region : 'south',
			minHeight : 25,
			html:"<div align='center'>版权所有 xxxx有限公司 © 信息服务中心</div>"
		} ]
	})

}

 

  • 大小: 123.2 KB
分享到:
评论
1 楼 u010995675 2015-08-27  
大神请问下itemclick: function(v,r,item){ 
                    var n = tab.getComponent(r.raw.id);  中的v,r,item是什么意思啊?还有r.raw.id怎么获取的id呢?谢谢

相关推荐

Global site tag (gtag.js) - Google Analytics