IT博客-A JavaScript Fancier-随笔分类-Js框架组件

实现Ext的grid单元格数据过长换行显示

Yemoo'S JS Blog — Thu, 10 Jul 2008 02:19:00 GMT

Grid的单元格对数据显示都是采用省略的办法来处理的，即内容长度超过单元格长度时自动隐藏超过的部分并使用省略号...来显示，这样虽然也很好，但有时我们可能还是希望它能完全的显示出来，即采用换行显示。

最简单的办法莫过于直接修改ext-all.css，但俺一般不像侵入ext的源文件，那就自己用别的方法实现吧。
方法其实也很简单，判断该grid是否需要换行显示。如果是则加上这段代码：

grid.store.on('load', function() {
    gridEl.select("table[class=x-grid3-row-table]").each(function(x) {
        x.addClass('x-grid3-cell-text-visible');
    });
});

CSS文件内容：

.x-grid3-cell-text-visible .x-grid3-cell-inner{overflow:visible;padding:3px 3px 3px 5px;white-space:normal;}

Yemoo'S JS Blog 2008-07-10 10:19 发表评论

Ext实现页面表单Enter全键盘导航

Yemoo'S JS Blog — Thu, 10 Jul 2008 02:17:00 GMT

在web软件中，很多时候我们希望提供用户一个键盘表单导航的功能，使用Enter代替tab实现表单的导航。
思路基本就是遍历页面的input字段，为每个表单项增加一个enter键的监听，如果出发了enter键则程序在触发tab键即可。

下面是在ext中实现的键盘导航的代码。

/**
* 表单全键盘导航功能
* index:可选参数，用于设定页面加载完成后默认获取焦点的表单项，支持索引号和id/dom类型参数传入。
*/
var keyNav = function(index){
    var run=function(){
        var all=Ext.DomQuery.select('input[type!=hidden]'); //查找所有非隐藏的录入向（ext中select都是用input模拟的所以这里不用找select）
        Ext.each(all,function(o,i,all){ //遍历并添加enter的监听
            Ext.get(o).addKeyMap({
                key : 13,
                fn : function() {
                    try{all[i+1].focus()}catch(e){event.keyCode=9}
                    if(all[i+1]&&/button|reset|submit/.test(all[i+1].type)) all[i+1].click();   //如果是按钮则触发click事件
                    return true;
                }
            })
        });
        document.body.focus();  //使页面获取焦点，否则下面设定默认焦点的功能有时不灵验
        try{
            var el;
            if(typeof eval(xFocus)=='object'){  //如果传入的是id或dom节点
                el=Ext.getDom(xFocus).tagName=='input'?Ext.getDom(xFocus):Ext.get(xFocus).first('input',true);  //找到input框
            }else{
                el=all[xFocus||0];  //通过索引号找
            }
            el.focus();
        }catch(e){}
    }
    Ext.isReady?run():Ext.onReady(run);  //页面加载完成后添加表单导航
}

Yemoo'S JS Blog 2008-07-10 10:17 发表评论

扩展Ext.form.DateField实现定义日期面板默认展示日期

Yemoo'S JS Blog — Thu, 10 Jul 2008 02:04:00 GMT

用了这么久的EXT，感觉Ext的功能是很全很强了，但任何东西都不能涵盖所有的需求，好在Ext为我们提供了书写扩展的接口，通过做一些扩展便可轻松是Ext组件满足我们的特殊需求。

Ext的date组件就不能满足我们这么一个需求：我们希望当日期框内容为空时，我们点击日期输入框后面的图标显示日期选择面板时，展示的默认日期不是当前日期的年月，而是我们自己设定的一个默认日期。

查看Ext.form.DateField的属性列表没有看到提供这么一个参数可以让我们设置默认展示日期。

因此这就需要我们自己去扩展下了。查看了Ext.form.DateField的onTriggerClick方法，发现面板的默认日期是在这里设定的。
Ext设定的是this.getValue() || new Date()，也就是先取输入框的值，如果不存在则使用当前日期。

ok，来扩展吧，我们自己再setValue一下就可以了。

代码如下：

  Ext.form.myDateField=Ext.extend(Ext.form.DateField,{
            onTriggerClick:function(){
                Ext.form.myDateField.superclass.onTriggerClick.call(this);   //先执行一下父类的函数内容，否则下面的this.menu找不到
                this.menu.picker.setValue(this.getValue()||this.defaultDate);     //调用menuPicker的setValue方法设定一下值
            }
        });
        Ext.reg('myDateField',Ext.form.myDateField);  //注册一个类型，便于使用
        //使用我们自己扩展myDateField，直接new一个对象
        var date=new Ext.form.myDateField({
            renderTo:document.body,
            defaultDate:new Date(2008,7,8)    //这个defaultDate就是我们扩展的一个属性
        });
        //通过xtype引用
        var panel=new Ext.Panel({
            width:200,
            height:200,
            items:{
                xtype:'myDateField',   //通过我们注册的xtype来引用
                defaultDate:new Date(2008,7,8)
            },
            renderTo:document.body
        });

