ExtJs学习（一）

来源：互联网发布：淘宝订单怎么拆单发货编辑：程序博客网时间：2024/06/03 12:14

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