最近刚刚接触到extjs这个js库,发现自己已经深深的喜欢上了这个ajax的框架,似有一种相识恨晚的感觉,所以决定从现在起,开始自己对extjs的学习,以后会把自己平时在学习过程中写的一些小的案例的代码贴到这里,有对extjs感兴趣而且也像是我这样刚开始接触extjs的朋友,我相信在这里也许你会有所收获!
首先开始的是对Ext.Window的学习,代码如下,附加注释~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" href="Ext/resources/css/ext-all.css" rel="stylesheet" />
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function()
{
var win=new Ext.Window({
title:"第一个Ext.Window程序",
width:300,
height:200,
closable:true, //右上角显示“X”关闭按钮,默认为true
modal:false, //为模式窗口,后面的内容都不能操作,默认为false
plain:false, //true则主体背景透明,false则主体有小差别的背景色,默认为false
//html:"<a href=/"Index.html/">点了跳转</a>"
items:new Ext.TabPanel({
activeTab:0,
border:false,
items:[{title:"tab1",html:"This is tab1"},{title:"tab2",html:"This is tab2"},{title:"tab3",html:"This is tab3"}]
}),
buttons:[{text:"确定",handler:function(){Ext.Msg.alert("提示框","<a href=/"#/">点击这里跳转</a>");}},{text:"取消",handler:function(){win.close();}}],//这里所实现的效果你可以通过自己的操作得知
buttonAlign:"center"//设置按钮在panel中的位置,如left , right, center
});
win.show();
})
</script>
</head>
<body>
</body>
</html>