看看代码注释大家一定都能明白，几行代码就搞定了。
再此感叹！Ext真强！

Yemoo'S JS Blog 2008-07-10 10:04 发表评论

Ext中判断浏览器及系统平台的代码摘录

Yemoo'S JS Blog — Mon, 23 Jun 2008 05:39:00 GMT

判断浏览器类型及操作系统平台不算一个什么难题，但要做到短小精悍，那还是有些难度，看了Ext的代码觉得其代码的优秀之一就是代码的短小精悍，以尽可能精简的代码去实现一些操作。
这里摘录了Ext.js中关于浏览器类型及操作系统平台的代码，这段代码包含了很全面的关于浏览器和操作系统类型判断，而且代码也非常的精简，应该从中好好学习下：

var ua = navigator.userAgent.toLowerCase();

    var isStrict = document.compatMode == "CSS1Compat",
        isOpera = ua.indexOf("opera") > -1,
        isSafari = (/webkit|khtml/).test(ua),
        isIE = !isOpera && ua.indexOf("msie") > -1,
        isIE7 = !isOpera && ua.indexOf("msie 7") > -1,
        isGecko = !isSafari && ua.indexOf("gecko") > -1,
        isBorderBox = isIE && !isStrict,
        isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
        isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
        isLinux = (ua.indexOf("linux") != -1),
        isSecure = window.location.href.toLowerCase().indexOf("https") === 0;

Yemoo'S JS Blog 2008-06-23 13:39 发表评论

判断html元素是否真正可见的巧妙方法

Yemoo'S JS Blog — Mon, 23 Jun 2008 05:37:00 GMT

在Ext中，几乎所有的组件都有isVisible()方法和hidden属性，都是用来判断是否组件元素是否可见，这在ext内部管理来说没有问题，但有时我们把组件放在了自己的html结构内，如果我们把自己编写的html元素通过css定义为隐藏后，使用ext的isVisible方法和hidden属性就不能正确获取到组件是否可见了，因为ext也仅仅是根据判断元素的visibility和display属性来确定元素是否可见的。因此如果本身没有设定隐藏而外层设定了隐藏，则不能通过这两个css属性来判断元素是否可见了。

在实际的应用中，有时还必须需要知道元素的真实的可见性，但此时通过ext的内部方法就不管用了，思考测试许久突然想起了一个元素，当元素不可见时读取其实际高度或宽度则可能返回0，测试发现果然如此。
通过读取其offsetXXX或clientXXX来判断，或者使用Ext的getSize或getComputedWidth/Height方法获取，如果元素在页面不可见则会返回0，根据这点我们就可以获取到元素的真正可见性了。

如我们需要在元素可见时执行一些操作，则可以如下组织代码：

var timer=setInterval(function(){
    if(el.getComputedHeight()>0||el.getComputedWidth()>0){
            //do something
            clearInterval(timer);
    }
},1)

Yemoo'S JS Blog 2008-06-23 13:37 发表评论

解决Ext2.0中ComboBox执行Filter第一次无效的问题

Yemoo'S JS Blog — Mon, 02 Jun 2008 01:01:00 GMT

更新Ext ComboBox的列表项，直接通过更新其Store即可，而且可以通过Filter对store数据进行过滤只显示符合特定条件的列表项。
今天项目正好需要这个了，页面4个ComboBox的列表随着页面操作需要不断更新，我采用的方法也正是filter，本来以为一个很简单的问题，但整整郁闷了我两个多小时，开始发现filter之后虽然store的内容已经发生了变化，但ComboBox的列表项却仍然是原来的，偶以为是自己程序那个地方出错了，结果查了半天也没有找到什么错误。

后来测试突然发现只是第一次点击显示ComboBox的时候没有显示过滤后的内容，而从第二次开始每次都能获显示flter后的内容。
这个问题真是怪了，我猜想应该是EXT本身的问题，开始只是想触发一个expand事件，但发现问题并不那么简单，花费半个小时也没有想到好的办法，只好到Ext Forum上求助了，先search了一下ComboBox Filter，发现了已经有很多人遇到了与我同样的问题，看来真的是Ext的问题了，看了几篇帖子，找到了一个比较有效的解决办法：filter之后删除原store的数据快照。
如：

store.filter();
delete store.snapshot;

马上试了一下还真可以，兴奋了半天之后却又遇到了另一个问题，即store.clearFilter不能还原到原来的数据了。思考了一下应该是store.snapshot保存了最原始的数据，这样一delete肯定就找不到原始数据了，因此也就不能恢复了。这可够郁闷，删也不是不删也不是！
继续思考，如果我把它的snapshot保存起来，需要用clearFilter恢复数据时再把它的snapshot给还原了岂不就解决了吗？经过测试，果真成功！

为了使用方便、降低重复代码量，偶对comboBox进行了简单的封装，除了解决上面filter的问题，还实现了通过document.forms[0].combox.value获取和设定comboBox的功能，通过选择ComboBox的列表值会同步更新form表单中combox的值。

