luluping

一、树面板简单示例

Javascript代码  

1. var tree = Ext.create('Ext.tree.Panel', {   
2.     title: '树面板简单示例',   
3.     width : 150,   
4.     height : 100,   
5.     renderTo: Ext.getBody(),   
6.     root: {   
7.         text: '树根',//节点名称   
8.         expanded: true,//默认展开根节点   
9.         children: [{   
10.             text: '节点一',//节点名称   
11.             leaf: true//true说明为叶子节点   
12.         }, {   
13.             text: '节点二',//节点名称   
14.             leaf: true//true说明为叶子节点   
15.         }]   
16.     }   
17. });  

var tree = Ext.create('Ext.tree.Panel', {
	title: '树面板简单示例',
	width : 150,
	height : 100,
	renderTo: Ext.getBody(),
	root: {
	    text: '树根',//节点名称
	    expanded: true,//默认展开根节点
	    children: [{
	        text: '节点一',//节点名称
	        leaf: true//true说明为叶子节点
	    }, {
	        text: '节点二',//节点名称
	        leaf: true//true说明为叶子节点
	    }]
	}
});

二、多列树示例

Javascript代码  

1. var tree = Ext.create('Ext.tree.Panel', {   
2.     title: 'TreeGrid（多列树示例）',   
3.     renderTo: Ext.getBody(),   
4.     width : 200,   
5.     height : 120,   
6.     fields: ['name', 'description'],   
7.     columns: [{   
8.         xtype: 'treecolumn',//树状表格列   
9.         text: '名称',   
10.         dataIndex: 'name',   
11.         width: 100,   
12.         sortable: true  
13.     }, {   
14.         text: '描述',   
15.         dataIndex: 'description',   
16.         flex: 1,   
17.         sortable: true  
18.     }],   
19.     root: {   
20.         name: '树根',   
21.         description: '树根的描述',   
22.         expanded: true,   
23.         children: [{   
24.             name: '节点一',   
25.             description: '节点一的描述',   
26.             leaf: true  
27.         }, {   
28.             name: '节点二',   
29.             description: '节点二的描述',   
30.             leaf: true  
31.         }]   
32.     }   
33. });  

var tree = Ext.create('Ext.tree.Panel', {
    title: 'TreeGrid（多列树示例）',
    renderTo: Ext.getBody(),
    width : 200,
    height : 120,
    fields: ['name', 'description'],
    columns: [{
        xtype: 'treecolumn',//树状表格列
        text: '名称',
        dataIndex: 'name',
        width: 100,
        sortable: true
    }, {
        text: '描述',
        dataIndex: 'description',
        flex: 1,
        sortable: true
    }],
    root: {
        name: '树根',
        description: '树根的描述',
        expanded: true,
        children: [{
            name: '节点一',
            description: '节点一的描述',
            leaf: true
        }, {
            name: '节点二',
            description: '节点二的描述',
            leaf: true
        }]
    }
});

三、树面板中的复选框示例

Javascript代码  

1. var tree = Ext.create('Ext.tree.Panel', {   
2.     title: '复选框示例',   
3.     width : 150,   
4.     height : 100,   
5.     renderTo: Ext.getBody(),   
6.     root: {   
7.         text: '树根',//节点名称   
8.         expanded: true,//默认展开根节点   
9.         children: [{   
10.             text: '节点一',//节点名称   
11.             checked : true,//默认选中   
12.             leaf: true//true说明为叶子节点   
13.         }, {   
14.             text: '节点二',//节点名称   
15.             checked : false,//默认不选中   
16.             leaf: true//true说明为叶子节点   
17.         }]   
18.     }   
19. });  

一、addListener方法

Javascript代码  

1. var button = Ext.get('btn');   
2. button.addListener('click',hello1);//绑定事件处理函数   
3. button.addListener('click',hello2);  

var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);

二、ExtJS支持的自定义事件

Javascript代码  

1. //创建Person类   
2. var Person = Ext.extend(Ext.util.Observable,{   
3.     constructor : function(name){   
4.        this.name = name;   
5.        this.sayNum = 0;   
6.        this.say = function(){   
7.             if(this.sayNum < 2){   
8.                 this.sayNum += 1;   
9.                 alert('I am '+name);   
10.             }else{   
11.                 this.sayNum = 0;//触发自定义事件后计数器归零   
12.                 this.fireEvent('onSay',this);//激发自定义事件   
13.             }   
14.        }   
15.        this.addEvents({//加入自定义事件   
16.           "onSay" : true  
17.        });   
18.     }   
19. });   
20. var per = new Person('tom',3);//创建对象   
21. //为自定义事件绑定处理函数   
22. per.addListener('onSay',function handler(){   
23.     alert('发生了自定义事件');   
24. });  

