文档章节

最简洁的ExtJs5.0后台管理框架

风灬云
 风灬云
发布于 2015/04/14 14:36
字数 688
阅读 5085
收藏 4
点赞 0
评论 0



ViewPort.js

Ext.onReady(function() {

Ext.create('Ext.container.Viewport', {

layout : 'border',

 defaults : {

            autoScroll : true

        },

items : [

{ 

region : 'north', 

html : ' <div text-align:center; region="north" split="true" border="false" style="overflow: hidden; height: 30px;line-height:30px;background: #157FCC repeat-x center 50%; color: #fff; font-family: Verdana, 微软雅黑,黑体"><span style="float: right; padding-right: 20px;" class="head">欢迎您使用! <font color="red"><%=Session["Roles_Name"]%></font>&nbsp;&nbsp;<font color="red"><%=Session["RealName"]%></font>&nbsp;&nbsp;<a href="#" id="editpass" onclick="modifyPwd()"><font color="white">修改密码</font></a> <a href="#" id="loginOut" onclick="logOut()"><font color="white">安全退出</font></a></span> <span style="padding-left: 10px;font-size: 16px;"><img src="UIJS/Images/blocks.gif" width="20" height="20" align="absmiddle" /><font color="white">仓库管理系统</font></span></div>', 

border : false, margin : '0 0 5 0' 

    }, 

        {

region : 'west',

//collapsible : true,

title : '管理菜单',

width : 200,

layout:'fit',

items:[tree]

// could use a TreePanel or AccordionLayout for navigational

// items

},

/*

* { region : 'south', title : 'South Panel', collapsible :

* true, //html : 'Information goes here', split : true, height :

* 100, minHeight : 100 },

*/ 

/*

* { region : 'east', title : 'East Panel', collapsible : true,

* split : true, width : 150 },

*/

{

region : 'center',

animate: true, //动画效果启用 

layout:'fit',

//layout:'border',

items:[contentPanel]

/*

xtype : 'tabpanel', // TabPanel itself has no title

activeTab : 0, // First tab active by default

itemId: 'center-window',

id:'center-window',

animate: true, //动画效果启用 


items : {

title : '首页',

//html : 'The first tab\'s content. Others may be added dynamically'

//autoLoad:'register.jsp'//只有一个基本的panel 

html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="register.jsp"></iframe>' 

}

*/

}

]

});

});



var contentPanel=new Ext.TabPanel({

id:'centerP',

enableTabScroll:true,//能够滚动收缩

activeTab:0,//激活第一个标签

items:[{

id:'homePage',

layout:'fit',

title:'首页',

autoScroll:true,

html:'<iframe scrolling="auto" frameborder="0" width="100%" height="630" src="Welecome.jsp"></iframe>'

}]

});



var store = Ext.create('Ext.data.TreeStore', {

root : {

expanded : true,

children : [{

text : "基本信息管理",

// href:"http://www.easyjf.com",

// leaf : true

expanded : true,

children : [{

text : "库位管理",

url:'Users.jsp',

leaf : true

}, {

text : "货物管理",

url:'Users.jsp',

leaf : true

}]

}, {

text : "系统信息管理",

expanded : true,

children : [{

text : "用户管理",

url:'UIJS/UserManage/html/User.html',

leaf : true

}, {

text : "权限管理",

url:'Users.jsp',

leaf : true

}]

}]

}

});



var tree=Ext.create('Ext.tree.Panel', {

// title : 'Simple Tree',

// width : 500,

// height : auto,

useArrows : true,//展开按钮图标是箭头还是+-

store : store,

rootVisible : false

// renderTo : Ext.getBody()



});





tree.on("itemclick", treeClick);



function treeClick(view, record, item, index, e) {

var text = record.get('text');// 获取tree的叶子节点的值

var leaf = record.get('leaf');

var url= record.get('url');

//alert(url);

// var tabPanel = Ext.getCmp('center-window');//获取tabpanel的id

var tabPage = contentPanel.getComponent(text);// 判断面板中是否存在该页面

if (leaf)// 判断是否是叶子节点

{

if (!tabPage) {

var id = text;

var index = contentPanel.items.length + 1;

tabPage = contentPanel.add({// 动态添加tab页

// tabPanel.add({//动态添加tab页

"id" : id,

title : text,

   //layout:'fit',

//html : '<iframe scrolling="no" frameborder="0" width="100%" height="620" src="Users.jsp"></iframe>',

html : '<iframe scrolling="no" frameborder="0" width="100%" height="100%" src='+url+'></iframe>',

closable : true// 允许关闭

})

contentPanel.setActiveTab(tabPage);// 激活当前tab页

} else {

contentPanel.setActiveTab(tabPage);// 激活当前tab页

}

}

}



