jsp 页面如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/xtheme.css" />
<link rel="stylesheet" type="text/css" href="lib/unimas/css/ext-unimas.css" />
<link rel="stylesheet" type="text/css" href="css/ext-index.css" />
</head>
<body>
<script type="text/javascript" src="lib/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ext/ext-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/unimas/CustomXmlTreeLoader.js"></script>
<div id="north" ><div class="h_title">UI-Ⅱ System</div></div>
<div id="center">
<iframe scrolling="auto" frameborder="0" id="center_iframe" style="border:0px none; height:100%; width:100%;"></iframe>
</div>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
js内容如下：
Ext.onReady(function (){
//左边的树,生成树的对象
var tree = new Ext.tree.TreePanel({
region:'center',
title:'树菜单',
containerScroll:true,
loader: new Ext.ux.CustomXmlTreeLoader({
dataUrl:'tree.xml'
}),
root: new Ext.tree.AsyncTreeNode(),
enableDD:true,
dropConfig:{
appendOnly:true
},
listeners:{
'click':function(node){
Ext.get('center_iframe').dom.src = node.attributes.hrefsrc;
}
}
});
//主内容
var main = new Ext.Panel({
region:'center',
contentEl: 'center',//指定内容区域为 id为center的div
title:'内容',
html:'neirong',
margins: Ext.isIE?'5 5 5 0':'10 5 5 0'
});
//建立一个viewport
v = new Ext.Viewport({
layout:'border',
items: [{
//xtype: 'box',
region: 'north',
contentEl: 'north',
height: 36
},{
layout: 'border',
region:'west',
border: false,
split:true,
margins: Ext.isIE?'5 0 5 5':'5 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [tree]
},
main
],
renderTo: Ext.getBody()
});
});
分享到：
相关推荐
ExtJS是一种基于JavaScript的开源富客户端框架，专为构建企业级Web应用程序而设计。它提供了丰富的组件库，包括数据绑定，强大的布局管理，以及高度可定制的用户界面元素。这个压缩包包含了一系列关于ExtJS的学习...
总体来说，这个压缩包提供了完整的ExtJS 3.2中文API文档，对于开发基于ExtJS的应用程序，尤其是对中文不熟悉的开发者，是一个非常有价值的资源。它可以帮助开发者快速理解框架的各个部分，提高开发效率，并且在遇到...
总体而言，ExtJS 4.1中文API离线版是一个宝贵的开发工具，它提供了详细的文档和示例，有助于开发者更有效地利用这个框架，提升Web应用的性能和用户体验。无论是初学者还是经验丰富的开发者，都能从中受益匪浅。
将两者结合，开发者可以利用ExtJS的复杂数据处理和布局能力，同时享受FineUI的直观设计和良好的用户体验。 这个压缩包中的"extjs_for_fineui_v6.0.1"可能包含以下关键部分： 1. **js** 文件夹：存放了核心的...
EXTJS是一种基于JavaScript的前端框架，专用于构建富互联网应用程序（RIA）。它提供了一套完整的组件库，可以创建复杂的用户界面，并且具有高度可定制性和灵活性。EXTJS的核心特性包括数据绑定、拖放功能、丰富的...
ExtJS 图书管理系统是一款基于ExtJS前端框架开发的图书管理应用程序。ExtJS是一个强大的JavaScript库，专门用于构建富客户端的Web应用，它提供了丰富的组件库和数据绑定机制，使得开发者可以构建出功能丰富的、交互...
ExtJS 是一个强大的JavaScript前端框架，专用于构建富交互式的Web应用程序。它的全称为"Ext JavaScript Library"。在本案例中，我们关注的是版本4.0.7，这是一个开源版本，发布于GPL（GNU General Public License）...
总体而言，ExtJs 4 Grid 在数据展示方面提供了更高的灵活性和更低的耦合度，更适合处理复杂的数据交互场景。而 jqGrid 在简单场景下可以快速实现数据展示功能，但对于复杂的业务逻辑支持能力稍弱。 #### 二、外观...
ExtJs图书管理系统Jar包是一个基于Java技术和ExtJs框架构建的应用程序，主要服务于图书管理领域，提供了高效、便捷的图书信息管理功能。这个系统的核心在于利用了ExtJs的富客户端技术来构建用户界面，同时借助Java的...
在EXTJS中，饼图是一种常用的可视化工具，用于展示各部分占总体的比例关系。EXTJS框架提供了丰富的图表组件，其中包括饼图的实现。以下是对EXTJS绘制饼图的方法进行详细分析： 首先，创建一个继承自`Ext.panel....
**Spket1-1.6.23：ExtJS与MyEclipse的集成工具** ...总体来说，Spket1-1.6.23是JavaScript开发者，尤其是使用ExtJS和MyEclipse的开发者的得力助手，它通过智能的代码辅助和集成的开发环境，提高了开发效率和代码质量。
总体来说，《Extjs通用权限管理系统》是一个完整的开发平台，结合了Java的稳定性和Extjs的交互性，为实现企业级权限管理提供了有力的技术支持。其设计思路和实现方式对于学习和理解Web应用开发，尤其是权限控制机制...
ExtJS是一个强大的JavaScript库，它为Ajax应用提供了丰富的组件和布局，使得前端界面设计更加灵活和高效。 论文结构如下： 1. 第一章，阐述办公自动化系统的背景和相关技术的现状，包括B/S模式的优势和无纸化办公...
Ext JS GUI Designer是一款强大的图形用户界面（GUI）设计工具，专为使用Ext JS框架开发Web应用程序而设计。这个版本可能是对之前版本的增强或改进，可能包括新的功能、性能优化或bug修复。 描述中的重复内容...