//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
	constructor : function(name){
	   this.name = name;
	   this.sayNum = 0;
	   this.say = function(){
			if(this.sayNum < 2){
				this.sayNum += 1;
				alert('I am '+name);
			}else{
				this.sayNum = 0;//触发自定义事件后计数器归零
				this.fireEvent('onSay',this);//激发自定义事件
			}
	   }
	   this.addEvents({//加入自定义事件
		  "onSay" : true
	   });
	}
});
var per = new Person('tom',3);//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
	alert('发生了自定义事件');
});

Html代码  

1. <input type='button' value='say' onclick='per.say()'>  

<input type='button' value='say' onclick='per.say()'>

自定义事件的另外一个例子：

Javascript代码  

1. //继承自Ext.util.Observable   
2. var Person = Ext.extend(Ext.util.Observable,{   
3.     constructor : function(name){   
4.        this.name = name;   
5.        this.say = function(){   
6.             this.fireEvent('onSay',this.name);//激发自定义事件   
7.        }   
8.        this.addEvents({//加入自定义事件   
9.           "onSay" : true  
10.        });   
11.     }   
12. });   
13. var per = new Person('tom');//创建对象   
14.   
15. //为自定义事件绑定处理函数   
16. per.addListener('onSay',function(name){   
17.     alert("I'am " + name);   
18. });  

//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
	constructor : function(name){
	   this.name = name;
	   this.say = function(){
			this.fireEvent('onSay',this.name);//激发自定义事件
	   }
	   this.addEvents({//加入自定义事件
		  "onSay" : true
	   });
	}
});
var per = new Person('tom');//创建对象

//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
	alert("I'am " + name);
});

拦截器使用示例Observable.capture，与上面例子不同的地方是“var per = new Person('tom');//创建对象”代码之后的内容替换为：

Javascript代码  

1. per.addListener('onSay',handler);//为自定义事件绑定处理函数   
2. function handler(){//事件处理函数   
3.     alert('发生了自定义事件');   
4. }   
5. //为per对象添加拦截器   
6. Ext.util.Observable.capture(per,captureFunction);   
7. //拦截函数   
8. function captureFunction(eventName){   
9.     if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行   
10.         alert("拦截事件：“"+eventName+"”。");   
11.         return false;   
12.     }   
13.     return true;   
14. }  

per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
	alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
	if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
		alert("拦截事件：“"+eventName+"”。");
		return false;
	}
	return true;
}

三、addManagedListener受管事件监听器：

Javascript代码  

1. function createFn(){   
2.     alert('新建');   
3. }   
4. function openFn(){   
5.     alert('打开');   
6. }   
7. function saveFn(){   
8.     alert('保存');   
9. }   
10. Ext.create('Ext.toolbar.Toolbar',{//创建工具栏   
11.     renderTo: Ext.getBody(),   
12.     bodyPadding: 5,   
13.     width:300,   
14.     items : [   
15.         {text:'新建',id:'createBtn',iconCls:'newIcon'},   
16.         {text:'打开',id:'openBtn',iconCls:'openIcon'},   
17.         {text:'保存',id:'saveBtn',iconCls:'saveIcon'},   
18.         {text:'销毁新建按钮',handler : function(){   
19.             //销毁新建按钮   
20.             Ext.getCmp('createBtn').destroy();   
21.         }}   
22.     ]   
23. });   
24. var createBtn = Ext.getCmp('createBtn');   
25. createBtn.on('click',createFn);   
26. //以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁   
27. //了则事件绑定同时解除。   
28. createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);   
29. createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);  

