16extjs笔记

最新推荐文章于 2020-03-13 14:17:48 发布

原创最新推荐文章于 2020-03-13 14:17:48 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

extjs笔记专栏收录该内容

22 篇文章

订阅专栏

1.讲解的大纲

2.require就是在程序跑起来之前，将所有的东西首先加载进来。

3.root就是他的数据

4.隐藏root节点的做法

rootVisible

5.实现多选框

checked:false

6.注意两者的相同的地方：

/*
 * ClassName 用户数据集
 */
 Ext.define("AM.store.CategoryStore",{
 	extend:'Ext.data.TreeStore',
//	defaultRootId:"root",
//	//autoSync:true,//与服务器同步
//	proxy:{
//		api:{
//		},
//		type:"ajax",
//		url:"booktypeAction_query.action",
//		reader:{
//			type:"json"
//		},
//		writer:{
//			type:"json"
//		}
//	},
	autoLoad:true	,
 	root:{
 		expanded:true,
 		children:[
 			{text:"计算机", expanded:false, children:[
 				{text:"考研相关", leaf:true},
 				{text:"数据库相关", leaf:true},
 				{text:"其他", leaf:true}
 			]},
 			{text:"软件工程", expanded:false, children:[
 				{text:"Web前台操作", leaf:true},
 				{text:"数据库", leaf:true},
 				{text:"其他", leaf:true}
 			]},
 			{text:"网络工程", expanded:false,children:[
 				{text:"网络认证相关", leaf:true},
 				{text:"考研相关", leaf:true},
 				{text:"其他", leaf:true}
 			]},
 			{text:"文学作品", leaf:true}
 		]
 	}
 });

上面是说明远程数据只是一种和本地格式一样的远程数据

7.tree的项添加的方法有两种：

一种是直接在tree上面点击右键进行添加，在一种就是选中之后，然后再另点击一个按钮。进行添加就好了。

8.dock 是指明侧栏的生成的位置 dockItem的属性。

9.点击按钮创建相应的界面

注意widget方法

10.关于tree的同步加载和异步加载的比较

利用同步加载可以将数据进行二次过滤。

11.后台的代码

12.下面是应该有的类型

简化的后台数据类型

得到字符串的样式

13.利用pojo和数据的传递进行整合

利用的是上面的pojo。

json格式

14.注意在treeview中要是直接使用本地的数据用的是root ，在store中也可以这样写

要是有数据中心就直接配置数据中心

14.代码展示：

view

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		
//			}]
//		}]
//	}
});

store

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

controller

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 == 1){
						var node = nodes[0];
						node.appendChild({
							checked:true,
							text:'技术架构组',
							id : '0103',
							leaf:true		
						});
					}else{
						alert("请您选择一个节点");
					}
				}
			},
			"deptTree":{
				itemclick:function(tree,record,item,index,e,options){
					alert(record.get('id'));
				}
			}
		});
	},
	views:[
		'deptView'
	],
	stores :[
		'deptStore'
	],
	models :[
	] 
});

suspend