ExtJs 常用技巧

一些常用的动画函数

//元素从上滑入效果,可不带参数调用下同
element.slideIn(String ancho,Object animation);
element.slideOut("t",//指定方向  "t"=top,"b"=buttom,"l"=left,"r"=right
                     {
                        easing: 'easeOut',//动画方式
                        duration: .5,//持续时间
                        remove: false,/*false -不从DOM中删除,默认是设置该元素隐藏(visibility = 'hidden') ,ture - 从DOM中删除该元*/
                        Display: true//还不太清楚可能是 是否显示该元素所占位置
                      })//滑出效果
element.hide()//隐藏
element.highlight()//高亮显示
element.frame(color,number,animation)//边框扩散效果(类似涟漪)参数分别为 边框颜色 , 次数,动画

有兴趣还可以试一下MessageBox的动画效果

        var a = new Ext.Element("id");
        Ext.MessageBox.show({
            title : a.dom.tagName,//massagebox标题
            msg : a.dom.innerHTML,//信息内容
            buttons : Ext.MessageBox.OK,//按钮组合
            icon : Ext.MessageBox.INFO,//图标
            animEl : a//消息框从元素a弹出
        });

表单技巧

Q:如何使表单不使用AJAX方式提交?
A:给form加上以下配置

onSubmit: Ext.emptyFn,
        submit:function() {
            this.getForm().getEl().dom.action = this.url;
            this.getForm().getEl().dom.submit();
            },

因为EXTJS的BUTTON就算指定了TYPE为SUBMIT也不能提交,所以,对于需要提交的按钮,要加上事件处理函数:

handler:function(){
                form1.submit();            
            }

这样,表单就会以普通方式提交了.
Q:如何为表单加上Reset重置按钮?
A:虽然你可以将BUTTON的TYPE改为RESET,但是,实际上,还是要你自己处理复位.下面的代码可以复位表单

handler:function() {
                form1.form.reset();
            }

注意,要把这里的form1改为你的formpanel名称,这里很变态的一点就是,对于submit按钮,我们可以用form1.submit(),但是reset按钮,竟然无法用form1,reset,竟然要用form1.form.reset(),太不可思议了
Q:如何在表单提交前进行统一验证?
A:这个问题,我也曾苦恼过,查了EXTJS的FORUM才解决
首先,要将提交按钮和FORM绑定,在BUTTON配置中加以下内容:
formBind:true,
然后,在FORM中要加以下配置:
monitorValid:true,
这样,提交按钮就与表单的验证绑在一起了,只有全部验证通过时,表单提交按钮才是enable的,否则,该按钮不可以点击
虽然解决了问题,但是,却不是很灵活,希望下一版能改进吧.
Q:为何传给GRID的XML数据显示不出来?
A:Grid的XML数据,除了必须是普通的XML文件外,还有一个潜在的解析要求,那就是至少要有根节点,表节点和记录节点这三级
否则,将显示不出数据,但不会报错
Q:为何动态传递ASP生成的XML数据给GRID却显示不出来?
A:普通XML作为GRID数据能显示,而ASP生成的却不行,原因是ASP生成的XML在生成时没有指明Content-Type,只要在代码开始加上:Response.contentType="text/xml"即可