使用方法示例：

html:

JS:

var data=[[1,'用户一'],[2,'用户二']];
var combox=new makeCombo('combox',data,'用户列表');

//获取userList的值
var curValue=document.forms['testForm'].userList.value;
//设定userList当前值
document.forms['testForm'].userList.value=2;

封装代码：

/**
* 根据数据生成combox到指定的位置
* id:容器,data:数据,text:文本 width:ComboBox的宽度，默认为所绑定元素的宽度
*/
function makeCombo(id,data,text,width){
    var container=Ext.get(id);
    if(!container)return;
    var realInput;  //保存值的input
    return new Ext.form.ComboBox({
        store: new Ext.data.SimpleStore({
            //解决filter第一次无效的bug,保存原数据快照到另一个变量
            listeners:{datachanged:function(){if(!this.mySnap)this.mySnap=this.snapshot;delete this.snapshot}},
          fields: ['value', 'text'],
          data:data||[]
      }),
        editable:false,
        valueField:'value',
        displayField: 'text',
        typeAhead: true,
        lazyInit: false,
        width:width||container.getComputedWidth(),
        mode: 'local',
        listeners:{
            render:function(_this){
                realInput=Ext.DomHelper.insertAfter(container,{tag: 'input',type:'hidden',name:_this.getName(),value:_this.getValue()})
                realInput.onpropertychange=function(){_this.setValue(this.value)};  //真实表单联动模拟表单
                container.dom.removeAttribute('name');
                _this.clearFilter=function(){   //扩展一个方法还原store
                    _this.store.snapshot=_this.store.mySnap;
                    _this.store.clearFilter();
                }
            },
            select:function(combo,rec,index){   //模拟表单联动真实表单
                realInput.value=rec.get('value');
            }
        },
        triggerAction: 'all',
        emptyText: "请选择"+(text||''),
        selectOnFocus: true,
        applyTo: container
    });
}

Yemoo'S JS Blog 2008-06-02 09:01 发表评论

Prototype ScrollTo Plugin--页面滚动插件

Yemoo'S JS Blog — Mon, 02 Jun 2008 00:55:00 GMT

很多时候特别在页面比较长的时候我们都会加上一个如"go Top!"，"go Bottom"等之类的按钮或连接，用于快捷的引导用户到页面指定的位置。我们一般都使用html的瞄标记来实现，但这样给用户的体验不是很好，特别页面较长时页面瞬间滚动到页面的底部或顶部可能会使用户迷失，Prototype ScrollTo Plugin这个组件正好帮我们解决这个问题。

Prototype ScrollTo Plugin采用一种平滑的滚动方式，给用户一种友好的交互体验。很有实用的价值的一个组件。

示例地址：http://tobielangel.com/examples/auto-scrolling-page-navigation

Yemoo'S JS Blog 2008-06-02 08:55 发表评论

ExtTLD--JSP tag Lib方式使用Ext

Yemoo'S JS Blog — Mon, 02 Jun 2008 00:54:00 GMT

最近公司也一直在考虑如何封装ext便于书写页面，毕竟完全写js代码有很多不变，代码多了不好维护，而且对于初级页面制作者来说也有很大的难度。我们基本是考虑使用html标签应用方式，通过id绑定的方式生成组件，近日闲逛ajaxian发现第一篇文章标题是：ExtTLD: Create Ext components with XML，顿时一惊，打开光放网站大概看了一下，感觉思路还不错。

ExtTLD是一个应用于基于Java语言项目的Ext标记。把写js生成页面的方式变换为写jsp tag的方式来引用，使用难度上降低了不少，但项目似乎是刚刚开始，还有很多不成熟的地方，不过随着不断的完善，应该还是有点前途的，关注一下！

有兴趣的朋友也可以看看：http://www.exttld.com/

Yemoo'S JS Blog 2008-06-02 08:54 发表评论

实现Ext Grid宽高自适应

Yemoo'S JS Blog — Fri, 30 May 2008 03:09:00 GMT

不知是Ext的Bug还是其他原因，当初始化grid并将宽度设为100%时，其宽度会变成10000px宽，高度100%则grid高度根据grid内容自适应，而不是根据其所在容器自适应，一直没有很好的办法，只能使用绝对宽高，但有时这是很不方便的。
对此问题一直耿耿于怀，后来终于想出了一个办法，还真的可行，但就是感觉有点蹩脚。
一般我们都通过render到指定id的层上来展现grid，虽然不能让grid宽高自适应，但层还是可以的。
如我们这里要用到的层是

。我们可以在这个层上设置高宽。
如

。
则在初始化grid的时候让其宽高与orgGrid宽高相同即可，并在页面resize时重新计算器宽度即可（一般高度固定还是比较好）。

js代码如下：

