viewport
/**
*一个表示程序可视区域的特殊容器(浏览器可视区域)。
*视窗渲染在document的body标签上,并且根据浏览器可视区域的大小自动调整并
*且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link *Ext.Panel 面板}增加到viewport,通过她的items,或者通过她的子面板(子面板也
*都可以拥有自己的layout)的items,子面板的add方法,这种设计让内部布局的优*势非常明显。
**/
var viewport = new Ext.Viewport({
layout : 'border',
items : [{
cls : 'docs-header',
height : 58,
region : 'north',
xtype : 'box',
el : 'header',
border : false,
margins : '0 0 5 0'
}, appMeunPanel, mainPanel]
});
viewport.doLayout();
appMeunPanel Tree
/**
*AsyncTreeNode 异步加载根节点
*TreeLoader 定义根节点的Loader
*rootVisible:true, //隐藏根节点
*border:true, //边框
*animate:true, //动画效果
*autoScroll:true, //自动滚动
*enableDD:false, //节点是否可以拖拽
**/
var root = new Ext.tree.AsyncTreeNode({
text : appMeuns[i].MENUNAME,
draggable : false,
id : appMeuns[i].MENUID
});
var node = new Ext.tree.TreePanel({
title : appMeuns[i].MENUNAME,
rootVisible : false,
loader : new Ext.tree.TreeLoader({
dataUrl : _ctx.base+ '/system/meun.action'
}),
animate : true,
autoScroll : true,
containerScroll : true,
iconCls : appMeuns[i].MENUICON,
root : root
});
Node click事件
node.on('click', function(node, e) {
e.stopEvent();
if (node.leaf) {
reqType = 'js';
var url = node.attributes.href;
var icons = node.attributes.iconCls;
if (url) {
var parts = url.split('/');
if (parts) {
var fileName = parts[parts.length - 1];
reqType = fileName.split('.')[1];
}
} mainPanel.loadPanel(url,icons,node.text,reqType,appid,false);
}
});
Mainpanel
/**
*enableTabScroll 有时标签页会超出TabPanel的整体宽度。为防止此情况下溢出的标*签页不可见,就需要将此项设为true以出现标签页可滚动的功能。只当标签页位于上方*的位置时有效(默认为false)。
* Ext.ux.TabCloseMenu() 关闭tab的插件
* superclass.constructor 用于指定超类或者基类构造。
* 我们使用javascript的call方法运行构造函数,在适用范围上。
* 第一个参数总是this,以保证构造器工作在调用函数的作用域。其它参数将被传递给父
*的构造函数
**/
MainPanel = function() {
MainPanel.superclass.constructor.call(this, {
id : 'doc-body',
region : 'center',
margins : '0 5 5 0',
minTabWidth : 80,
nocache: true,
plugins : new Ext.ux.TabCloseMenu(),
enableTabScroll : true,
activeTab : 0,
items : {
id : 'welcome-panel',
title : '欢迎使用本系统',
cls : 'empty',
iconCls : 'icon-docs',
autoLoad : {
url : _ctx.base+'/html/page/welcome.html'
},
autoScroll : true
}
Loadpanel 方法
Ext.extend(MainPanel, Ext.TabPanel, {
loadPanel : function(href, cls, title, reqType, appid, index) {
if (href == null) {
Ext.Msg.alert("错误!", "请求路径为空!");
} else {
if (reqType == 'js') {
Ext.Ajax.request( {
url : _ctx.base+"/"+href,
success : function(response, opts) {
var obj = eval(response.responseText);
var tab = cmp.getComponent(obj.id);
if (tab) {
cmp.setActiveTab(tab);
} else {
var panel = obj.init();
panel.setTitle(title);
panel.setIconClass(cls);
cmp.setActiveTab(cmp.add(panel));
}
if (!index) {
try {
var tabs = Ext.util.Cookies.get('tabs');
if (!tabs || tabs == null) tabs = "{}";
tabs = Ext.util.JSON.decode(tabs);
tabs[obj.id] = href + ":" + cls + ":" + title+ ":" + reqType + ":" + appid + ":"+ userid;
Ext.util.Cookies.set("tabs", Ext.util.JSON.encode(tabs));
} catch (e) {
Ext.util.Cookies.clear("tabs");
}
}
},
failure : function(Optional) {
Ext.Msg.alert("错误!", "加载模块失败!");
}
});
} else {
Ext.Msg.alert("错误!", "加载模块失败 : 文件类型错误!");
}
}
分享到:
相关推荐
已经整理,能直接看效果的哦,用着不错,要使用的拿走吧
### ExtJS 项目整理知识点详解 #### ExtJS 概述 - **定义**: ExtJS 是一种主要用于构建丰富、交互式的前端用户界面的框架。它基于 JavaScript 和 AJAX 技术,可以独立于后端技术使用,这使得开发者可以更加专注于...
EXTJS是一种流行的JavaScript库,用于构建富客户端Web应用程序。它提供了丰富的组件库,包括数据绑定、布局管理和用户界面元素。在这个文档中,我们将讨论三种类型的EXTJS,主要集中在它们在列表、特殊(如树形列表...
以下是我根据提供的文件名整理的关于ExtJS 4的关键知识点: 1. **控件属性**:在`Extjs 控件属性.doc`中,可能会涵盖ExtJS 4中的各种组件(如窗口、面板、表格等)的常用属性。这些属性用于定义组件的行为、外观和...
综上所述,《Extjs4_API文档整理.pdf》不仅是一份技术文档,更是深入理解ExtJS4核心架构和编码规范的指南。通过学习和实践,开发者可以充分利用ExtJS4的强大功能,构建出更加健壮、高效的应用程序。
Spring.Net+NHibenate+Asp.Net mvc +ExtJs 系列文档 包含 6 个文档,以及4个demo ,以及包含一个NMG-2.1Nhibernate生成工具,可以生成实体对应的实体类以及对应的.hbm.xml类. 案例来自<博客园>孤独侠客(似水流年) 的 ...
笔记中提到了通过自定义的CSS来美化界面,并且为了说明使用Extjs4动态加载的具体实践,作者列出了一个名为main.js的文件被放置在了/app/controller文件夹下,这表明了这是一个项目的主要控制文件。 此外,Extjs4还...
项目中用到了extjs,为了方便自学整理了一些extjs的资料,大家互相学习啊。 --open source,free software
`Extjs学习笔记.docx` 可能是一位开发者或讲师整理的学习心得和笔记,可能包含了一些个人的理解、技巧、常见问题解答和解决方案。这种类型的文档通常会提供一些实战中的经验和见解,对于深化理解和解决问题可能非常...
对于源码上传,如果你希望分享或备份你的ExtJs项目,你可以选择将源码上传到个人的代码仓库,如GitHub或GitLab。这不仅可以保护你的代码,还可以方便他人查看和贡献。在上传之前,确保你已经整理好项目结构,包含了...
EXTJS是一种基于JavaScript的富客户端应用框架,专为构建企业级Web应用程序而设计。它提供了大量的组件和功能,包括数据网格、图表、表单、菜单等,使得开发者能够创建交互性强、界面美观的应用。在编写EXTJS代码的...
#### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据处理能力,支持跨浏览器兼容...
标题提到的"EXTJS 目录文件打包压缩工具"是针对EXTJS项目开发的一种实用工具,它的主要目的是帮助开发者对EXTJS的源代码文件进行整理、压缩和打包。 在EXTJS开发过程中,通常会涉及到大量的JavaScript、CSS、图像和...
在MyEclipse中创建一个新的Web项目,并将ExtJS 4.0.7的文件复制到项目的Webroot目录下。官方示例程序位于Examples目录,包含了PHP代码,如果你遇到与PHP相关的错误,可以暂时忽略。 一旦环境搭建完成,你可以通过...
1. **EXT_JS详解.doc**:这份文档可能详细介绍了ExtJS的基本概念,包括其核心理念、架构以及主要组件。可能涵盖了如窗口(Windows)、面板(Panels)、表单(Forms)、树(Trees)和网格(Grids)等组件的使用方法。...
在IT行业中,集成开发环境(IDE)如Eclipse和MyEclipse是软件开发人员的得力工具,尤其对于Java开发者而言。...对于那些在Eclipse或MyEclipse中频繁处理JavaScript和ExtJS项目的人来说,这无疑是一个不可或缺的工具。
资源名称:Extjs4.0学习指南 中文PDF版内容简介:本书详细讲解了extjs的结构原理,用的实战项目进行讲解 ;Extjs4学习指南(仅供学习使用、转载需注明出处)Extjs4可用的学习资料少之又少,本文内容大部分为网络整理...