日期:2014-05-16 浏览次数:20395 次
这次能改进,我得写一个人--斌哥。他也是刚开始学JavaScript,加我QQ,我们是这样认识的。parentId 和 node 属性都是他创造的,也是动态异步加载的关键部分之一。这次的改进,我个人认为这应该是动态加载最简洁的做法。如有其它,还望高人指教,Advance in thanks!
?
欣赏该文章的朋友,我建议先欣赏下面这篇,肯定对你有惊喜。我是在下面这篇实战的基础上实现本文的实战的。
Ext.onReady(function(){
?? ?Ext.BLANK_IMAGE_URL = '../ext-2.0.2/resources/images/default/s.gif'; // 根据项目中 s.gif 所在的目录设置
?? ?Ext.QuickTips.init();
?? ?// shorthand
?? ?var Tree = Ext.tree;
?? ?var loader = new Tree.TreeLoader({
?? ??? ?dataUrl: '' // 可以是 '../admin/dicEmployeeList.action?skey=9039',而不改变该参数,只要在每次调用 Action 之前传入所需的参数
?? ?});
?? ?
?? ?// set the root node
?? ?var root = new Tree.AsyncTreeNode({
?? ???? id :'root',
?? ???? text: 'Root'
?? ???? ,expanded: true
?? ???? ,draggable: false,?? ?// disable root node dragging
?? ???? hrefTarget: 'centerFrame'?? ?// Target frame for the link
?? ?});
?? ?var tree = new Tree.TreePanel({
?? ???? id :'tree'
?? ???? ,root: root
?? ???? ,rootVisible :false,
?? ???? autoScroll: true, animate: true,
?? ???? containerScroll: true,? border :false,
?? ???? enableDD: true,// dropConfig: {appendOnly: true},
?? ???? margins :'5 5 4 5', title :'ManagerSystem',
?? ???? loader: loader,
?? ???? bodyStyle :'background:#fff url(../images/bgImage/treeBg200.gif) repeat-x 0 0;'
?? ?});
//?? ??? ?root.href = 'userinfo/viewUserInfo.html';?? ?// URL of the link used for this node
?? ??? ?
?? ??? ?var flag = true;
?? ??? ?tree.on('beforeload', function(node){
??????????? /*?dataUrl 可以不用改变 */
?? ??? ??? ?if(flag) {
?? ??? ??? ??? ?tree.loader.dataUrl = '../admin/dicDepartmentList.action?skey=9039';
?? ??? ??? ??? ?flag = false;
?? ??? ??? ?} else {
?? ??? ??? ??? ?tree.loader.dataUrl = '../admin/dicEmployeeList.action?skey=9039';
?? ??? ??? ?}
??????????? /* 在 *.js 文件中,往 *.action 中传入参数,可以有多个参数 */
??????????? var submitState = Ext.getCmp('id_SubmitState').getValue();
??????????? Ext.apply(this.baseParams, {
?????????????? submitState
: submitState // 对于红色的 submitState
,
在 Action 类中必须有setSubmitState()函数,
以便Struts 2 的 IoC 容器可以根据设值方法往 Action 中注入
该属性,请看最后部分
?????????????? ......
??????????? }
?? ??? ?});
?? ??? ?tree.addListener('beforeclick', function(node, e){
?? ??? ??? ?if(node.isLeaf()) {?? ?//否则直接展开
??
??? ??? ??? node.expand(false, false);
?? ??? ??? ?} else {??? // 若被选中节点还包含子节点且从未加载过,则增加下一层子节点
?????????????? //? 自动调用 Action
?? ??? ??? ?}?? ?// if end
?? ??? ?});?? ?// addListener end
?? ???? /*
?? ??? ?tree.addListener('load', function(node){
?? ??? ??? ?console.log(node);? // 在 Firefox 的 Firebug 插件的控制台输出 node 节点信息
?? ??? ?});
??????? */
??????? // 注意:
render 一定要放在 beforeload 事件后面,否则可能得不到你想要的结果
?? ??? ?// Important point: Render tree to document body when the code is running here
?? ??? ?tree.render(Ext.getBody());
});
?