//..前面若干行代码省略，如ds/colmodel等
var orgGrid=Ext.get("orgGrid");  //展示grid的容器
    var grid = new Ext.grid.GridPanel({
        title:"人员管理",
        ds: ds,  //数据源
        cm: colModel,  //列模式
        sm:selMode,    //选择模式
        width:orgGrid.getComputedWidth(),
        height:orgGrid.getComputedHeight(),
        autoExpandColumn:"memory",  //自动扩展宽度的列
        autoScroll:true,
        loadMask:{msg:"数据加载中，请稍等"}
     });
     ds.load();
     grid.render(orgGrid);  //把grid铺到id为grid的容器中

window.onresize=function(){
        grid.setWidth(0);
        grid.setWidth(orgGrid.getComputedWidth());
};

这样不论页面宽度怎么变化grid都会自适应页面容器了。
<

Yemoo'S JS Blog 2008-05-30 11:09 发表评论

Ext2:在iframe内页关闭外部展开的menu菜单

Yemoo'S JS Blog — Fri, 30 May 2008 03:07:00 GMT

由于项目需要因此使用ext2构建页面时，我们的工作区Tab页面都采用iframe来实现，但因为在页面主页面中存在下拉菜单(menu)，因此就出现了如下一个问题：当下拉菜单被展开显示后，在iframe页面中点击鼠标不能关闭外部的menu，这个问题很是让人郁闷。
后来想了一下还是找到了解决办法：

1、首先要保证menu对象保存到了页面的一个全局变量中，以使内页可以通过top访问到menu对象。
如menu=new Ext.menu.Menu({});
2、在内页中加上如下一行js
Ext.get(document).on("click",function(){try{top.menu.hide()}catch(e){}}); //隐藏头部菜单

这样当点击iframe页面时，如果top中有menu，则会将其隐藏。一点小技巧，希望对同样遇到此问题的朋友有帮助。

Yemoo'S JS Blog 2008-05-30 11:07 发表评论

解析Xml构建Ext树形菜单

Yemoo'S JS Blog — Fri, 30 May 2008 03:01:00 GMT

xml在j2EE中应用非常广泛，主要作为一些配置存在。在我们的项目中由于需要方便的对菜单进行管理，因此也将菜单定义成了xml。
然后使用ext去解析这个xml进行菜单展示。

菜单格式大致如下：

xml version="1.0" encoding="UTF-8"?>
<根节点 expanded="true">
  <节点一 expanded="true" id="tree-test1">
    <子节点一 href="page1.html" />
    <子节点二 href="page2.html" />
    <子节点三 href="page3.html" />
    <子节点四 href="page5.html" />
    <子节点五 href="page4.html" />
  节点一>
  <节点二 expanded="true" id="tree-test1">
    <子节点一 href="page1.html" />
    <子节点二 href="page2.html" />
    <子节点三 href="page3.html" />
    <子节点四 href="page5.html" />
    <子节点五 href="page4.html" />
  节点二>
根节点>

基本是按照树形结构写的菜单，如果有多级菜单，则按照xml的嵌套规则进行嵌套即可。
1、必须有一个根节点
2、对某个节点的属性可以通过xml属性定义。如id="xx"，href='xx'。
3、如果没有子节点，可以对单个标记写。如<节点 />

剩下的就是解析函数，这里参考ext官方论坛的一个帖子，偶自己改了一下以适应定义的xml：

//解析xml字符串
function loadXML(xmlStr){
    if(!xmlStr)return null; //空串返回null
    if (window.ActiveXObject){
        var xmlDom=new ActiveXObject("Microsoft.XMLDOM");
    }else{
        if (document.implementation&&document.implementation.createDocument){var xmlDom=document.implementation.createDocument("","doc",null)}
    }
    xmlDom.async = false;
    try{
        xmlDom.loadXML(xmlStr);
    }catch(e){  //非IE浏览器
        var oParser=new DOMParser();
        xmlDom=oParser.parseFromString(xmlStr,"text/xml");
    }
    return xmlDom;
}
//下面两个函数用于解析xml为树结构输出
function createXmlTree(el,xmlsrc,callback) {
    var tree=new Ext.tree.TreePanel({el:el,animate:true,border:false,autoHeight:true});
    var xmlDom=loadXML(xmlsrc);
    try{    //作为xml串解析
        tree.setRootNode(treeNodeFromXml(xmlDom.documentElement||xmlDom));
        callback.call(tree);
    }catch(e){  //作为url解析
        var p = new Ext.data.HttpProxy({url:xmlsrc||"etc/menu.xml"});    //默认为etc/menu.xml
      p.on("loadexception",function(o,response,e){tree.setRootNode(new Ext.tree.TreeNode("根节点"))});
      p.load(null,{
          read: function(response) {
              var doc=response.responseXML;
              tree.setRootNode(treeNodeFromXml(doc.documentElement||doc));
          }
      },callback,tree);
    }
    return tree;
}
function treeNodeFromXml(XmlEl) {
    var t=((XmlEl.nodeType==3)?XmlEl.nodeValue:XmlEl.tagName);
    if(t.replace(/\s/g,'').length==0){return null}
    var result = {text : t};

    if(XmlEl.nodeType==1){
        Ext.each(XmlEl.attributes,function(a){
            if(a.nodeName=="href"&&XmlEl.hasChildNodes()) return;    //目录不添加链接属性
            result[a.nodeName]=a.nodeValue;
        });
        result = new Ext.tree.TreeNode(result); //根据属性设置构建树
        Ext.each(XmlEl.childNodes,function(el){
            if((el.nodeType==1)||(el.nodeType ==3)){
                var c=treeNodeFromXml(el);
                if(c){result.appendChild(c);}
            }
        });
    }
    return result;
}

