ExtJs 学习笔记 一 初体验

<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.2/ext-all-debug.js"></script>

<div id="hello"> </div>
<div id="word"> </div>
<input id="btnAlert" type="button" value="alert框" />

function a(){
alert("a")
}

Ext.onReady(function(){
//创建对话框
Ext.MessageBox.alert("hello","Hello,easyjf open source");

//创建窗口
var win = new Ext.Window({
title:"hello",
width:300,
height:200,
html:'<h1>Hello,easyjf open source</h1>'
});
win.show();

//创建面板
var panel = new Ext.Panel({
renderTo:"hello",//放到哪里    放到 div的id hello
title:"hello",
width:300,
height:200,
html:'Hello,easyjf open source'
});
//panel.render("hello"); 放到 div的id hello  可以用属性 renderTo来制定

//创建多页选项卡页面
new Ext.TabPanel({
renderTo:"word",
width:300,
height:200,
activeTab:0,//默认选中的选项卡页面
items:[
{
title:"面板1",
html:"11111",
height:30
},{
title:"面板2",
html:"22222",
height:30
},{
title:"面板3",
html:"3333" ,
height:30
}
]
});

//创建按钮
new Ext.Button({
renderTo:"word",
text:"添加",
pressed:true,
height:30,
handler:Ext.emptyFn()
});

//为按钮添加事件
//Ext.get("btnAlert").addListener("click",a);
//Ext.get("btnAlert").on("click",a);
Ext.get("btnAlert").on("click",a,this,{delay:1000}); //事件延迟处理

//beforedestroy 事件 如果事 件响应函数返回 false，则会取消组件的销毁操作
var win = new Ext.Window({title:"不能关闭的窗口",height:200,width:300});
win.on("beforedestroy",function(obj){
alert("想关闭我，这是不可能的!");
obj.show();
return false;
});
win.show();