1.

 /**
* @author sux
* @time 2011-1-11
* @desc main page
*/ var mainPage = Ext.extend(Ext.Viewport,{ /**
* 构造方法中进行整体布局
*/
constructor: function(username, date){
//这个意思就是调用父类的构造函数 作用域是当前子类 传入config参数 将来config中有什么属性 会为子类构造出什么属性
mainPage.superclass.constructor.call(this,{
//方位布局
layout: 'border',
items: [{
//我们需要在items中使用region参数来给它定位。
region: 'north',
xtype: 'panel',
//html: '人力资源管理系统',
bodyStyle: 'height: 66px;',
layout: 'absolute',
html: '<table class="header"><tr ><td class="header_left"></td><td class="header_center"></td>' +
'<td class="header_right"><div id="user_header">'+date+'&nbsp;<img src="img/user.png"/>&nbsp;' +
username+'&nbsp;&nbsp;<a href="user_exit.action">注销</a>' +
'</div></td>' +
'</tr></table>'
},{
region: 'west',
frame: 'true',
width: '200',
id: 'menu_tree',
xtype: 'panel',
autoScroll: true,
title: '人力资源管理系统',
split: true,
collapsible: true,//可折叠
items: [{
xtype: 'treepanel',
title: '',
autoScroll: true,
border: false,
id: 'tree',
rootVisible:true,//不隐藏根节点
// tools: [{
// id: 'refresh',
// handler: '',
// scope: this
// }],
//loader:树节点的加载器,默认为Ext.tree.TreeLoader
loader: new Ext.tree.TreeLoader({
dataUrl: 'menu.action'// dataUrl:获取子节点的URL地址。
}),
//每加入进来的节点,若为非叶子节点则做为根节点继续进行查找
// root:树的根节点。
root: new Ext.tree.AsyncTreeNode({
text: '人力资源管理',
expanded :true,// expanded:是否展开节点,默认为false
id: '1' //加载数据时每次以变量node传入id的值如: node=1
//leaf: false //数据库中存储的为1/0
}),
listeners: {
'click': {
fn: this.clickNode,
scope: this
}
}
}]
},this.center,{
region: 'south',
width: '100%',
frame: true,
height: 30,
html: "<div id='author'>Copyright &copy 201204 TRJ1101 & 张勇</div>"
}]
});
}, center: new Ext.TabPanel({
id: 'mainTab',
frame: true,
region: 'center',
activeTab: 0,// 初始激活的tab,索引或者id值,默认为none,从0开始
autoScroll: false,
enableTabScroll : true, //溢出时滚动tab
split: true,
//TabCloseMenu一个显示右键菜单的插件
//添加编辑插件
plugins: new Ext.ux.TabCloseMenu(), items: [{
closable: false,// tab是否可关闭,默认为false
title: '首页',
iconCls: 'main',//css样式 html: '<iframe src="/hrmsys/jsp/first.jsp" frameborder=0 width=100% height=100%/>'
}]
}), /**
* 在中间区域添加新的面板
*/
addTab : function(nodeId, nodeUrl, nodeText, nodeIcon){
var tabId = 'tab_'+nodeId; //tabId为新建面板的id
var tabTitle = nodeText;
var tabUrl = nodeUrl;
var centerPanel = Ext.getCmp('mainTab');
var tab = centerPanel.getComponent(tabId);
if(parseInt(nodeId) == 28){
Ext.getCmp('mainTab').remove(Ext.getCmp('tab_30'));
}
if(parseInt(nodeId) == 30){
Ext.getCmp('mainTab').remove(Ext.getCmp('tab_28'));
}
//如果已存在此面板则只需要激活便可
if(!tab){
var newTab = centerPanel.add(//ADD方法添加组建
new Ext.Panel({
//bodyStyle: 'background-color:#dfe8f6;',
frame: true,
title: tabTitle,
iconCls: nodeIcon,
id: tabId,
closable: true
// listeners: {//监听激活事件设置页面大小
// active: this.activeTabSize,
// scope: this
// }
})
);
//激活新面板
centerPanel.setActiveTab(newTab);
//加载页面数据
newTab.load({
url: tabUrl,
method: 'post',
scope: this,
nocache : true, // 不缓存
timeout: 3000,
scripts : true //设置允许加载的页面执行js,很重要
});
}else{
centerPanel.setActiveTab(tab);
};
//this.juage(nodeId);
}, /**
* 树结点的单击事件
* 若为叶子节点则弹出一个窗口
*/
clickNode : function(node, e){
if(node.attributes.leaf){
var nodeId = node.attributes.id;
var nodeUrl = node.attributes.menuUrl;
var nodeText = node.attributes.text;
var nodeIcon = node.attributes.menuIcon;
this.addTab(nodeId, nodeUrl, nodeText, nodeIcon);
};
} /**
* 激活页面时设置页面大小
*/
// activeTabSize : function(){
// console.log('jin ru');
// var w = Ext.getCmp('mainTab').getActiveTab().getInnerWidth();
// var h = Ext.getCmp('mainTab').getActiveTab().getInnerHeight();
// var activeTabId = Ext.getCmp('mainTab').getActiveTab().id;
// var activeTab = Ext.getCmp('activeTabId');
// if(activeTab){
// activeTab.setHeight(h);
// activeTab.setWidth(w);
// }
// }
});

