EXT初探

ext最新的版本已经收费了，不过对我来说没什么影响。一直都用jq，都说ext好用，但是自己一直没有学习过，就从现在开始准备学习学习。

闲话不扯。开搞！这里我用ext2.0。

首先，需要的库文件有两个,ext-all.js和ext-base.js。以及css文件ext-all.css。images文件夹中的问题。

弹出框来测试一下：

<script type="text/javascript">

　　Ext.onReady(function(){

　　Ext.MessageBox.alert("Message","Hello World!");

　　});

</script>

再来创建一个窗口。

Ext.onReady(function(){

var win=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,我是可以拖拽的哦！</h1>'}); 

win.show();

});

哈哈，看出来了吧。这个Ext后面跟的就是那个控件的名字。

面板-Panel:

var obj={title:"hello",width:300,height:200,html:"Hello,我是面板英文名字叫Panel"};

var panel=new Ext.Panel(obj);

panel.render("hello");

这里需要一点html了，render方法，是作用到了一个叫hello的div上面。当然span,a,甚至h1标签也可以。

上面的程序一句话搞定：new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,我是面板英文名字叫Panel</h1>'});

很好很强大!~@;

嵌套面板tabPanel：

var panel=new Ext.TabPanel({
width:300,
height:200,
items:[
{
title:"面板1",
height:30,
},
{
title:"面板2",
height:30,
},
{
title:"面板3",
height:30,
}
]

});

这里要注意子面板并没有用new Panel("")方法来实现。这样做会延迟加载。如果添加上此方法来创建则在程序一开始就创建了。

事件：

方法a:

function a(){

　　　alert("哈哈");

}

按钮btnAlert：

<input id="btnAlert" type="button" value="Button" />

绑定：

click事件触发则调用a

 Ext.get("btnAlert").addListener("click",a);
 Ext.get("btnAlert").on("click",a);
//以上两种写法都一样
Ext.get("btnAlert").on("click",a,this,{delay:1000});
//最后一个是延时了，呵呵

看一个关闭状态的回调函数：

var win=new Ext.Window({title:"不能关闭",width:300,height:200,html:'<h1>Hello,来关我啊！</h1>'});
win.on("beforedestroy",function(obj){
alert("想关闭我，不可能的");
obj.show();
return false;
});
win.show();

这里给beforedestroy状态，添加了事件。

 

var win=new Ext.Window({

　　title:"不能关闭",

　　width:300,

　　height:200,

　　html:'<h1>Hello,easyjfopensource</h1>',

　　listeners:{"beforedestroy":function(obj){

　　　　  alert("想关闭我，不可能的");

　　 　　 obj.show();
 　　 　 return false;
 　　} 
　　}
　　);
 win.show();

 也可以用上面这种不用on直接在创建的时候添加listeners配置即可。