Extjs 入门小事例

最新推荐文章于 2024-10-14 16:05:05 发布

chsea

最新推荐文章于 2024-10-14 16:05:05 发布

阅读量362

点赞数

文章标签： extjs function ext stylesheet html 文档

http://qingbyqing.iteye.com/blog/1002815

Extjs 入门小事例

一.准备工作

1.下载类库：

官网： http://www.sencha.com/products/extjs/

2.类库基本说明：

下的版本是： ext-3.3.1.zip

解压后内部包过一下文件：

Java代码

adapter: 提供Ext的底层库
docs : API 帮助文档
exmaples: 提供使用Extjs的小事例
resoures: Ext UI资源文件目录比如图片，CSS等等
source : 无压缩Ext 全部的源码
ext-all.js ：压缩后的Ext 全部源码
ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。

 adapter: 提供Ext的底层库

       docs :  API 帮助文档

       exmaples: 提供使用Extjs的小事例
     
       resoures: Ext UI资源文件目录 比如 图片 ，CSS等等

       source :  无压缩Ext 全部的源码
     
       ext-all.js ：压缩后的Ext 全部源码

       ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。

二.代码事例：

Html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Ext hello World</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<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" src="/ext/src/localeext-lang-zh_CN.js"></script>
<script >
function fn(){
alert("我要开始学习EXTjs了");
}
//ext 第一种方式的调用
Ext.onReady(fn);
//ext 第二种方式调用
Ext.onReady(function(){
alert("我这样也可以哦");
});
//ext 中的消息框！
Ext.onReady(function(){
Ext.MessageBox.alert("消息盒子"," 你看我是不是很漂亮呢");
});
//ext 中的窗口
Ext.onReady(function(){
var win=new Ext.Window(
{
title:" 我的第一个小窗口！",
width: 200,
height: 400,
html:'<h1>你看我这个ext小窗口怎么样啊，是不是可以啊！</h1>'
}
);
win.show();
});
</script>
</head>
<body >
<h1>Ext hello world</h1>
</body>
</html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    
    <title>Ext hello World</title>
     
    <!-- 引入 ext 文件样式-->
        
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>

     <!-- 引入 extjs  基础库-->
     
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
   
      <!-- 引入 extjs 核心库-->

     <script type="text/javascript" src="ext/ext-all.js"></script>

       <!-- 引入 Extjs 汉化-->
    <script type="text/javascript" src="/ext/src/localeext-lang-zh_CN.js"></script>
        
    <!-- Extjs hello world  examples -->
 
    <script >
    
      function fn(){
      
         alert("我要开始学习EXTjs了");
         
      }
          
      //ext 第一种方式的调用
      
    Ext.onReady(fn);
    
    
    //ext 第二种方式调用
    
    Ext.onReady(function(){
    
      alert("我这样也可以哦");
    
    });
    
    //ext 中的消息框！
    
    Ext.onReady(function(){
     
       Ext.MessageBox.alert("消息盒子"," 你看我是不是很漂亮呢");   
    
    });
    
    //ext 中的窗口
    
    Ext.onReady(function(){
    
         var win=new Ext.Window(
         {
          title:" 我的第一个小窗口！",
          width: 200,
          height: 400,
          html:'<h1>你看我这个ext小窗口怎么样啊，是不是可以啊！</h1>'
         }        
         );
  
            win.show();    
    });
       
    </script>   
</head>
<body >
<h1>Ext hello world</h1>
</body>
</html>