1.app.js

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name : 'AM',
appFolder : "app",
launch:function(){
Ext.create('Ext.container.Viewport', {
layout:'auto',
items: {
xtype: 'deptTree'
}
});
},
controllers:[
'deptController'
]
});
})

  

2.app/view/deptView

Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
dockedItems:[{
xtype:'toolbar',
dock:'left',
//ui:'footer',
items:[
{xtype:'button',text:'add',id:'add'},
{xtype:'button',text:'copy',id:'copy'},
{xtype:'button',text:'delete',id:'delete'}
]
},{
xtype:'toolbar',
items:[{
xtype:'button',
id:'allopen',
text:'展开全部'
},{
xtype:'button',
id:'allclose',
text:'收起全部'
}]
}],
store:'deptStore'
// root:{
// text:'root',
// id : '0',
// leaf:false,
// children:[{
// text:'技术部门',
// checked:false,
// id : '01',
// leaf:false,
// children:[{
// checked:false,
// text:'研发部',
// id : '0101',
// leaf:true
// },{
// checked:false,
// text:'实施部',
// id : '0102',
// leaf:true
// }]
// },{
// text:'后勤部门',
// id : '02',
// checked:false,
// leaf:false,
// children:[{
// text:'人事部',
// id : '0201',
// checked:false,
// leaf:true
// },{
// text:'行政部',
// id : '0202',
// checked:false,
// leaf:true
// }]
// }]
// }
});

  3.app/store/deptStore

 Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
proxy:{
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
}
});

4.app/controller/deptController

 Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
"deptTree button[id=allopen]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.expandAll();
}
},
"deptTree button[id=allclose]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.collapseAll();
}
},
"deptTree button[id=add]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
if(nodes.length == ){
var node = nodes[];
node.appendChild({
checked:true,
text:'技术架构组',
id : '',
leaf:true
});
}else{
alert("请您选择一个节点");
}
}
},
"deptTree":{
itemclick:function(tree,record,item,index,e,options){
alert(record.get('id'));
}
}
});
},
views:[
'deptView'
],
stores :[
'deptStore'
],
models :[
]
});

Ext.js树结构的更多相关文章

  1. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  2. sencha ext js 6 入门

    Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...

  3. Ext JS - 问答

    Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...

  4. Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId

    针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...

  5. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  6. 介绍Ext JS 4.2的新特性的《深入浅出Ext JS》上市

    以用户为中心的时代,应用的界面外观变得越来越重要.然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易.Ext JS的出现,为广大程序员解决了这一难题.它有丰富多彩的界面和强大的功能,是开发 ...

  7. Ext JS 4 老特征:statics 静态的变量和方法

    l   一.静态的变量和静态的方法 [译文原创Learning Ext JS 4 第51页] Statics的方法只属于类本身,而不属于任何一个实例,这就决定了我们是在定义类的内部来用statics方 ...

  8. Ext JS 4 新特性2:配置项属性(config)之二

    Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...

  9. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

随机推荐

  1. [LeetCode]83. Remove Duplicates from Sorted List(排序链表去重)

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  2. 【android】ViewPager 大量内容页的内存优化

    总结:使用FragmentStatePagerAdapter 代替 FragmentPagerAdapter作为大批量内容页的适配器. 详细: 最近App里有一个场景,类似猿题库做题那种:有很多个题目 ...

  3. Eclipse自动提示

    在java的自动激活触发器里输入:abcdefghijklmnopqrstuvwxyz.

  4. loj2163 / bzoj2212 / P3521 [POI2011]ROT-Tree Rotations(线段树合并)

    P3521 [POI2011]ROT-Tree Rotations loj2163 [POI2011]ROT-Tree Rotations(数据加强) (loj的数据套了个fread优化才过...) ...

  5. FromBottomToTop第十二周项目博客

    FromBottomToTop第十二周项目博客 本周项目计划 设计整体架构,收集素材,制作出静态界面部分 项目进展 已完成游戏整体架构设计 已完成游戏界面.背景音乐等素材的收集 正在进行静态界面部分的 ...

  6. xss总结(一直更新)

    反射型: 在表单输入jack网页源代码:<pre>Hello jack</pre> 测试: 低级别:<script>alert('xss')</script& ...

  7. Jwt访问api提示401错误 Authorization has been denied for this request

    教程  http://bitoftech.net/2015/02/16/implement-oauth-json-web-tokens-authentication-in-asp-net-web-ap ...

  8. office的project的激活码

    8XWTK-7DBPM-B32R2-V86MX-BTP8PMVR3D-9XVBT-TBWY8-W3793-FR7C326K3G-RGBT2-7W74V-4JQ42-KHXQWD4HF2-HMRGR-R ...

  9. SRM 585 DIV2

    250pt: 一水... 500pt:题意: 给你一颗满二叉树的高度,然后找出出最少的不想交的路径并且该路径每个节点只经过一次. 思路:观察题目中给的图就会发现,其实每形成一个 就会存在一条路径. 我 ...

  10. 一次完整的HTTP事务是怎样一个过程

    当我们在浏览器的地址栏输入 www.linux178.com,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 以下过程仅是个人理解: 域名解析 --> 发起TCP的3次握手 --> 建 ...