以上方法支持传入xml的url或直接传入xml串。

调用示例：
//第一个参数：要显示树形菜单的容器id或dom对象，
//第二个参数：xml源：可以为url或xml字符串
//第三个参数：解析树成功后执行的回调函数
var menuTree = new createXmlTree('menuTree',"etc/menu.xml",function(){
        this.render();
        this.getRootNode().expand();
    });

Yemoo'S JS Blog 2008-05-30 11:01 发表评论

EXT Ajax访问url返回405错误的解决办法

Yemoo'S JS Blog — Fri, 30 May 2008 01:46:00 GMT

昨日用了Ext Tree组件做一个东西，需要用到ajax对节点逐级加载，开始数据用的静态数据data.txt，一切程序都测好了然后放到系统中测试，将data.txt换成了servlet，发现什么都不显示，单独访问servlet也能正常返回json数据，猜想应该是出现ajax调用错误了，检查了传递的参数与服务端需要的参数名也丝毫没有问题，Loader的代码大致是这样的：

loader: new Tree.TreeLoader({
            dataUrl:'data.servlet',
            baseAttrs:{leaf:true},
            listeners:{
                beforeload:function(treeLoader, node){
                    this.baseParams={    //传递两个参数
                        nodeid:node.attributes.nodeid,
                        orgid:node.attributes.orgid
                    };
                    node.on("append",function(tree,node,cnode){
                            var icon=cnode.attributes.type.toLowerCase();
                            if(icon=="p"){cnode.attributes.iconCls='c3'}  //人员
                            if(icon=="m"){cnode.attributes.iconCls='c2'}  //机构
                            if(icon=="d"){cnode.attributes.iconCls='c2'}  //部门
                    });
                }
            }
        })

接着为loader加了一个异常监听：

loadexception:function(tree,node,res){
alert(res.status);
}

运行弹出“405”，查了一下这个状态码的意义，原来是资源禁止访问，在java里也就是参数传递方式不对，Servlet用GET接受数据，但请求用POST传递数据，因此就会出现这个问题，知道原因就好办了，在treeLoader里加一个requestMethod:'GET'就ok了。
=======================================
还有一个问题要注意：
tree ajax第一次请求数据时传递的的参数的值在rootNode里面设定，如
var root = new Tree.AsyncTreeNode({text: '根节点',nodeid:'',orgid:''});
里面的nodeid和orgid就是要发送到服务端的参数，注意与baseParams照应即可，这个值最好在rootNode里应该设定一下，否则服务端接收到的nodeid和orgid值就是undefined，如果服务端用null和''来检测空参数值就可能出现问题。如果初始访问不需要参数，则将参数都设为空，否则设定为特定的值即可。

Yemoo'S JS Blog 2008-05-30 09:46 发表评论

mapper--图片热点区域高亮组件

Yemoo'S JS Blog — Thu, 03 Apr 2008 04:24:00 GMT

很有意思的一个东西，我们都用过图片热点对多个切片做链接，也用过链接的hover高亮效果，但却没有办法实现图片热点的高亮效果（即鼠标悬停在某个热点区域时该区域高亮显示）。

Mapper就是这样的小组件，利用js绘图和css定义实现了这样一个很有用处的功能。

效果如下：

官方站点及演示：http://www.netzgesta.de/mapper/

Yemoo'S JS Blog 2008-04-03 12:24 发表评论

Jash: JavaScript Shell

Yemoo'S JS Blog — Tue, 22 Jan 2008 12:28:00 GMT

Jash: A Cross-Browser Javascript Command-Line Debugging Tool

Jash是一个基于DHTML开发的命令行JavaScript调试工具，用于调试当前打开的页面。通过该调试工具，你可以快速的进行脚本调试，查看dom、当前页面对象，函数、变量，跟踪执行堆栈，执行任意脚本及为页面定义css等，可运行于IE6+ 、FF1.5+、Safari 3 +下。
程序仅仅是一个大小约为30kb的js文件，无需安装，只需将js放入书签，随时都可以通过点击该书签调出，或者在自己程序中直接嵌入这个js文件即可。

详细请查看官方介绍：http://www.billyreisinger.com/jash/

Yemoo'S JS Blog 2008-01-22 20:28 发表评论

Ext2类继承关系简要结构图

Yemoo'S JS Blog — Tue, 22 Jan 2008 12:27:00 GMT

yemoo整理于2007年12月11日，对其中的类继承关系做了简单的总结，不完善之处希望大家提出。

