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.MENUNAME,draggable : false,id : appMeuns.MENUID});var node = new Ext.tree.TreePanel({title : appMeuns.MENUNAME,rootVisible : false,loader : new Ext.tree.TreeLoader({dataUrl : _ctx.base+ '/system/meun.action'}),animate : true,autoScroll : true,containerScroll : true,iconCls : appMeuns.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;reqType = fileName.split('.');}}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 = 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("错误！", "加载模块失败 ： 文件类型错误！");}}
页:
[1]