19.Extjs主页面显示js的更多相关文章

  1. 84. ExtJS下页面显示中文乱码问题

    转自:https://blog.csdn.net/wenminhao/article/details/51198981 最近在学校extjs是,使用js脚本显示中文在html页面中时,中午出现了乱码的 ...

  2. Eclipse编写ExtJS卡死问题 eclise js验证取消

    1. Eclipse编写ExtJS卡死问题 eclise js验证取消 近期项目用到了extjs,发现项目编译的时候特别的卡,浪费很多时间而且保存的时候还要编译,因此打算看下如何取消验证extjs.最 ...

  3. 苹果iPhone连接wifi就进去www.apple.com主页 下边显示 &lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;Success&lt;/TITLE&gt;&lt;/HEAD&gt;&lt;BODY&gt;Success&lt;/BODY&gt;

    苹果iPhone连接wifi就进去www.apple.com主页  下边显示 <HTML><HEAD><TITLE>Success</TITLE>< ...

  4. Extjs关于alert显示不出—异步问题

    对应extjs提示框不能正常显示,而使用js的本身提示框可以正常,但由于样式不统一,不是 好的解决方法. 解决该问题,要了解extjs异步原理. ext的提示框都是异步的,非阻塞模式的,浏览器js的提 ...

  5. Extjs学习----------动态载入js文件(减轻浏览器的压力)

    动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...

  6. Extjs 表格横坐标显示问题

    在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...

  7. 微信分享朋友链接显示js代码

    通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 ...

  8. ExtJS+Handler入门显示

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  9. 8.19 extjs jar 包使用。

    一.文件结构在ExtJS官网下载好4.0的开发包解压后,我们得到如图的文件结构 文件/文件夹名作用builds  压缩后的ExtJS代码,体积更小,更快docs  开发文档examples  官方演示 ...

随机推荐

  1. Python之面向对象上下文管理协议

    Python之面向对象上下文管理协议 析构函数: import time class Open: def __init__(self,filepath,mode='r',encode='utf-8') ...

  2. UVa 122 树的层次遍历

    题意: 给定一颗树, 按层次遍历输出. 分析: 用数组模拟二叉树, bfs即可实现层次遍历 #include <bits/stdc++.h> using namespace std; st ...

  3. [bzoj1058][ZJOI2007][报表统计] (STL)

    Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...

  4. linux配置固定ip

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO=static ONBOOT=yes 其他默认即可 重启network服务

  5. About SQL Server 2016 CPT2

    SQL Server 2016 CTP2已经发布,可以从以下主页进行下载. http://www.microsoft.com/en-us/server-cloud/products/sql-serve ...

  6. 一个ajax实例

    一个ajax实例   html   <!DOCTYPE html> <html lang="zh-cn"> <head> <meta ch ...

  7. Qt笔记——添加菜单图片/添加资源文件

    添加新文件,模板选择Qt分类中的Qt资源文件(Qt Resource File) 先添加前缀,点击"添加"按钮,然后选择"添加前缀",我们这里因为要添加图片,所 ...

  8. Leetcode 220.存在重复元素III

    存在重复元素III 给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使得 nums [i] 和 nums [j] 的差的绝对值最大为 t,并且 i 和 j 之间的差的绝对值最大为 ķ. ...

  9. Leetcode 215.数组中的第k个最大元素

    数组中的第k个最大元素 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 ...

  10. 寒假训练3解题报告 CodeForces #148

    CodeForces 148B 一道简单模拟,判断龙能够抓到公主几次,如果公主和龙同时到达公主的城堡,不算龙抓住她,因为路程除以速度可能会产生浮点数,所以这里考虑一下精度问题 #include < ...