19.Extjs主页面显示js
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+' <img src="img/user.png"/> ' +
username+' <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 © 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的更多相关文章
- 84. ExtJS下页面显示中文乱码问题
转自:https://blog.csdn.net/wenminhao/article/details/51198981 最近在学校extjs是,使用js脚本显示中文在html页面中时,中午出现了乱码的 ...
- Eclipse编写ExtJS卡死问题 eclise js验证取消
1. Eclipse编写ExtJS卡死问题 eclise js验证取消 近期项目用到了extjs,发现项目编译的时候特别的卡,浪费很多时间而且保存的时候还要编译,因此打算看下如何取消验证extjs.最 ...
- 苹果iPhone连接wifi就进去www.apple.com主页 下边显示 <HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY>
苹果iPhone连接wifi就进去www.apple.com主页 下边显示 <HTML><HEAD><TITLE>Success</TITLE>< ...
- Extjs关于alert显示不出—异步问题
对应extjs提示框不能正常显示,而使用js的本身提示框可以正常,但由于样式不统一,不是 好的解决方法. 解决该问题,要了解extjs异步原理. ext的提示框都是异步的,非阻塞模式的,浏览器js的提 ...
- Extjs学习----------动态载入js文件(减轻浏览器的压力)
动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...
- Extjs 表格横坐标显示问题
在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...
- 微信分享朋友链接显示js代码
通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制 展示效果如下: 标题.描述.还有分享的图片都是有js来控制的. js代码如下 ...
- ExtJS+Handler入门显示
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...
- 8.19 extjs jar 包使用。
一.文件结构在ExtJS官网下载好4.0的开发包解压后,我们得到如图的文件结构 文件/文件夹名作用builds 压缩后的ExtJS代码,体积更小,更快docs 开发文档examples 官方演示 ...
随机推荐
- Python之面向对象上下文管理协议
Python之面向对象上下文管理协议 析构函数: import time class Open: def __init__(self,filepath,mode='r',encode='utf-8') ...
- UVa 122 树的层次遍历
题意: 给定一颗树, 按层次遍历输出. 分析: 用数组模拟二叉树, bfs即可实现层次遍历 #include <bits/stdc++.h> using namespace std; st ...
- [bzoj1058][ZJOI2007][报表统计] (STL)
Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...
- linux配置固定ip
vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO=static ONBOOT=yes 其他默认即可 重启network服务
- About SQL Server 2016 CPT2
SQL Server 2016 CTP2已经发布,可以从以下主页进行下载. http://www.microsoft.com/en-us/server-cloud/products/sql-serve ...
- 一个ajax实例
一个ajax实例 html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta ch ...
- Qt笔记——添加菜单图片/添加资源文件
添加新文件,模板选择Qt分类中的Qt资源文件(Qt Resource File) 先添加前缀,点击"添加"按钮,然后选择"添加前缀",我们这里因为要添加图片,所 ...
- Leetcode 220.存在重复元素III
存在重复元素III 给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使得 nums [i] 和 nums [j] 的差的绝对值最大为 t,并且 i 和 j 之间的差的绝对值最大为 ķ. ...
- Leetcode 215.数组中的第k个最大元素
数组中的第k个最大元素 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 ...
- 寒假训练3解题报告 CodeForces #148
CodeForces 148B 一道简单模拟,判断龙能够抓到公主几次,如果公主和龙同时到达公主的城堡,不算龙抓住她,因为路程除以速度可能会产生浮点数,所以这里考虑一下精度问题 #include < ...