ExtJs4入门之二: 事件绑定 , 与jQuery的简单混用

一: 混用js顺序

jsp

<!-- 1.jQuery -->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.1.min.js"></script>
<!-- 2.Ext -->
<link rel="stylesheet" type="text/css" href="<%=basePath %>extjs/resources/css/ext-all.css" />
	<!-- 用ext-all.js 或者用 ext-all-debug.js
	<script type="text/javascript" src="<%=basePath %>extjs/ext-all.js"></script>-->
<script type="text/javascript" src="<%=basePath %>extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=basePath %>extjs/locale/ext-lang-zh_CN.js"></script>
<!-- 3.OthersJs -->

<script type="text/javascript" src="<%=basePath %>systemConfig/extDemo/extPanelDemo.js"></script> 

二: 事件绑定

1.jsp

<input type="button" id="btn"  value="按钮"/>
</body>

2.Ext的事件绑定

var win2 ;//全局变量
...
Ext.onReady( function(){

	win2 = Ext.create('Ext.window.Window',{
		height:200,
		width:400,
		title:"create出来的win",
	});

	//==>绑定事件
	//类似于jQuery , 唯一要注意的就是所调用对象的作用域, 
	//是本onReady内的局部变量, 还是在onReady之外的全局变量. 局部变量出了onReady会引用不到
	Ext.get("btn").on("click",function(){
		win2.show();
		Ext.Msg.alert("事件","触发事件win2.show()");
	});

})

3.使用jQuery选择器 , 在jQuery中引用Ext的对象

	//jQuery可以拿到Ext创建的Ext对象, 并调用方法 ,这样就好办多了
	//类似于jQuery的事件绑定, $("#ID").bind("even",fn) 或$("#btn").on("click",fn), 用jQuery可以做到一样的效果
	//(下边的win2是Js的全局变量)
//  $(function(){	//jQuery的ready()方法前的/ 是故意加的, 因为这个博客显示不正常 - -|||
	$("#btn").click(function(){
		alert("jq");
		Ext.Msg.alert("事件","事件绑定在: "+$("#btn").val());
		win2.show();
	})
	$("#btn").bind("click",function(){
		win2.show();
	})
	$("#btn").on("click",function(){
		win2.show();
	})
//})

4.Ext事件监听器

	//==>给页面Dom元素增加一个事件
	Ext.EventManager.addListener("btn" ,"click" , function(){
		alert("==>EventManager增加的事件");
	})
	

Ext.onReady(function(){
	
	var toolbar = Ext.create( "Ext.toolbar.Toolbar" ,{
		renderTo:divId,
		width:600,
		items:[
		       { xtype:"button" ,id:"tar",text:"tar"},
		       { xtype:"button" ,id:"create",text:"create"},
		       { xtype:"button" ,id:"delete",text:"delete" , handler:function(){
		    	   var tar = Ext.getCmp("tar");//通过getCmp("X")拿到id为X的组件
		    	   if( null != tar )
		    	   {
		    		   alert("==>2删掉tar组件 , 和其管理的事件");
		    		   tar.destroy();
		    	   }
		       }}
		]
	})
		
	
	//给tar对象组件增加一个管理事件, 管理的目标是create对象, 事件靠click触发
	//当tar被删掉了以后 , 被托管的事件也就消失了
	var tar = Ext.getCmp("tar") 
	tar.addManagedListener( Ext.getCmp("create") , "click" ,function(){
		alert("==>1 tar对象管理的 , 'create组件'的单击事件 ");
	})
	
});