转载请注明来源：http://www.ajaxbbs.net

由于内容是由word文档导出生成，因此请访问http://www.ajaxbbs.net/blog/attachment/other/Ext-Class-Inhert-Chart.htm。

Yemoo'S JS Blog 2008-01-22 20:27 发表评论

Google Chart

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:38:00 GMT

前面介绍了Jquery的一个Chart插件Slot，这里在推荐一个Google的Chart组件。

Google Chart使用方式比较特别，不是调用js，而是直接在url传入参数即生成对应的Chart，只要掌握了这些参数就可以生成各种需要的chart图表了。
如
http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World
将显示为

可以直接作为图片应用，如：

有兴趣的可以看看，项目的地址为：http://code.google.com/apis/chart/

Yemoo'S JS Blog 2008-01-02 15:38 发表评论

Plot-Jquery图表绘制插件

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:36:00 GMT

受Plotr和PlotKit的启发，Ole Laursen基于jquery开发了一个图表绘制(WEB Chart)插件并命名为flot。名字有点古怪，但当其V0.1版本发布时就吸引了不少人的关注。

项目地址：http://code.google.com/p/flot/
Demo演示：http://people.iola.dk/olau/flot/examples/

以下为Slot的一些示例截图：

Yemoo'S JS Blog 2008-01-02 15:36 发表评论

使用YSlow加快网页加载速度

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:34:00 GMT

YSlow是Yahoo开发的一款用于优化网页性能的Firefox插件，该插件安装后自动与firebug控制台集成到了一起，当前最新版本为0.9。

YSlow通过对网页各个部分的分析然后根据Yahoo“High Performance Web Sites”十条规则提出对加速当前网页性能的建议。

主要包括如下内容：
性能报告
HTTP/HTML摘要显示
页面组件列表(Js/CSS/Images etc)
集成JSlint，便于调试页面js程序。

以下为部分功能图示：

性能视图：如果一个网页有需要改进的地方，则会用红色的字体标出：

状态视图：显示页面缓存状态及cookie信息

组件视图：显示页面的各个组件及各个组件的详细信息如类型, URL, 过期时间, gzip状态, 加载时间, 文件大小, ETag，同时也可以查看各个组件http请求的头信息。

详细介绍见官方：http://developer.yahoo.com/yslow/
相关文档：http://developer.yahoo.com/yslow/help/
插件下载安装地址：https://addons.mozilla.org/en-US/firefox/addon/5369

Yemoo'S JS Blog 2008-01-02 15:34 发表评论

解决Ext2 Form表单项的不正确显示问题

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:31:00 GMT

在使用Ext2 form的过程中，发现了一些表单项外观显示的问题：
1、输入框下边的线消失
2、日期控件及combo控件右侧的图片和左侧输入域垂直方向没有对齐。
这让表单看起来极其难受。

效果如下：

今天在JavaEye中找到了解决办法，赶紧贴出来，希望对同样遇到这些问题的朋友有所帮助。

解决办法：

在Ext-all.css中找到如下内容：
.ext-ie .x-form-text {
margin-top:-1px;
margin-bottom:-1px;
height:22px;
line-height:18px;
}

然后替换 margin-bottom:-1px; 为 margin-bottom:0px;

Yemoo'S JS Blog 2008-01-02 15:31 发表评论

Ext-API详解--core/Ext.js

Yemoo'S JS Blog — Tue, 18 Dec 2007 15:43:00 GMT

1、Ext.apply(Object obj, Object config, Object defaults ) : Object
将config中的所有属性复制到obj中，如果配置了defaults，则先将defaults中的属性传入obj，然后再将config中属性传入，一般defaults用于定义一些默认值。
注意：每个参数都必须是对象object，而不能是function或其他。
创建object可以通过new function(){}、new Object()、{}等方法创建。

2、Ext.emptyFn: Function
用于返回一个空函数，便于在程序中创建空函数。Ext.emptyFn返回function(){}

3、Ext.applyIf(Object obj, Object config) : Object
功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过去。

4、Ext.addBehaviors( Object obj ) : void
为页面中一个或多个元素添加事件
元素使用css规则查找，其中元素与事件用@隔开

Ext.addBehaviors({
   //为id为foo的元素下的所有a元素添加click事件
   '#foo a@click' : function(e, t){
       // do something
   },
   // 为多个选择器添加相同的事件(mouseover)。在@之前使用逗号分开
   '#foo a, #bar span.some-class@mouseover' : function(){
       // do something
   }
});

5、Ext.id( [Mixed el], [String prefix] ) : String
返回一个唯一的id值。
如果只需要获取一个唯一的id值，则直接调用Ext.id()；
如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el)，el为元素Id、Dom对象或Ext的Element对象。
如果需要指定特定的前缀，则需要传入第二个参数，如Ext.id(el,”myPrix-”)，默认前缀为ext-gen，如默认返回id可能为ext-gen4，指定了前缀后可能返回myPrix-4。