function createFn(){
	alert('新建');
}
function openFn(){
	alert('打开');
}
function saveFn(){
	alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
	renderTo: Ext.getBody(),
	bodyPadding: 5,
	width:300,
	items : [
	    {text:'新建',id:'createBtn',iconCls:'newIcon'},
		{text:'打开',id:'openBtn',iconCls:'openIcon'},
		{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
		{text:'销毁新建按钮',handler : function(){
			//销毁新建按钮
			Ext.getCmp('createBtn').destroy();
		}}
	]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);

四、relayEvents传播分发事件：

Javascript代码  

1. //创建Employee工人类   
2. var Employee = Ext.extend(Ext.util.Observable,{   
3.     constructor : function(config){   
4.        this.name = config.name;   
5.        this.eat = function(){   
6.             this.fireEvent('startEat',this);//激发开始吃饭事件   
7.             this.fireEvent('finishEat',this);//激发结束吃饭事件   
8.        }   
9.        this.addEvents({//加入自定义事件   
10.           "startEat" : true,//开始吃饭事件   
11.           "finishEat" : true//结束吃饭事件   
12.        });   
13.        Employee.superclass.constructor.call(this, config)   
14.     }   
15. });   
16.   
17. //定义Waiter服务员类   
18. var Waiter = Ext.extend(Ext.util.Observable,{   
19.     constructor : function(config){   
20.         Waiter.superclass.constructor.call(this, config);   
21.     }   
22. });   
23. //创建员工对象   
24. var emp = new Employee({name:'tom'});   
25. //为自定义事件绑定处理函数   
26. emp.addListener('startEat',function(){   
27.     alert(this.name + '开始吃饭了。');   
28. });   
29. emp.addListener('finishEat',function (){   
30.     alert(this.name + '吃完饭，可以收拾盘子了。');   
31. });   
32. //创建服务员对象   
33. var waiter = new Waiter();   
34. //使服务员对象与员工对象的finishEat事件进行关联   
35. //也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，   
36. //然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。   
37. waiter.relayEvents(emp, ['finishEat']);   
38. waiter.on('finishEat',function(){   
39.     alert('服务员开始收拾盘子。');   
40. });  

//创建Employee工人类
var Employee = Ext.extend(Ext.util.Observable,{
	constructor : function(config){
	   this.name = config.name;
	   this.eat = function(){
			this.fireEvent('startEat',this);//激发开始吃饭事件
			this.fireEvent('finishEat',this);//激发结束吃饭事件
	   }
	   this.addEvents({//加入自定义事件
		  "startEat" : true,//开始吃饭事件
		  "finishEat" : true//结束吃饭事件
	   });
	   Employee.superclass.constructor.call(this, config)
	}
});

//定义Waiter服务员类
var Waiter = Ext.extend(Ext.util.Observable,{
	constructor : function(config){
		Waiter.superclass.constructor.call(this, config);
	}
});
//创建员工对象
var emp = new Employee({name:'tom'});
//为自定义事件绑定处理函数
emp.addListener('startEat',function(){
	alert(this.name + '开始吃饭了。');
});
emp.addListener('finishEat',function (){
	alert(this.name + '吃完饭，可以收拾盘子了。');
});
//创建服务员对象
var waiter = new Waiter();
//使服务员对象与员工对象的finishEat事件进行关联
//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
	alert('服务员开始收拾盘子。');
});

Html代码  

1. <input type='button' value='员工吃饭' onclick='emp.eat()'>  

<input type='button' value='员工吃饭' onclick='emp.eat()'>

五、Ext.EventObject示例

Javascript代码  

1. var btn = Ext.get('buttonTest');   
2. btn.addListener('click',handler);//为click事件绑定处理函数   
3. function handler(e){//事件处理函数   
4.     //获取事件发生时的x坐标   
5.     var x = e.getPageX();   
6.     //获取事件发生时的y坐标   
7.     var y = e.getPageY();   
8.     var msg = '事件发生坐标 : x='+x+' y='+y;   
9.     alert(Ext.EventManager.getPageXY(e));   
10.     alert(msg);   
11. }  

var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//为click事件绑定处理函数
function handler(e){//事件处理函数
	//获取事件发生时的x坐标
	var x = e.getPageX();
	//获取事件发生时的y坐标
	var y = e.getPageY();
	var msg = '事件发生坐标 : x='+x+' y='+y;
	alert(Ext.EventManager.getPageXY(e));
	alert(msg);
}

六、Ext.EventManager使用

Javascript代码  

1. Ext.EventManager.addListener('btn','click',handler);//绑定处理函数  

