以下为项目应用中的一些示例代码,供以后应用参考。
一.普通树状结构展示
1.前台JS代码
ccs.consultation.deptTreePanel = Ext.extend(Ext.Panel, {
title:'组织结构',
layout : 'fit',
id:'deptTreePanel',
height : 312,
border:false,
initComponent : function() {
// 组织树
var loader = new Ext.tree.DWRTreeLoader({
dataUrl: biDeptService.getDeptByUpDeptCode
});
loader.on('beforeload',function(treeLoader,node){
treeLoader.baseParams.id = node.attributes.id;
},this);
var root =new Ext.tree.AsyncTreeNode({
id:sessionObj.firstDeptCode,
text:sessionObj.firstDeptName,
href:'',
hrefTarget:'_blank'
});
var tree = new Ext.tree.TreePanel({
autoScroll: true,
border:false,
animate: false,
enableDD: false,
containerScroll: true,
root:root,
loader:loader,
id:'deptTreePanelTree'
});
tree.addListener('click',function(node,e){
var deptCode = node.attributes.id;
//查询人员
var params = {};
params.deptCode = deptCode;
var store = Ext.getCmp('csPersonViewGrid').getStore();
store.baseParams = {};//清空参数
Ext.apply(store.baseParams,params);
store.load();
});
this.items = [tree];
this.tbar = [{
text : '展开',
handler : function() {
tree.expandAll();
}
}, {
text : '合拢',
handler : function() {
tree.collapseAll();
}
}];
ccs.consultation.deptTreePanel.superclass.initComponent.call(this);
}
})
2.后台Java代码
public List getDeptByUpDeptCode(String id) {
String upDeptCode = id;
List list = biDeptDao.getDeptByUpDeptCode(upDeptCode);
List treeList = new ArrayList();
for (int i = 0; i < list.size(); i++) {
BiDept biDept = (BiDept)list.get(i);
TreeNode node = new TreeNode();
node.setId(biDept.getDeptCode());
node.setText(biDept.getDeptName());
node.setLeaf(false);
treeList.add(node);
}
return treeList;
}
TreeNode是自己定义的java类,含id,text,leaf等相关属性。
二.带选择框的树形结构展示
1.带选择框树结构展示代码
Ext.onReady(function(){
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
el:'tree-div',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'0005_checkbox_reorder_tree.php'
})
});
// 选中父节点的checkbox后,自动选中子节点
tree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, tree);
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
2.显示选中的岗位
buttons : [{
text : '显示选中的岗位',
handler : function() {
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node) {
if (msg.length > 0) {
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show({
title : '选中岗位:',
msg : msg.length > 0 ? msg : '无',
icon : Ext.Msg.INFO,
minWidth : 200,
buttons : Ext.Msg.OK
});
}
}]
});
要在树上展现checkbox,只需要在返回来的json数据中加上 checked 项(为true/false)。
返回的json数据如下:
[{"cls":"folder","id":10,"leaf":false,checked:false,
"children":[{"cls":"file","id":11,"leaf":true,
checked:false,"children":null,"text":"S600"},
{"cls":"file","id":12,"leaf":true,
checked:false,"children":null,"text":"SLK200"}],
"text":"Benz"}]
分享到:
相关推荐
ext-js示例代码 ext-js示例代码 ext-js示例代码
Ext_Js分页示例代码详解.pdfExt_Js分页示例代码详解.pdf
EXT教程示例代码,供EXT新手学习的好资料。
这是Ext简单布局的示例代码,Ext版本:3.3
ext 实例 示例 实例 示例 ext 实例 示例 实例 示例
1.入门 2.ext事件处理 3.面板 4.工具栏 5.Viewport 6.窗口 7.对话框 内附:ext语法总结.txt
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
Ext JS高级程序设计,第5章 在.NET中使用Ext.Direct示例源代码
ext4.0动态加载,使用json数据源,整个项目只有一个页面,js按照mvc模式搭建
Ext 2.2 所有类结构继承关系和类说明图
本源代码包来源于Ext.NET官方网站,于2012-07-24日发布,可以用Visual Studio 2010打开后进行编译,但需要先安装ASP.NET MVC3。此源代码包目前官网上已经没有下载了!目前官网的最新版本是2.1.1,但是有BUG。 本源...
Ext.js 6 示例学习,内有一中文文档及一英文文档,供大家学习
Ext2_Button示例 学习extjs的朋友可以看一下
ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示
EXT dojochina 面板示例Ext.Panel.rar EXT dojochina 面板示例Ext.Panel.rar
Ext和SSH的整合示例,正在纠结该如何将两种技术结合在一起的童鞋们可以来参考一下
Extjs的uploadDialog网上发布的正式版只有2.x版本。一些人做的3.x版本经使用效果不好。现改造Ext UploadDialog For Ext3.2.1版本及使用的示例供大家使用。
《深入浅出Ext JS》原书代码《深入浅出Ext JS》原书代码《深入浅出Ext JS》原书代码《深入浅出Ext JS》原书代码《深入浅出Ext JS》原书代码《深入浅出Ext JS》原书代码《深入浅出Ext JS》原书代码《深入浅出Ext JS》...
Ext3.0使用示例
示例代码: 代码如下://判断按钮权限的方法。true为无权限,false为有权限可以显示 function checkButton(buttonId){ //按钮的状态,ext对类型要求比较高,这里注意类型、变量的转换问题。 var state = new Boolean...