6、Ext.extend( Object subclass, Object superclass, [Object overrides] ) : void
实现对象继承，目前还不太了解具体原理？？？

7、Ext.namespace( String namespace1, String namespace2, String etc ) : void
创建命名空间：
如Ext.namespace("Company","MyNS.mydata","Data.format.string")
然后可以创建如MyNS.mydata.doit=function(){…}的接口
注：命名空间的简易调用：Ext.ns()，在Ext Api中未给出此用法。

8、Ext.urlEncode( Object o ) : String
将一个json对象转换称url参数串，支持通过数组为一个参数设定多个值。
如将{a:1,b:2,c:[1,3,5,7]}转换为a=1&b=2&c=1&c=3&c=5&c=7

9、Ext.urlDecode( String string, [Boolean overwrite] ) : Object
将url参数串转换为json对象，overwrite如果为true，则后面的同名参数值覆盖前面的同名参数值（默认为false即不覆盖而以数组形式返回）。
如

Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
返回的对象内容为{a:1,b:2,c:[1,3,5,7]}
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7",true)
返回{a:1,b:2,c:7}

10、Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。
如果某项fn执行结果返回false（必须是false，undefined无效），遍历退出，后面的array项将不被遍历。
遍历过程中每次为fn传入参数分别为[当前数组项]，[当前索引]和[数组array]三个参数。
Scope用于设定fn函数中的this指针。
如

Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.length："+a.length)
});

将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4
index:2 value:5 array.length：4
index:3 value:7 array.length：4

Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.length："+a.length);
return v!=5; //到第三项后遍历退出
});

将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4
index:2 value:5 array.length：4

11、Ext.combine(arg1,arg2..argn) : Array    //该方法在Ext2不推荐再使用
用于实现对数组的合并，如果是字符串则作为只有一项的数组合并。
如

var a1=[1,3,5],b1=["a","b","c"];var c1="xxyznbde";
Ext.combine(a1,b1,c1) 返回[1,3,5,a,b,c,xxyznbde]

12、Ext. escapeRe( String str ) : String
将属于正则里的特殊字符进行转义。
如

Ext.escapeRe("(ab)$\sa342{}[dd]")将返回$ab$\$sa342\{\}\[dd\]。

13、Ext.callback(cb, scope, args, delay) :void //该方法为Ext的内部方法
调用一个函数或延迟调用一个函数。
Cb:调用的函数。
scope:cb中this指针。
args：传如cb的参数，以数组形式表示。
delay：延迟多少毫秒执行cb。
如

Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);将于1秒钟后弹出8，即3+5的结果。

14、Ext.getDom( Mixed el ) : HTMLElement
根据传入的id/dom节点/Ext的Elemenet对象，返回其dom对象。
如alert(Ext.getDom("a").innerHTML);或
alert(Ext.getDom(document.getElementById("a")).innerHTML);
将返回id为a的元素的innerHTML内容。

15、Ext.getDoc()/Ext.getBody() : Ext.Element
分别返回页面的document对象和body对象，返回值为Ext的Element对象，而非Dom对象。

16、Ext.getCmp( String id ) : Ext.Component
根据传入的html元素id返回该元素的组件类型，返回值为Ext的Component对象。
必须保证该id对象的元素是Ext的一个内部组件（通过Ext创建的组件），否则什么都不返回。

17、Ext.num( Mixed value, Number defaultValue ) : Number
验证value是否是一个数字，如果是则直接返回否则返回defaultValue。
如

alert(Ext.num(5,7))返回5，alert(Ext.num("5",7)) 返回7

18、Ext.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
销毁创建的Element或组件(Component)，即销毁其所有的事件监听，dom节点，并调用对象本身的destory方法（如果存在的话），传入的参数类型为Ext.Element或Ext. Component，可以一次性传入多个对象进行销毁。
如

Ext.destory(menu,el,Button);会销毁menu,el,Button三个对象。

19、Ext.removeNode(htmlElement el): void //Ext内部方法
删除指定的dom节点。传入参数为dom对象。
如

Ext.removeNode(document.getElementById("ab"));

20、Ext.type( Mixed object ) : String
返回传入的对象的类型。
包括如下类型：
string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
如

Ext.type("ab")返回string
Ext.type(20)返回number
Ext.type([3,5,6])返回array
Ext.type(/reg/)返回regexp
Ext.type(document.body)返回element。

21、Ext.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
检查一个值是否为null/undefined或是否是空，如果是则返回true。
如果传入allowBlank为true，则只检查是否为null或undefined。
如：

Ext.isEmpty("a")返回false，
Ext.isEmpty("")返回true，
Ext.isEmpty("",true)返回false，
Ext.isEmpty(null)返回true。

