Ext Js简单事件处理和对象作用域
对于Ext js程序的简单创建主要是引入ext-base.js和ext-all.js两个文件,再加入一些样式文件,网上对于Ext Js的学习资料也比较多,自己在这也简单分享一下。
Ext Js事件的简单处理,一个简单的示例:
该示例主要是对Number的prototype的简单测试:
//简单测试
function testNumber() { Number.prototype.add = function () { //前两个参数之和 // var num1 = arguments[0]; // var num2 = arguments[1]; // alert(num1 + num2); var sum = 0; var str = ""; //for循环取得所有参数之和 for (var i = 0; i < arguments.length; i++) { str += arguments[i].toString() + "+"; sum += arguments[i]; } //for...in循环取得所有参数之和 // for (var j in arguments) { // str += j + "+";//注意:j遍历的是下标 // sum += arguments[j]; // } str = str.substring(0, str.lastIndexOf('+')); alert(str + "的和:" + sum); } var num = 0; num.add(11, 12, 13, 15); //相加求和 }
ExtJS对于事件的管理都是通过Ext.EventMannager对象管理,ExtJS对W3C的Event封装在Ext.EventObject事件对象,支持事件处理的类或接口为Ext.util.Observable,凡是继承该类的组件或类都支持对象添加事件的处理和响应功能。
注意:对于对象的获取,Ext.get是对于Element元素(DOM元素)的获取;Ext.getCmp是对Component对象的获取。
注意:对于事件的处理不同(Test为某JS函数)
Ext Js获取组件对象:Ext.getCmp("btnTest").text;
DOM下对于事件的处理:document.getElementById("aLinkTest").onclick=Test;//DOM下的onclick的处理
ExtJs对于DOM对象的事件处理:Ext.get("aLinkTest").onClick = test();//Extjs的onClick的处理
对于Ext Js的事件处理常用handler\on\listeners的简单处理:(示例都是使用alert弹出的,Ext Js已经封装了一层,Ext.Msg.alert('信息提示', '信息内容!'))
Ext.onReady(function () {createWin().show(); }); //测试事件 function createWin() { var win = new Ext.Window({ title: "Window标题", height: 500, width: 300, items: [ new Ext.form.TextField({ id: "txtTest" }), { xtype: "textfield", id: "txtUserName", fieldLabel: "用户名", emptyText: "请输入名字", readOnly: true }, { xtype: "button", id: "btnHandler", text: "Handler事件处理",//handler事件处理 handler: function () { alert('测试handler事件!'); btnHandler("Test1", "test2"); } }, new Ext.Button({ id: 'btnListener', text: 'Listeners多事件监听', minWidth: '200', listeners: {//多事件监听 "mouseout": function () { alert('你已离开!') }, "click": function () { alert('那点我了!') }, "disable": function () { alert('触发Listeners的disable事件') } //on 属性,也能实现同样的功能 } }), new Ext.Button({ id: "btnHandlerTwo", text: "处理前两个按钮事件测试", handler: function () {// alert("我是自己的id:" + this.id); //获取自己的id alert("我是自己的文本:" + this.text); //获取自己的text alert("Window的Title:" + this.ownerCt.title); alert("这是第一个按钮的文本:" + this.ownerCt.items.itemAt(1).text); //回到父容器items的1个索引的text alert("这是第二个按钮的文本:" + Ext.getCmp("btnListener").text); //Ext.getCmp通过Id获取text this.ownerCt.items.itemAt(1).setText("改变第一个文本内容!"); //修改属性 Ext.getCmp("btnListener").disable(); //调用方法 } }) ], buttons: [ { text: "保存", id: "btnSave", handler: function () { alert("获取输出文本:" + Ext.getCmp("txtTest").getValue()) } }, { text: "取消", id: "btnCancel", listeners: { "click": function () { alert('你干嘛前取消啊!') } } } ] }); return win; }
function Test() { alert("Test链接!"); }
function btnClick(obj, e) { alert(obj + ",这是你点我的效果!"); }
function btnHandler(obj, e) { alert("源:" + obj + ";数:" + e); }
对于作用域的简单测试:
//作用域测试 var Taa = "我是Window域AA!"; function ScopeTest() {//作用域测试 var Taa = "我是Taa对象域AA!"; var Tbb = { aa: "我是Tbb对象AA!", bb: "我是Tbb对象BB!" }; var Tcc = { aa: "我是Tcc对象AA!", bb: "我是Tcc对象BB!", cc: "我是Tcc对象CC!" } var win = new Ext.Window({ title: "WindowsTitle", width: 200, height: 500, items: [ { xtype: "button", id: "btnXtype", text: "测试作用域1" }, new Ext.Button({ id: "btnExt", text: "测试作用域2" }) ] }); win.show(); Ext.getCmp("btnXtype").on("click", function () { alert(window.Taa); alert(this.aa); }, Tbb) Ext.getCmp("btnExt").on("click", function () { alert(this.cc) }, Tcc); }
代码都是在测试、在改动,看看这样修改会有什么效果,那样修改会有什么效果,把一些常用的多多熟练掌握,在不断的尝试中找突破,找完善,找真知。