反正乱拨 » Ext

Element.on()向监听函数中传入的参数

Sway — Tue, 18 Aug 2009 14:48:54 +0000

Element.on()是Element.addListener()的缩写形式，按照Ext官方API的说明，使用形式如：Element.addListener( String eventName, Function fn, [Object scope], [Object options] ) ，无返回值。今天我要记录的是关于其中的第二个参数，Function fn，根据API说明，这个函数在注册事件发生时被调用，同时会传入三个参数：evt（当前事件对象）、t（事件目标的Elements对象）和o（一些配置信息），你可以不传入参数、传入第一个参数、前两个参数或前三个参数。若是不传入参数，那么在函数体内部通过使用this将得到注册事件的对象本身(Element对象)，假设页面存在一个div ：

i am aDiv

如：

var el = Ext.get(‘aDiv’);
el.on(‘click’,function(){
Ext.Msg.alert(‘info’,'this.id==’ + this.id);
Ext.Msg.alert(‘info’,'this.dom.innerHTML==’ + this.dom.innerHTML);
});

若是传入一个参数，那么这个参数将被函数当做当前事件对象(EventObject)使用。
若是传入两个参数呢，按照API说明，第二个参数就是当前对象，即注册此事件的对象，并且它是一个Element型的，而根据我的测试，它并非是一个Elements型，而仅仅是一个普通的HTML元素，或者说是Ext里的HTMLElement对象，同样上面的函数改写：

var el = Ext.get(‘aDiv’);
el.on(‘click’,function(evt,t){
Ext.Msg.alert(‘info’,'t.dom.innerHTML==’ + t.dom.innerHTML);
});

若 t 是Element对象，第三行应能正确运行，然而不能，只有改成Ext.Msg.alert(‘info’,'t.dom.innerHTML==’ + t.innerHTML)才能得到预期的值。这说明t是一个HTMLElement对象。

跨浏览器Ext版网页漂浮广告JavaScript函数

Sway — Thu, 30 Jul 2009 14:50:58 +0000

今天浙大门户系统提出一个需求，用户登录后希望网页上可以漂浮一个小图片，提醒同学可以做在线咨询，我一听，这不就是本人最讨厌的网页广告吗，可没办法，人家给钱，你就是奴才。
在网上一搜，这类脚本铺天盖地，基本是一样的，纯JS写成，拷过来一用，静态页面时IE和Firefox都正常，改成JSP后在IE下还好，Firefox下就不行了，该飘的东西一动不动，改了半天没改出来，想想咱们门户每次加载都带上了Ext库，咱们也别浪费了，我就用Ext写了个跨浏览器的漂浮JavaScript函数，在JSP下通过IE、Firefox及Safari测试，Chrome应该也没问题。函数源码如下：

function floatInfo(id, distance, per){
   var flagH = 0;
   var flagW = 0;
   var distance4L = distance;
   var avaiH = document.body.clientHeight - id.getHeight();
   var avaiW = document.body.clientWidth - id.getWidth();
   var task = {run: function(){
                        id.setTop(id.getTop() + distance);
                        flagH += distance;
                        if(flagH >= avaiH || flagH <= (-avaiH)) {
                                distance = (-distance);
                                flagH = 0;
                        }
                       id.setLeft(id.getLeft() + distance4L);
                       flagW += distance4L;
                       if(flagW >= avaiW || flagW <= (-avaiW)) {
                       distance4L = (-distance4L);
                       flagW = 0;
                       }
                   },
                  interval: per
                }
  Ext.TaskMgr.start(task);
}

传入参数id代表网页上要漂浮元素的id；distance是数字，代表一次移动多少像素；per也是数字，代表多长时间移动一次，其中1000代表1秒，数字越小移动越快。使用方式如下：

虽然用Ext写这种东西是有点杀鸡焉用牛刀的味道，但谁叫本人对跨浏览器的脚本编程这么差呢。

关于IE和Firefox对Html引入外部文件的探查

Sway — Sun, 24 May 2009 13:49:33 +0000

前几天在学习Ext的时候，刚第一步就卡壳了，长时间连HelloWorld都没哈出来，好让我不郁闷。

情况：我把Ext的库解压缩放在F盘下的某个文件夹，然后在E盘某个文件夹下新建Html页面，并通过动态引入F盘下的Ext所需文件，准备实现个Helloworld，结果IE下成功了，Firefox下死活不行，至始至终报Function not defined。你说我没定义函数或路径错误吧，人家IE却找到了，所以我当时在想：难道是针对Firefox还需要引入别的其他Ext文件支持，这也太弱智了吧（Ext）。所以当时猜想会不会是Firefox不能识别跨盘路径，今天，花了本人宝贵的时间，终于得出结论了：
Firefox不是不支持跨盘路径，而是管你跨不跨盘，它根本就不支持带盘符的绝对路径名，例如“E:\folder1\folder2\test.js”是引入不了的，而以上这些在IE下都不是问题。
同样，经我测试，对于CSS文件的引入Firefox也存在这样的问题。

以上结论，本人并不能给出官方解释，而是通过实践得出的。有时候，实践还是可以得出些真理的。当然信不信有你。