学步园

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的元素为准。