Ext Js简单事件处理和对象作用域

简介:

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);
}
复制代码

代码都是在测试、在改动,看看这样修改会有什么效果,那样修改会有什么效果,把一些常用的多多熟练掌握,在不断的尝试中找突破,找完善,找真知。

本文转自SanMaoSpace博客园博客,原文链接:http://www.cnblogs.com/SanMaoSpace/archive/2013/01/22/2872047.html,如需转载请自行联系原作者
相关文章
|
5天前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
5天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
4天前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
13 2
[JS]作用域的“生产者”——词法作用域
|
6天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
5天前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
13天前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
5天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
20天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
40 6
|
18天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。