1、首先下载ExtJs库文件,要应用ExtJs则在页面要引入一下三个文件:
<link rel="stylesheet" type="text/css" href="../ext-4.1.0-beta-3/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.1.0-beta-3/ext.js"></script>
<script type="text/javascript" src="../ext-4.1.0-beta-3/ext-all.js"></script>
2、在ExtJs库文件及页面加载完后,ExtJs会执行onReady中的指定函数,因此,一般情况下,ExtJs应用都从onReady开始的。
一个简单的HelloWorld弹出框例子:主要用到Ext.MessageBox.alert()函数;
<link rel="stylesheet" type="text/css" href="../ext-4.1.0-beta-3/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.1.0-beta-3/ext.js"></script>
<script type="text/javascript" src="../ext-4.1.0-beta-3/ext-all.js"></script>
<script>
Ext.onReady(function(){
Ext.MessageBox.alert("Ext","HelloWord!");
});
</script>
接下来显示一个窗口例子:主要用到Ext.Window()函数,函数里面可以定义窗口的属性
<link rel="stylesheet" type="text/css" href="../ext-4.1.0-beta-3/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-4.1.0-beta-3/ext.js"></script>
<script type="text/javascript" src="../ext-4.1.0-beta-3/ext-all.js"></script>
<script>
Ext.onReady(function(){
var win = new Ext.Window({
title:"hello",
width:300,
height:200,
html:"<h1>Hello Word !</h1>"
});
win.show();
});
</script>
面板的显示例子:主要用到Ext.Panel()函数
<script>
//randerTo:指定的元素的id,一个DOM元素或一个现有的元素,此组件将被渲染成
Ext.onReady(function(){
var myPanel = new Ext.Panel({
renderTo : Ext.getBody(),
title : 'test面板',
width : 400,
height : 300,
html : 'Hello ,This is my Panel !'
});
});
</script>
或者也可以写成下面的:
Ext.onReady(function(){
var obj = {title:"test面板",width:"400",heigth:"300",html:"Hello, This is my Panel !"};
var myPanel = new Ext.Panel(obj);
myPanel.render("hello"); //render:指向id为hello的元素
});
如果这样写的话要在body元素里定义一个id为“hello”的div元素,不过这样在obj里定义的宽和高都失效了,即以id为hello的元素为准。