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 官方演示 ...
随机推荐
- Cropping multiple images the same way
The tools we’ll be using are =GIMP= and =mogrify= (from the ImageMagick suite), so make sure that yo ...
- fmt:formatDate的输出格式详解
<fmt:formatDate value="${isoDate}" type="both"/> 2004-5-31 23:59:59 <fm ...
- 详解SpringBoot 添加对JSP的支持(附常见坑点)
序言: SpringBoot默认不支持JSP,如果想在项目中使用,需要进行相关初始化工作.为了方便大家更好的开发,本案例可直接作为JSP开发的脚手架工程 SpringBoot+War+JSP . 常见 ...
- android 实现照相功能 照片存放在SID卡中,将照片显示在Image中
protected static final int CAMERA_RESULT = 0; private String fileName; private Button takePhotoBn; p ...
- Codeforces 651A Joysticks【贪心】
题意: 两根操纵杆,每分钟操纵杆消耗电量2%,每分钟又可以给一个操纵杆充电1%(电量可以超过100%),当任何一个操纵杆电量降到0时,游戏停止.问最长游戏时间. 分析: 贪心,每次选择电量剩余最少的充 ...
- Delphi XE4 inline 的用法
为了提高应用程序的性能,可以用inline声明一个函数过过程,对于声明为inline的过程,编译器在编译时,会取代正常的过程调用方式,取而代之是直接把这个函数的编译代码拿过来生成到调用该过程的地方,有 ...
- lambda简单记录
lambda表达式对集合的一些操作,持续记录一下新的用法 List<Integer> list = new ArrayList<>(); list.add(1); list.a ...
- RabbitMQ集群环境搭建教程收集(待实践)
先收集,后续再实践. http://www.linuxidc.com/Linux/2016-10/136492.htm http://www.cnblogs.com/lion.net/p/572547 ...
- C++ - 库函数优先级队列(priority_queue)输出最小值 代码
库函数优先级队列(priority_queue)输出最小值 代码 本文地址: http://blog.csdn.net/caroline_wendy 库函数优先级队列(priority_queue)的 ...
- C# 复制和克隆认识浅谈
如有雷同,不胜荣欣.若转载,请注明 在C#中,用HashTable,DataTable等复制和克隆浅谈,以下直接看样例 HashTable ht = null; ht = new HashTable( ...