一: 混用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组件'的单击事件 "); }) });