22、Ext.value(String v,String defaultValue[,[Boolean allowBlank]):String //Ext内部方法
检查v是否是为null/undefined或空，如果是则返回defaultValue，否则返回v。如果allowBlank参数为true，则允许v为空（即当v为空时不返回defaultValue而返回空）。
<

Yemoo'S JS Blog 2007-12-18 23:43 发表评论

几个Ext的学习站点

Yemoo'S JS Blog — Tue, 18 Dec 2007 14:39:00 GMT

最近在学习Ext，发现这个玩意虽然很强大，但是也太重量级了，没有几个月时间大概很难用好。自己直接学习Ext Api的过程中有不少的痛苦经历，进度也比较慢，经常看看别人的研究学习成果对于自己的学习还是很有帮助的，这里将几个不错的Ext学习站点收藏起来，便于以后自己参考学习。

JavaEye Ext交流区：http://www.javaeye.com/forums/tag/EXT
著名的技术社区JavaEye，这里Ext交流的人气在国内还算比较火热的。

blackant2的专栏：http://blog.csdn.net/blackant2/
该blog作者一直在对Ext的Api做翻译，当然也有很多对api的实例讲解，对于系统的学习很有帮助。

天晓得的专栏：http://blog.csdn.net/tianxiaode/
该blog作者主要以具体的实例讲解Ext的使用，便于将Ext的学习与具体应用相结合。

ext tutorial：http://203.93.254.59:8888/extdoc/html/index.html
国人写的Ext教程，作者语言幽默，有点head first的感觉，讲的还不错，但很多都要money才给看的。。

Yemoo'S JS Blog 2007-12-18 22:39 发表评论

一个基于mootools的日期控件

Yemoo'S JS Blog — Wed, 05 Dec 2007 09:42:00 GMT

http://www.cnitblog.com/Files/yemoo/gg1.js">
>该日期控件特性包括样式定制、多日期控件支持、配置灵活等特点，是一个不错的日期控件。该控件是基于Mootools框架构建，压缩版的js(calendar.js)大小仅14k。具体介绍和演示及下载请到官方站点查看。官方地址：http://www.electricprism.com/aeron/calendar/

Scal是一个基于Prototype框架的简单的js日期/日历控件。其基本用法简单，但提供很多详细的api，可以根据自己的需要配置成各种calendar。

支持如下浏览器：
Internet Explorer 6 & 7
Firefox
Safari
Opera

具有如下特点：
轻量级
容易使用
可以加入多个日期控件而不互相冲突
自动根据页面模式html/xhtml生成兼容代码
皮肤可定制
支持语言翻译
事件计划安排功能

如何使用？

1、首先包含如下js和css文件

在需要使用日期控件时，创建一个scal实例，传入显示日期控件的元素和显示当前选中日期信息的元素或者可以传入其它一些可选配置项。
如：

var samplecal = new scal('samplecal', 'scalupdate');

官方网址及详细示例和介绍：http://scal.fieldguidetoprogrammers.com/scal-v02-documentation

有兴趣的可以下载试用下。

Yemoo'S JS Blog 2007-11-28 11:40 发表评论

用于.NET和Mono的ajax开发套件--Gaia

Yemoo'S JS Blog — Thu, 22 Nov 2007 05:46:00 GMT

以前貌似有很多人问我关于.net下的ajax框架，可惜俺没有做过.net，不过今天发现了一个用于.net的似乎还不错的ajax框架--Gaia，相信做.net平台下ajax应用程序开发的朋友会有兴趣。

Gaia是一个用于构建.NET应用程序的Ajax综合框架库。支持27种控件/组件，类似.net语法的使用风格，完全兼容IE、FF、Opear级Safari浏览器。

详细介绍及使用请参见官方网站：http://ajaxwidgets.com/

Yemoo'S JS Blog 2007-11-22 13:46 发表评论

三个很不错的开源窗口类(window)组件

Yemoo'S JS Blog — Thu, 22 Nov 2007 05:45:00 GMT

1、MooTools Mocha UI（基于MooTools和Canvas构建）
网址：http://greghoustondesign.com/demos/mocha/
简介：
Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. See the windows to the right for more information。

2、ModalBox
网址：http://code.google.com/p/modalbox/
简介：
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogues or even wizards (sequences of dialogues) without using conventional popups and page reloads. It's inspired by Mac OS X modal dialogues. And yes, it may also be useful for showing bigger versions of images. :)

Basically, ModalBox is based on GrayBox technique by Amir Salihefendic. But you can find a lot of similar techniques around the web: Lightbox JS, Lightbox gone wild, ThickBox etc.

There also a clone of ModalBox, the MOOdalBox, written on great and lightweight Mootools Framework.

3、Windoo
网址：http://code.google.com/p/windoo/
简介：
Windoo is a javascript class based on Mootools framework which allows you to create draggable and resizable inline windows on your HTML page.

Windoo also includes the following standalone extensions:

Drag.Multi is Drag.Base extension which gives the ability to change multiple styles for multiple elements at the same time according to the mouse movement
Drag.Resize is Mootools extension which applies drag handles to an element to make it resizable in 8 directions

Features
resizable in 8 directions (fully customizable)
works on Firefox, Opera, Safari, and IE 6, 7
support custom and container element limits for resize
fully customizable Windoo themes
preserve aspect ratio option
multiple window managers
support iframe overlay for IE (fixes