1. <HTML>  
2.  <HEAD>  
3.   <TITLE>远程数据源的组合框示例</TITLE>  
4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
6.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
8.   <script type="text/javascript">  
9.     Ext.onReady(function(){   
10.         //创建数据模型   
11.         Ext.regModel('BookInfo', {   
12.             fields: [{name: 'bookName'}]   
13.         });   
14.         //定义组合框中显示的数据源   
15.         var bookStore = Ext.create('Ext.data.Store',{   
16.             model : 'BookInfo',   
17.             proxy: {   
18.                 type: 'ajax',//Ext.data.AjaxProxy   
19.                 url : 'bookSearchServer.jsp',   
20.                 reader: new Ext.data.ArrayReader({model : 'BookInfo'})   
21.             }   
22.         });   
23.         //创建表单   
24.         Ext.create('Ext.form.Panel',{   
25.             title:'Ext.form.field.ComboBox远程数据源示例',   
26.             frame : true,   
27.             height:100,   
28.             width:270,   
29.             renderTo: Ext.getBody(),   
30.             bodyPadding: 5,   
31.             defaults:{//统一设置表单字段默认属性   
32.                 labelSeparator :'：',//分隔符   
33.                 labelWidth : 70,//标签宽度   
34.                 width : 200,//字段宽度   
35.                 labelAlign : 'left'//标签对齐方式   
36.             },   
37.             items:[{   
38.                 xtype : 'combo',   
39.                 fieldLabel:'书籍列表',   
40.                 listConfig : {   
41.                     loadingText : '正在加载书籍信息',//加载数据时显示的提示信息   
42.                     emptyText : '未找到匹配值',//当值不在列表是的提示信息   
43.                     maxHeight : 100//设置下拉列表的最大高度为60像素   
44.                 },   
45.                 allQuery:'allbook',//查询全部信息的查询字符串   
46.                 minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量   
47.                 queryDelay : 300,//查询延迟时间   
48.                 queryParam : 'searchbook',//查询的名字   
49.                 triggerAction: 'all',//单击触发按钮显示全部数据   
50.                 store : bookStore,//设置数据源   
51.                 displayField:'bookName',//定义要显示的字段   
52.                 valueField:'bookName',//定义值字段   
53.                 queryMode: 'remote'//远程模式   
54.             }]   
55.         });   
56.     });   
57.   </script>  
58.  </HEAD>  
59.  <BODY STYLE="margin: 10px">  
60.  </BODY>  
61. </HTML>  

<HTML>
 <HEAD>
  <TITLE>远程数据源的组合框示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
  <script type="text/javascript" src="extjs4/bootstrap.js"></script>
  <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		//创建数据模型
		Ext.regModel('BookInfo', {
		    fields: [{name: 'bookName'}]
		});
		//定义组合框中显示的数据源
		var bookStore = Ext.create('Ext.data.Store',{
			model : 'BookInfo',
			proxy: {
		        type: 'ajax',//Ext.data.AjaxProxy
		        url : 'bookSearchServer.jsp',
		        reader: new Ext.data.ArrayReader({model : 'BookInfo'})
		    }
		});
		//创建表单
		Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.ComboBox远程数据源示例',
			frame : true,
			height:100,
			width:270,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:[{
				xtype : 'combo',
				fieldLabel:'书籍列表',
				listConfig : {
					loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
					emptyText : '未找到匹配值',//当值不在列表是的提示信息
					maxHeight : 100//设置下拉列表的最大高度为60像素
				},
				allQuery:'allbook',//查询全部信息的查询字符串
				minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量
				queryDelay : 300,//查询延迟时间
				queryParam : 'searchbook',//查询的名字
				triggerAction: 'all',//单击触发按钮显示全部数据
				store : bookStore,//设置数据源
				displayField:'bookName',//定义要显示的字段
				valueField:'bookName',//定义值字段
				queryMode: 'remote'//远程模式
			}]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 </BODY>
</HTML>

JSP代码：

Jsp代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   
2. <%   
3. String bookName = request.getParameter("searchbook");   
4. String jav = "['java编程思想'],['java入门'],['javascript程序设计']";   
5. String cpp = "['c++编程思想'],['c++入门'],['c++程序设计']";   
6. String php = "['php程序设计'],['php入门'],['php从入门到精通']";   
7. String books = "";   
8. if(bookName.equals("allbook")){   
9.     books = "["+jav+","+cpp+","+php+"]";   
10.     response.getWriter().write(books);   
11.     return;   
12. }else{   
13.     bookName = bookName.substring(0,3);//取查询字符串的前3个字符   
14.     System.out.println(bookName);   
15.   
16.     if(bookName.equals("jav")){   
17.         books = "["+jav+"]";   
18.     }else if(bookName.equals("c++")){   
19.         books = "["+cpp+"]";   
20.     }else if(bookName.equals("php")){   
21.         books = "["+php+"]";   
22.     }else{   
23.         books = "[['没有数据']]";   
24.     }   
25.     response.getWriter().write(books);   
26. }   
27. %>