一个ExtJS实例
聊聊ExtJS
这几天接触了一个项目 前台用的是extjs 发现这个东西还是有点意思的
就把前台的部分 剥离了下来 有兴趣的朋友可以当做模板学习
不多说先上效果图
这篇文章 可以看作是ext知识的一个汇总
因此我不想讲太多细碎的知识点 但我会一一之命这些知识点在哪里可以找到
另一方面 ext细碎的知识点确实太多 自己没有精力也不想搞的太清楚 够用就行
我会说一些 我认为最重要的部分
首先 希望大家看看这篇文章
http://www.cnblogs.com/iamlilinfeng/archive/2012/06/26/2563047.html关于ext的布局
在项目里 主要用到了两种布局 accordion BorderLayout
其次还有一个TabPanel 这个大家可以参考 (文库里面的第三页)
http://wenku.baidu.com/link?url=NE2POFUVQ4QopprUDiRmgyj3McqpT8WOJ5yw7Rp59GGa56BBm1lB2aEiaZ-anxgghfm4hTYHpF9mMfLXQSgc92dUV-1B7x4qoxcnzG4Zv5u
先看admin_main.jsp 页面如下
plain
- <%@ page language="java" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>资源共享平台</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
- <link rel="stylesheet" type="text/css"
- href="ext/resources/css/ext-all.css" />
- <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="ext/ext-all.js"></script>
- <script type="text/javascript" src="js/admin_main.js"></script>
- <style type="text/css">
- //css省略 详细代码见附件
- </style>
- </head>
- <body>
- <div id="loading-mask"></div>
- <div id="loading">
- <div style="text-align: center; padding-top: 25%">
- <img src="data:images/loading32.gif" width="32" height="32"
- style="margin-right: 8px;" />
- 页面加载中......
- </div>
- </div>
- </body>
- </html>
很简单吧 只用loading这个div里面的图片 大家去images里面看看就知道了 页面会不断播放那个gif同时显示"页面加载中..."
直到整个页面加载完毕
plain
- <script type="text/javascript" src="js/admin_main.js"></script>
我们再看看admin_main.js
这部分很长很长 大家有点耐心 我先整体讲一下
从12-67行的代码 显示了后台管理部分的代码
从75-188行的代码 显示的是资源共享的代码
至于两部分中的listener部分 暂时先不管 它处理的是导航树被点击后的效果
从196-213行的代码吧上面两部分用tabPanel 集合起来作为一个整体
同时 注意这部分代码region : 'west' 可以知道这个整体又作为一个borderlayout布局的左边部分
从217-223行的代码 显示的是整个页面的顶部
从227-245行的代码 我们可以认为它定义了一个"类"(或者说是界面也行) 它就是整个屏幕的主题
从246-265部分 用的是继承的知识 我们定义了一个新的组件 MainPanel
可参考下面这篇文章
http://blog.csdn.net/alastormoody/article/details/8251018
mainTabPanel = new MainPanel();
这个很容易理解了 我们的mainTabPanel是MainPanel的一个实例
当然这里也需要一点frame的知识
http://www.w3school.com.cn/tags/tag_frame.asp
现在大家回想12-67 75-188 部分的listener 应该能看懂了
plain
- Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
- Ext.QuickTips.init();
- var menu = null;
- var mainTabPanel = null;
- var rightMenu = null;
- Ext.onReady(function(){
- var appUrlData;
- var appUrlStore;
- var rightRoot = new Ext.tree.AsyncTreeNode({
- id : 'rightRoot',
- text : '后台管理rightRoot',
- expanded : true
- });
- var rightLoader = new Ext.tree.TreeLoader({
- dataUrl:'getAdminAppTree.action'
- });
- rightLoader.processResponse = function(response, node, callback) {
- var json = response.responseText;
- try {
- json = eval("(" + json + ")");
- // 从json中获得json数组，这里的appTree与Struts2返回的json对象中的appTree对应
- var o = json["jsonText"];
- o = eval("(" + o + ")");
- if(o==""||o==null){
- Ext.getDom("mainframe").contentWindow.location.href = "common/global_error.jsp";
- }else{
- node.beginUpdate();
- for (var i = 0, len = o.length; i < len; i++) {
- var n = this.createNode(o[i]);
- if (n) {
- node.appendChild(n);
- }
- }
- node.endUpdate();
- if (typeof callback == "function") {
- callback(this, node);
- }
- }
- } catch (e) {
- this.handleFailure(response);
- }
- }
- rightMenu = new Ext.tree.TreePanel({
- id : 'rightMenu',
- loader : rightLoader,
- title : '后台管理rightMenu',
- root : rightRoot,
- rootVisible : true,
- autoHeight : true,
- autoScroll : true,
- containerScroll : true,
- animate : false,
- /*frame : true,*/
- listeners: {
- click: function(n,e) {
- if(n.isLeaf()){
- mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);
- mainTabPanel.setActiveTab(0);
- }
- }
- }
- });
- //*******************************************//
- //资源共享的三个组件 start end在188左右
- //其一 (其实每一个组将都是一个treePanel)
- var appTreeRoot1 = new Ext.tree.AsyncTreeNode({
- id : 'appTreeRoot1',
- expanded : true
- });
- var appTreeLoader1 = new Ext.tree.TreeLoader(
- { id:'appTreeLoader1',
- dataUrl : 'getGroupAppTree.action?appGroupId=1'
- }
- );
- var appTreeMenu1 = new Ext.tree.TreePanel({
- id : 'menu1',
- loader : appTreeLoader1,
- title : ' 资源共享appTreeMenu1',
- root : appTreeRoot1,
- border : false,
- autoScroll : true,//滚动条
- useArrows : true,//是否使用箭头样式
- animate : true,//展开,收缩动画
- rootVisible : false,
- /*
- enableDD : true,
- frame : true,
- */
- listeners: {
- click: function(n,e) {
- mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);
- mainTabPanel.setActiveTab(0);
- }
- }
- });
- //其二
- var appTreeRoot2 = new Ext.tree.AsyncTreeNode({
- id : 'appTreeRoot2',
- expanded : true
- });
- var appTreeLoader2 = new Ext.tree.TreeLoader(
- { id : 'appTreeLoader2',
- dataUrl : 'getGroupAppTree.action?appGroupId=2'
- }
- );
- var appTreeMenu2 = new Ext.tree.TreePanel({
- id : 'menu2',
- loader : appTreeLoader2,
- title : ' 资源管理appTreeMenu2',
- root : appTreeRoot2,
- border : false,
- autoScroll : true,//滚动条
- useArrows : true,//是否使用箭头样式
- animate : true,//展开,收缩动画
- rootVisible:false,
- /*
- enableDD : true,
- frame : true,
- */
- listeners: {
- click: function(n,e) {
- mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);
- mainTabPanel.setActiveTab(0);
- // Ext.getDom("mainframe").contentWindow.location.href =n.attributes.url;
- }
- }
- });
- //其三
- var appTreeRoot10 = new Ext.tree.AsyncTreeNode({
- id : 'appTreeRoot5',
- expanded : true
- });
- var appTreeLoader10 = new Ext.tree.TreeLoader(
- { id : 'appTreeLoader5',
- dataUrl : 'getGroupAppTree.action?appGroupId=10'
- }
- );
- var appTreeMenu10 = new Ext.tree.TreePanel({
- id : 'menu10',
- loader : appTreeLoader10,
- title : ' 账号管理',
- root : appTreeRoot10,
- border : false,
- autoScroll : true,//滚动条
- useArrows : true,//是否使用箭头样式
- animate : true,//展开,收缩动画
- rootVisible : false,
- /*
- enableDD : true,
- frame : true,
- */
- listeners: {
- click: function(n,e) {
- mainTabPanel.get(0).update('<iframe id="mainframe" scrolling="auto" frameborder="0" width="100%" height="100%" src="'+n.attributes.url+'"></iframe>',false);
- mainTabPanel.setActiveTab(0);
- // Ext.getDom("mainframe").contentWindow.location.href =n.attributes.url;
- }
- }
- });
- var leftAppTreeMenu = new Ext.Panel({
- id : 'leftAppTreeMenu',
- layout : 'accordion',
- border:false,
- title:'资源共享asdfasdf',
- layoutConfig:{
- titleCollapse:true,
- animate:true,
- activeOnTop:false},
- items:[appTreeMenu1,appTreeMenu2,appTreeMenu10]
- });
- // 开始于75资源共享 三个组件 集合起来 使用acordion视图
- //menu是整个左边导航
- //注意menu是tabPanel
- //leftapptreemenu是panel
- //rightMenu是treemenu 与leftapptreemenu的三个组件是一个类型
- //在menu之上 还有一个viewport 它作为全局界面 使用borderlayout
- //menu的region是west
- menu = new Ext.TabPanel( {
- id : 'menu',
- activeTab : 0,
- width : 310,
- split : true,
- region : 'west',
- // deferredRender : false,
- resizeTabs : true,
- minTabWidth : 100,
- tabWidth : 100,
- frame : true,
- items : [leftAppTreeMenu,rightMenu],
- listeners:{
- tabchange:function(t, tab) {
- tab.doLayout();
- }
- }
- });
- var northpanel = new Ext.Panel({
- id:'north',
- region:'north',
- layout:'column',
- height:100,
- html:'<div style="width:100%; background: url(images/main_title_bg.gif) repeat-x;"><img src="data:images/main_title.gif" /><span id="logout"><a href="javascript:void(0)" onclick="popHelp()">用户手册</a> | <a href="logout.action" target="_top">注销</a></span></div>'
- });
- MainPanel = function() {
- this.openTab = function(panel, id) {
- var o = (typeof panel == "string" ? panel : id || panel.id);
- var tab = this.getComponent(o);
- if (tab) {
- this.setActiveTab(tab);
- } else if (typeof panel != "string") {
- panel.id = o;
- var p = this.add(panel);
- this.setActiveTab(p);
- }
- };
- this.closeTab = function(panel, id) {
- var o = (typeof panel == "string" ? panel : id || panel.id);
- var tab = this.getComponent(o);
- if (tab) {
- this.remove(tab);
- }
- };
- MainPanel.superclass.constructor.call(this, {
- id : 'main',
- region : 'center',
- margins : '0 5 5 0',
- resizeTabs : true,
- minTabWidth : 180,
- tabWidth : 180,
- enableTabScroll : true,
- activeTab : 0,
- /*draggable : true,*/
- items : {
- id : 'homePage',
- title : '主页',
- closable : false,
- html : '<iframe id="mainframe" name="mainframe" scrolling="yes" frameborder="0" width="100%" height="100%" src="common/blank.html"></iframe>'
- }
- });
- };
- Ext.extend(MainPanel, Ext.TabPanel);
- mainTabPanel = new MainPanel();
- var viewport = new Ext.Viewport({
- layout : 'border',
- items : [northpanel,mainTabPanel,menu]
- });
- });
这个主面板 最开始的时候引用的src是common/blank.html 白板一张而已
plain
- var viewport = new Ext.Viewport({
- layout : 'border',
- items : [northpanel,mainTabPanel,menu]
- });
ViewPort不必细究 就是一个全屏的window而已
看他的布局 大家就应该明白 这个viewPort就是我们看到的界面
前后台交互用的是json 与struts 这里就不再赘述相关知识点了 网上资料一搜一大堆
下面是响应的action处理方法
plain
- /**
- * 读取系统管理员"后台管理"版块的目录树结构
- */
- public String getAdminAppTree() throws Exception {
- System.out.println("getAdminAppTree");
- this.jsonText = "[{'id':6,'text':'角色管理','children':[{'id':61,'text':'创建角色','leaf':true,'url':'modules/role/creatRole/creatRole.jsp'},{'id':62,'text':'设定角色应用权限','leaf':true,'url':'modules/role/setRoleApp/setRoleApp.jsp'},{'id':64,'text':'删除角色','leaf':true,'url':'modules/role/deleteRole/deleteRole.jsp'}]},{'id':7,'text':'用户管理','children':[{'id':71,'text':'创建用户','leaf':true,'url':'modules/user/creatUser/creatUser.jsp'},{'id':72,'text':'用户信息管理','leaf':true,'url':'modules/user/viewUserInf/viewUserInf.jsp'},{'id':73,'text':'设定用户所属角色','leaf':true,'url':'modules/user/setUserRole/setUserRole.jsp'}]}]";
- System.out.println("jsonText= "+this.jsonText);
- return SUCCESS;
- }
- /**
- * 根据GroupId,读取该用户在该应用组内的所有应用
- */
- public void getGroupAppTree() throws Exception {
- JSONArray ja=null;
- System.out.println("getGroupAppTree 默认");
- if (appGroupId==10) {
- System.out.println("getGroupAppTree 10");
- ja= new JSONArray("[{'id':11,'text':'标准化资源共享','leaf':true,'url':'modules/file/baseShare/baseShare.jsp'},{'id':12,'text':'标准化工具','leaf':true,'url':'modules/file/tool/tool.jsp'},{'id':13,'text':'资源环境共享','leaf':true,'url':'modules/file/webShare/webShare.jsp'}]");
- }
- if (appGroupId==2) {
- System.out.println("getGroupAppTree 2");
- ja=new JSONArray("[{'id':21,'text':'资源检索','leaf':true,'url':'modules/Manager/search/search.jsp'},{'id':23,'text':'资源审核','leaf':true,'url':'modules/Manager/manager/manager.jsp'},{'id':24,'text':'资源删除','leaf':true,'url':'modules/Manager/delete/delete.jsp'},{'id':27,'text':'资源结算','leaf':true,'url':'modules/Manager/cal/cal.jsp'}]");
- }
- if (appGroupId==1) {
- System.out.println("getGroupAppTree 1");
- ja=new JSONArray("[{'id':101,'text':'修改账号信息','leaf':true,'url':'modules/account/changeAccountInf/changeAccountInf.jsp'},{'id':102,'text':'修改账号密码','leaf':true,'url':'modules/account/changePassword/changePassword.jsp'},{'id':104,'text':'权限申请','leaf':true,'url':'modules/account/applyPermission/applyPermission.jsp'}]");
- }
- PrintWriter out;
- this.response.setContentType("text/html;charset=UTF-8");
- out = this.response.getWriter();
- out.print(ja.toString());
- out.close();
- }
web.xml,struts.xml这里就不写了 看附件
源码下载
http://download.csdn.net/detail/dlf123321/7823325
参考资料
http://www.cnblogs.com/iamlilinfeng/archive/2012/06/26/2563047.html
http://blog.csdn.net/alastormoody/article/details/8251018
http://www.w3school.com.cn/tags/tag_frame.asp
一个ExtJS实例的更多相关文章
- ExtJS实例1
1.创建一个Extjs的Window,用ajax请求HTML文件,并执行HTML的代码和脚本 窗体中文字是从一个HTML中获取,并且HTML中执行脚本使窗体高亮1秒 主页面: <!DOCTYPE ...
- Android 只开启一个Activity实例
在一个Activity中,多次调用startActivity()来启动另一个Activity,要想只生成一个Activity实例,方法有两种. 方法一:设置起动模式 一个Activity有四种启动模式 ...
- 将oracle冷备份恢复到另外一个数据库实例中
因更换服务器需要将Oracle数据库转移到另外台Oracle中.说明: 1.测试环境为:windows server2003 和 oracle 10g. 2.2台服务器安装的程序目录一样,数据目录不一 ...
- 第一个python实例--监控cpu
#第一个python实例:监控cpu #/bin/bash/env Python from __future__ import print_function from collections impo ...
- servlet的一个web容器中有且只有一个servlet实例或有多个实例的理解1
servlet的一个web容器中有且只有一个servlet实例或有多个实例的理解 (2013-06-19 19:30:40) 转载▼ servlet的非线程安全,action的线程安全 对提交 ...
- 12C RAC中的一个数据库实例自动crash并报ORA-27157、ORA-27300等错误
rhel7.2上安装12C RAC数据库后,其中一个数据库实例经常会自动crash.查看alert日志发现以下错误信息: Errors in file /d12/app/oracle/diag/rdb ...
- 一个 XSD 实例
一个 XSD 实例 本节会为您演示如何编写一个 XML Schema.您还将学习到编写 schema 的不同方法. XML 文档 让我们看看这个名为 "shiporder.xml" ...
- Asp.Net MVC是否针对每次请求都重新创建一个控制器实例
一.Asp.Net MVC是否针对每次请求都重新创建一个控制器实例 默认情况下,答案是确定的. ControllerBuilder类 ControllerBuilder.Current用户获取默认的控 ...
- 如何让Windows程序只运行一个程序实例？
要实现VC++或者MFC只运行一个程序实例,一般采用互斥量来实现,即首先用互斥量封装一个只运行一个程序实例的函数接口: HANDLE hMutex = NULL; void MainDlg::RunS ...
随机推荐
- [Educational Codeforces Round 7]F. The Sum of the k-th Powers
FallDream dalao找的插值练习题 题目大意:给定n,k,求Σi^k (i=1~n),对1e9+7取模.(n<=10^9,k<=10^6) 思路:令f(n)=Σi^k (i=1~ ...
- python中type dtype astype 的用法
1.type 获取数据类型 2.dtype 数组元素的类型 3.astype 修改数据类型
- 如何使用GitHub
进行版本控制时,我们可以直接通过网页来进行版本控制,也可以下载git客户端.值得注意的是,git的客户端有很多种,具体的可以参考:https://git-scm.com/downloads/guis/ ...
- C++多态实现原理
C++的多态性用一句话概括就是:在基类的函数前加上virtual关键字,在派生类中重写该函数,运行时将会根据对象的实际类型来调用相应的函数.如果对象类型是派生类,就调用派生类的函数:如果对象类型是基类 ...
- 百度ML/DL方向面经
最近败人品败得有些厉害,很多事都处理得不好--感觉有必要做点好事攒一攒. 虽然可能面试经过不是很有代表性,不过参考价值大概还是有的-- 由于当时人在国外,三轮都是电面-- 一面 当地时间早上5点半爬起 ...
- sqlserver 取日期年份月份
select convert(varchar(10),datepart(YYYY,a.fssj)) as years,--得到年份convert(varchar(10),datepart(mm,a.f ...
- Why Helm? - 每天5分钟玩转 Docker 容器技术（160）
本章我们将学习 Helm,Kubernetes 的包管理器. 每个成功的软件平台都有一个优秀的打包系统,比如 Debian.Ubuntu 的 apt,Redhat.Centos 的 yum.而 Hel ...
- sessionStorage 、localStorage 和 cookie
localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...
- Microsoft Visual Studio 2017 编译最新版 libuv 1.x
步骤很简单 1 下载最新版的 libuv(地址:https://github.com/libuv 2 安装Git,Python 2.7 ,cmake(这里使用的是 3.11.0-win64-x64 版 ...
- ubuntu 修改计算机名
ubuntu装好系统之后打开终端,命令行前边会有一长串名字,看起来好烦(格式为:用户名@计算机名:~$),所以改计算机名: 需要改两个文件: sudo gedit /etc/hostname sudo ...