html页代码

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>后台管理</title>

   <link rel="stylesheet" type="text/css" href="ExtJS/resources/ext-theme-neptune-all.css" />

    <script type="text/javascript" src="ExtJS/ext-all.js"></script>

    <script type="text/javascript" src="UIJS/ViewPort.js"></script>

</head>

<body>



</body>

</html>

© 著作权归作者所有

共有 人打赏支持
风灬云
粉丝 18
博文 93
码字总数 29511
作品 0
西宁
技术主管
ExtJs5.0中Ext.data.TreeStore的lazyFill属性怎么使用?

ExtJs5.0中Ext.data.TreeStore的lazyFill属性怎么使用? 1. api中针对lazyFill的解释为 Set to true to prevent child nodes from being loaded until the the node is expanded or loaded ......

开发攻城狮 ⋅ 2017/02/21 ⋅ 1

Jflyfox 2.4 更新发布,个人博客

本人的个人博客项目(http://www.jflyfox.com/)功能已基本搭建完成。 现在这个项目断断续续做一年多的时间了,基本功能也已经完成,欢迎大家试用,多提出宝贵意见。 本次更新说明: 1)完善后...

Fly的狐狸 ⋅ 2015/05/18 ⋅ 12

Guns 3.1,集成 flowable 工作流引擎及完善代码生成器

Guns 3.1更新日志: 集成flowable 6.2.0工作流框架,并提供一个报销流程示例 代码生成器单独分出一个模块,并提供完善的界面操作来进行代码生成操作 修改表名统一以sys开头 整理部分代码结构 Gu...

naan1993 ⋅ 2017/12/11 ⋅ 4

开源微信公众号管理系统--微笑微信

微笑微信是一款免费的开源微信公众号管理系统,基于php+mysql,让微信开发者最便捷的进行二次开发。 基于 BSD 开源协议 允许企业或个人自由的使用,修改源代码,也可以将修改后的代码作为开源...

微笑微信 ⋅ 2013/09/12 ⋅ 3

简洁AngularJS框架后台管理系统bootstrap后台模板

最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版。 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版。 Minovate是 AngularJS 高级管理系统模板。...

VIP_web ⋅ 2017/01/12 ⋅ 0

Jflyfox 2.5 更新发布,jfinal+beetl博客

本人的个人博客项目(http://www.jflyfox.com/)功能已基本搭建完成。 现在这个项目断断续续做一年多的时间了,基本功能也已经完成,欢迎大家试用,多提出宝贵意见。 本次更新说明 1)加入文章...

Fly的狐狸 ⋅ 2015/05/21 ⋅ 8

基于 JFinal 的后台管理系统--jfinal-admin

jfinal-admin 后台框架 jfinal-admin 是基于 JFinal 的后台管理系统,采用了简洁强大的 JFinal 作为 Web 框架,模板引擎用的是 Beetl,数据库用 MySQL,前端 Bootstrap 框架。 特性 内置用户...

IT小香猪 ⋅ 2017/05/10 ⋅ 10

Java博客系统,采用Jfinal+beetl--Jflyfox

Jflyfox是一个java开发的功能强大的博客系统,本着提高自己,帮助新人的态度。 采用了简洁强大的JFinal作为web框架,模板引擎用的是beetl,数据库用mysql,前端bootstrap框架。 支持oauth2认...

Fly的狐狸 ⋅ 2014/06/28 ⋅ 6

Python Flask开源博客--Blog_mini

使用Blog_mini,你完全不用担心博客的管理问题! Blogmini是一个用Python Flask开发的,拥有简洁页面(支持响应式布局!)和强大后台管理功能的开源博客系统,使用Blogmini,你将能轻松使用和...

xpleaf ⋅ 2016/03/09 ⋅ 5

BootDo 1.2 发布,增加内容管理和博客管理

项目介绍 面向学习型的开源框架,简洁高效,减少过渡封装,展现技术本质 Springboot作为基础框架,使用mybatis作为持久层框架 使用官方推荐的thymeleaf做为模板引擎,shiro作为安全框架,主流...

lcg0124 ⋅ 2017/09/20 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部