extjs项目整理一

viewport

/** 
*一个表示程序可视区域的特殊容器（浏览器可视区域）。 
*视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并 
*且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link *Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也 
*都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优*势非常明显。 
**/ 
var viewport = new Ext.Viewport({ 
layout : 'border', 
items : [{ 
cls : 'docs-header', 
height : 58, 
region : 'north', 
xtype : 'box', 
el : 'header', 
border : false, 
margins : '0 0 5 0' 
}, appMeunPanel, mainPanel] 
}); 
viewport.doLayout(); 

appMeunPanel Tree

/**
*AsyncTreeNode 异步加载根节点    
*TreeLoader 定义根节点的Loader 
*rootVisible:true,     //隐藏根节点    
*border:true,          //边框    
*animate:true,         //动画效果    
*autoScroll:true,      //自动滚动    
*enableDD:false,       //节点是否可以拖拽   
**/
var root = new Ext.tree.AsyncTreeNode({
	text : appMeuns[i].MENUNAME,
	draggable : false,
	id : appMeuns[i].MENUID
});
var node = new Ext.tree.TreePanel({
	title : appMeuns[i].MENUNAME,
	rootVisible : false,
	loader : new Ext.tree.TreeLoader({
	dataUrl : _ctx.base+ '/system/meun.action'
	}),
	animate : true,
	autoScroll : true,
	containerScroll : true,
	iconCls : appMeuns[i].MENUICON,
	root : root
});

Node click事件

node.on('click', function(node, e) {
	e.stopEvent();
	if (node.leaf) {
	reqType = 'js';
	var url = node.attributes.href;
	var icons = node.attributes.iconCls;
		if (url) {
			var parts = url.split('/');
			if (parts) {
				var fileName = parts[parts.length - 1];
				reqType = fileName.split('.')[1];
			}
		}							mainPanel.loadPanel(url,icons,node.text,reqType,appid,false);
	}
});

Mainpanel

/**
*enableTabScroll 有时标签页会超出TabPanel的整体宽度。为防止此情况下溢出的标*签页不可见，就需要将此项设为true以出现标签页可滚动的功能。只当标签页位于上方*的位置时有效（默认为false）。
* Ext.ux.TabCloseMenu() 关闭tab的插件
* superclass.constructor 用于指定超类或者基类构造。
* 我们使用javascript的call方法运行构造函数，在适用范围上。
* 第一个参数总是this，以保证构造器工作在调用函数的作用域。其它参数将被传递给父
*的构造函数
**/
MainPanel = function() {
	MainPanel.superclass.constructor.call(this, {
		id : 'doc-body',
		region : 'center',
		margins : '0 5 5 0',
		minTabWidth : 80,
		nocache: true,
		plugins : new Ext.ux.TabCloseMenu(),
		enableTabScroll : true, 
		activeTab : 0,
		items : {
			id : 'welcome-panel',
			title : '欢迎使用本系统',
			cls : 'empty',
			iconCls : 'icon-docs',
			autoLoad : {
				url : _ctx.base+'/html/page/welcome.html'
			},
			autoScroll : true
		}

Loadpanel 方法

Ext.extend(MainPanel, Ext.TabPanel, {
	loadPanel : function(href, cls, title, reqType, appid, index) {
		if (href == null) {
			Ext.Msg.alert("错误！", "请求路径为空！");
		} else {
			if (reqType == 'js') {
				Ext.Ajax.request( {
					url : _ctx.base+"/"+href,
					success : function(response, opts) {
						var obj = eval(response.responseText);
						var tab = cmp.getComponent(obj.id);
						if (tab) {
							cmp.setActiveTab(tab);
						} else {
							var panel = obj.init();
							panel.setTitle(title);
							panel.setIconClass(cls);
							cmp.setActiveTab(cmp.add(panel));
						}
						if (!index) {
							try {
								var tabs = Ext.util.Cookies.get('tabs');
								if (!tabs || tabs == null) tabs = "{}";
								tabs = Ext.util.JSON.decode(tabs);
								tabs[obj.id] = href + ":" + cls + ":" + title+ ":" + reqType + ":" + appid + ":"+ userid;
								Ext.util.Cookies.set("tabs", Ext.util.JSON.encode(tabs));
							} catch (e) {
								Ext.util.Cookies.clear("tabs");
							}
						}
					},
					failure : function(Optional) {
						Ext.Msg.alert("错误！", "加载模块失败！");
					}
				});
			} else {
				Ext.Msg.alert("错误！", "加载模块失败 ： 文件类型错误！");
			}
		}