var selectStr="";
var ext_Tree = function(){
var Tree = Ext.tree;
var tree;
var root;
return{
init:function(){
tree = new Tree.TreePanel({
el:extTree.treeDiv,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:false,
containerScroll: true,
border:true,
rootVisible:true,
loader: new Tree.TreeLoader({
dataUrl:extTree.dataUrl
})
});
// set the root node
root = new Tree.AsyncTreeNode({
text: extTree.rootName,
draggable:false,
id:extTree.rootId,
type:extTree.type
});
tree.setRootNode(root);
tree.on(
'beforeload',
function(node){
if(beforeLoad){
beforeLoad(tree,node);
}
});
tree.on(
'click',
function(node){
node.expand();
//if(parent.nodeOnClick){
nodeOnClick(node);
// }
});
tree.on(
'dblclick',
function(node){
node.expand();
// if(parent.nodeOnDbClick){
nodeOnDbClick(node);
//}
});
tree.on(
'expandnode',
function(node){
//if(parent.nodeOnExpand){
nodeOnExpand(node);
//}
});
tree.on(
'collapsenode',
function(node){
if(nodeOnCollapse){
nodeOnCollapse(node);
}
});
// render the tree
tree.render();
root.expand();
},
reUP : function(str){
selectStr="selectStr="+str;
root.reload();
selectStr="";
}
}
tree.root.reload();
}();
Ext.EventManager.onDocumentReady(ext_Tree.init, ext_Tree, true);
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<%=request.getAttribute("cssScript")%>
<link rel="stylesheet" type="text/css" href="<html:rewrite page="/javascripts/ext/resources/css/ext-all.css"/>" />
<SCRIPT language="javascript" src="<html:rewrite page="/javascripts/ext/ext-base.js"/>"></SCRIPT>
<SCRIPT language="javascript" src="<html:rewrite page="/javascripts/ext/ext-all.js"/>"></SCRIPT>
<SCRIPT language="javascript" src="<html:rewrite page="/javascripts/tree/extTree.js"/>"></SCRIPT>
</HEAD>
<BODY>
<div id="tree-div" style="overflow:auto; height:100%;width:150px;border:0px solid #c3daf9;"></div>
</BODY>
</HTML>
<script language='javascript'>
var base = "<html:rewrite page=""/>";
var listAll = "1";
/**
*初始化树
*/
var extTree = new Object();
//加载树的Div
extTree.treeDiv = "tree-div";
//根节点id
extTree.rootId = "1500000000";
//根节点名称
extTree.rootName = "内部论坛";
//根节点类型
extTree.type = "0";
//一次性加载树所有节点时url
extTree.dataUrl = "";
var sel_node = null;
//树节点加载前事件
function beforeLoad(tree,node){
tree.loader.dataUrl = base+"/scripts/refer.do?doType=bbsTypeList&orgId="+node.attributes.id+"&listAll="+listAll+"&"+selectStr;
//window.parent.frames[1].location = base+"/scripts/bbs.do?doType=treeList&objId="+node.attributes.id;
}
//节点被选中事件
function nodeOnClick(node){
if(node.attributes.type == '0'){
sel_node = node;
}
window.parent.frames[1].location = base+"/scripts/bbs.do?doType=list&objId="+sel_node.attributes.id;
}
//节点被双击事件
function nodeOnDbClick(node){
if(node.attributes.type == '0'){
sel_node = node;
}
window.parent.frames[1].location = base+"/scripts/bbs.do?doType=list&objId="+sel_node.attributes.id;
}
//节点展开时事件
function nodeOnExpand(node){
if(node.attributes.type == '0'){
node.getUI().removeClass("x-tree-node-collapsed");
node.getUI().removeClass("x-tree-node-leaf");
node.getUI().addClass('x-tree-node-expanded');
}
}
//节点合并时事件
function nodeOnCollapse(node){
}
var nId;
function timeOut(str){
window.clearTimeout(nId);
str=str.replace(/\\/ig,"\\\\").replace(/\"/ig,"\\\"").replace(/%/ig,"%25").replace(/&/ig,"%26").replace(/#/ig,"%23").replace(/\+/,"%2B");
nId=window.setTimeout("ext_Tree.reUP('"+str+"');",1000);
}
function addOrg(){
if(sel_node == null){
alert("请先选择机构!");
return;
}
var orgId = sel_node.attributes.id;
var orgName = sel_node.attributes.text;
var len = dtb.table.rows.length;
var j = 0;
for(var i=0;i<len*1;i++){//>
var id = dtb.table.rows[i].cells[1].innerText;
if(orgId == id){
j++;
break;
}
}
if(j==0){
insertRow(orgId,orgName);
}
}
function insertRow(id,name){
var row = dtb.table.insertRow();
var cell;
row.className = "GridItem";
row.style.wordWrap = "break-word";
row.style.wordBreak = "break-all";
//0 名称
cell = row.insertCell();
cell.style.width = "254";
cell.noWrap = true;
cell.innerText = name;
//0 编号
cell = row.insertCell();
cell.style.display = "none";
cell.innerText = id;
}
function delOrg(){
if(dtb.selRow == null){
alert("请先选中一条机构!");
return;
}
dtb.temp_deleteSelRow();
if(dtb.table.rows.length*1>0){
dtb.temp_setSelectRow("0");
}
}
function doConfirm(){
var reValue = new Array();
var len = dtb.table.rows.length;
for(var i=0;i<len*1;i++){//>
var value = new Object();
value.value = dtb.table.rows[i].cells[1].innerText;
value.innerText = dtb.table.rows[i].cells[0].innerText;
reValue[i] = value;
}
window.returnValue = reValue;
window.close();
}
function doExit(){
window.close();
}
</script>
分享到:
相关推荐
创建一个基本的 `TreePanel` 需要定义树节点、树加载器以及相关的配置选项。下面是一个简单的 `TreePanel` 示例: ```javascript Ext.onReady(function() { var tree = new Ext.tree.TreePanel({ title: '文件...
树面板与数据存储之间的交互通过节点接口(The Node Interface)实现。这个接口封装了模型实例,提供了额外的方法和属性来适应树控件的特殊状态。例如,你可以改变树的外观,通过设置`useArrows`为`true`来隐藏边线...
在这里,"ext2.0树"可能是指模拟ext2文件系统的目录结构,用以实现一种数据存储和检索的方式。 树节点的增删改操作是树数据结构的基本操作: 1. **增加节点**:创建新的节点并将其插入到适当的位置。在有权重的树...
这个实例Demo对初学者来说是一个很好的学习资源,它演示了如何将富客户端的Ext4应用与后端的SpringMVC服务相结合。通过阅读和理解源码,可以深入理解这两个技术的工作原理和集成方式,提升Java Web开发技能。同时,...
4. JSON结果类型:为了与EXT3.0的树控件通信,通常会返回JSON格式的数据,所以需要配置或自定义一个JSON结果类型。 5. 服务层和持久层:根据业务需求,实现获取树数据的服务方法和对应的数据库操作。 在这个示例中...
EXT 是一个广泛使用的前端JavaScript库,专为构建复杂的Web应用程序而设计。EXT 提供了丰富的组件模型、数据绑定、事件处理以及与服务器通信的能力。在EXT的最新使用手册中,我们将深入探讨EXT的关键特性,帮助...
总的来说,"EXT+S2SH整合动态加载树的列子"是一个综合性的Web开发示例,涵盖了前端交互设计、后端服务处理和数据库操作等多个方面,对于学习和理解Web应用开发,特别是EXT与Java后端框架的集成,具有很大的参考价值...
总的来说,Ext JS 是一个功能强大、全面的前端框架,尤其适合开发大型、复杂的企业级Web应用。它提供了一个完整的生态系统,包括强大的组件库、数据管理、布局机制以及丰富的API,帮助开发者构建出高质量的用户界面...
5. **动画效果**:EXT提供了一系列的动画效果,"ext-base.js"中包含了动画的实现,使得UI组件可以平滑过渡,提升用户体验。 6. **布局管理**:EXT的布局系统是其组件化的一大亮点,"ext-base.js"中定义了各种布局...
Ext.NET控件是一种将流行的JavaScript库Ext JS与微软的.NET框架相结合的技术,旨在为开发者提供在ASP.NET环境中创建丰富交互式Web应用的能力。通过将Ext JS的功能集成到.NET控件中,开发人员可以利用.NET的强大后端...
EXT JS提供了一系列预先封装好的UI组件,如表格、面板、表单、树形视图等,这些组件具有高度可定制性,可以满足各种复杂的界面设计需求。通过EXT JS,开发者能够轻松构建出响应式和适应不同屏幕尺寸的Web应用。 在...
`Ext.tree.TreePanel` 是一个功能强大的树形菜单控件,支持自动滚动、动画效果、拖放等功能,并可以通过配置参数进行高度定制。 - **参数详解**: - `autoScroll`: 设置为 `true` 表示当内容超出容器时自动显示...
Ext JS是一个用于构建Web应用程序的前端框架,它提供了一系列预先封装的UI组件,如表格、树形视图、菜单、表单等,这些组件可以方便地组合起来创建出功能强大的应用界面。其核心特性包括: 1. **组件化**:Ext JS的...
EXT.NET 是一个强大的JavaScript库,它为ASP.NET开发者提供了一种构建富客户端应用程序的方法。它结合了EXT JS的用户界面组件和ASP.NET的服务器端功能,使得开发人员可以在Web应用程序中创建复杂的、交互性强的用户...
在EXTJS这个强大的JavaScript框架中,实现音频播放功能是一项常见的需求。EXTJS提供了一种灵活的方式,通过结合HTML5的Audio API,可以在Web应用中轻松地播放、控制声音。本篇将详细介绍如何在EXTJS中播放声音,并...
这个库主要针对Ext JS进行封装,为.NET开发者提供了一套完整的控件集和API,使得在ASP.NET环境中使用Ext JS的功能变得简单。RC2是Release Candidate 2的简称,表示这是一个接近正式版的测试版本,相较于RC1,它可能...
EXT是一个强大的前端开发框架,它提供了大量的预定义组件,如表格、表单、菜单、树形视图等,这些组件具有高度可定制性和灵活性。EXT的核心是基于ExtJS,一个由Sencha公司维护的开源项目。EXT不仅提供了一套完整的UI...
Ext JS 提供了一整套预先封装的组件,如表格、面板、菜单、按钮、表单、树形视图等,使开发者能够快速构建复杂的、交互性强的Web应用。 在“ext-2.2”这个压缩包中,我们可以期待找到的是Ext JS 2.2版本的相关文件...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件库,可以轻松创建数据驱动、交互式的用户界面。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于在...