2012/7/25Extjs学习笔记

Extjs支持事件队列，可以往对象的某一个事件中添加多个事件响应函数。看代码：

<script>
   　function a(){
   alert('u clicked me a');
   }
   　function b(){
   alert('u clicked me b ');
   }
   Ext.onReady(function(){
   Ext.get("btn").on("click",a);
   Ext.get("btn").on("click",b);
   });
   </script>
   <input id="btn" type="button" value="alert框">

 addLinster方法的另一个简写形式是on.由于两次调用了on方法，会两次显示提示框。此外，Extjs还支持事件延迟处理或事件处理缓存等功能。

看代码：

Ext.onReady(function(){
   Ext.get("btn").on("click",a,this,{delay:2000});

   });

 这个提示框将延迟2秒显示。

 

每一个控件包含哪些事件，在什么时候触发，触发时传递的参数等，在Extjs项目的文档中都有较为详细的说明。比如每一个组件都包含一个befordestory事件，该事件会在Ext销毁这个组件时触发，如果事件响应函数为false,则会取消组件的销毁操作。

看代码：

Ext.onReady(function(){    
var window =new Ext.Window(
    {
        title:'this window can not be closed',
        width:300,
        height:200                
    });
    window.on("beforedestroy",function(obj){
        alert('u can not close me');
        obj.show();
        return false;
    });
window.show();    
});

你将会发现这个窗口是无法关闭的。
组件的事件监听器可以直接在组件的配置属性中直接声明，如下面的代码与前面实现的功能是一样的：

Ext.onReady(function(){    
var window =new Ext.Window(
    {
        title:'this window can not be closed',
        width:300,
        height:200,
        listeners:{
            "beforedestroy":function(obj){
            alert('u can not close me');
            obj.show();
            return false;
        }}
    });

 window.show();    
});

6.

①面板Panel是Extjs控件的基础，很多高级控件都是在面板的基础上扩展的。还有其他大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同的组织方式形成。

面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供了一系列可重用的工具按钮使我们可以轻松实现自定义的行为，面板可以放入其他任何容器中，面板本身是一个容器，它里面又可以包含各种其他组件。

看代码：

Ext.onReady(function(){	
	new Ext.Panel({
		renderTo:"hello",
		title:'面板头部',
		width:300,
		height:200,
		html:'<h1>面板主区域</h>',
		tbar:[
			{text:'顶部工具栏topToolbar'}
			],
		bbar:[
			{text:'底部工具栏bottomToolbar'}
			],
		buttons:[
			{text:'按钮位于下面footer'}
			]
			
	});
});

 注意要在.jsp中加入代码 <div id="hello"></div>

一般情况下，顶部工具栏和底部工具栏只需要一个，然后把按钮放到工具栏中去。看代码：

Ext.onReady(function(){	
	new Ext.Panel({
		renderTo:"hello",
		title:'面板头部',
		width:300,
		height:200,
		html:'<h1>面板主区域</h>',
		tbar:[
			{
			pressed:true,
			text:'按钮'
			}
			],		
	});
});

 ②：面板中可以有工具栏，工具栏可以位于面板顶部也可以位于底部，Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。比如下面的代码：

Ext.onReady(function(){	
	new Ext.Panel({
		renderTo:"hello",
		title:'hello panel',
		width:300,
		height:200,
		html:'<h1>hello panel!</h>',
		tools:[
			{id:'save'},
            {
			id:'help',handler:function(){
				alert('help me!');
			}},
			{id:'close'}
			],
            tbar:[
            	{
            	pressed:true,
            	text:'刷新'
            	}
            	]					
	});
});

 除了在面板头部加入这些已经定义好的工具栏选择按钮以外，还可以在顶部或底部工具栏中加入各种工具栏选项，这些工具栏选项包括按钮，文本，空白，填充条，分隔符等。看代码：

Ext.onReady(function(){	
	new Ext.Panel({
		renderTo:"hello",
		title:'hello panel',
		width:300,
		height:200,
		html:'<h1>hello panel!</h>',
		tools:[
			{id:'save'},
            {
			id:'help',handler:function(){
				alert('help me!');
			}},
			{id:'close'}
			],
            tbar:[
            	new Ext.Toolbar.TextItem('工具栏:'),
            	{xtype:"tbfill"},
            	{pressed:true,text:'添加'},
            	{xtype:'tbseparator'},
            	{pressed:true,text:'保存'}
            	]					
	});
});

 Ext中的工具栏项目主要包含下面的类：

Ext.Toolbar.Button－按钮，xtype为tbbutton

TextItem－

Ext.Toolbar.Fill－

Separator－

Spacer－

SplitButton－