`
qingBYqing
  • 浏览: 50491 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Extjs 入门小事例

阅读更多
一.准备工作
     1.下载类库:
         
        官网:http://www.sencha.com/products/extjs/
    
     2.类库基本说明:
 
        我下的版本是: ext-3.3.1.zip 
       
         解压后内部包过一下文件:
                  


     
 adapter: 提供Ext的底层库

       docs :  API 帮助文档

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

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

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

二.代码事例:
    
<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>


三.测试:

    效果自己看吧!
     
四.心得

          1. 基本理解了 ext 是干什么用的
       
          2.  在应用类库的时候 注意 路径问题

     3. 注意路径问题: 上面的事例 
                  我是把 helloWorld.html跟 类库放到同一级目录的


  • 大小: 11.4 KB
  • 大小: 8.4 KB
分享到:
评论

相关推荐

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS入门教程(超级详细).pdf

    ExtJS入门教程(超级详细).pdf

    extjs4Mvc事例

    这个"extjs4Mvc"事例提供了关于如何在ExtJS 4中有效地利用MVC(Model-View-Controller)设计模式的详细教程。MVC模式是软件工程中常用的设计模式,它有助于保持代码的组织性和可维护性。 在ExtJS 4中,MVC架构被...

    extjs入门到精通

    extjs入门到精通,实例有简单到复杂,还有综合实力,下载即可运行,环境也是配好的,希望对你有帮助!

    ExtJs入门实例.doc

    《ExtJs入门实例详解》 ExtJs是一款强大的JavaScript前端框架,用于构建富客户端应用。它以其丰富的组件库、强大的数据绑定机制以及优雅的MVC设计模式而闻名。本文将围绕ExtJs2.0入门实例,重点讲解Ext.MessageBox...

    ExtJS入门教程(超级详细)

    在ExtJS入门教程中,首先需要掌握的是如何获取ExtJS库文件。用户可以通过ExtJS官方网站提供的下载链接获取到最新的ExtJS库文件,下载的文件是一个压缩包,解压后可以看到包含的文件和目录。其中主要的文件包括...

    ExtJs入门 ExtJs很好的电子书 ExtJS入门.pdf 入门ExtJs必备电子书

    ### ExtJs 入门知识点详解 #### 一、ExtJs简介与核心概念 - **ExtJs**是一款基于JavaScript的企业级富客户端应用开发框架,它提供了一系列丰富的UI组件和功能强大的工具,使得开发者能够轻松地创建出高质量的Web...

    EXTJS入门教程(非常详细)

    在EXTJS入门教程中,我们将会了解到EXTJS的核心概念、组件的介绍与应用以及如何获取多个DOM节点并响应事件。 首先,EXTJS的核心是Ext,它提供了一系列的功能,比如获取多个DOM节点,响应事件等。在EXTJS中,DOM节点...

    extjs入门之组件学习

    extjs入门学习,各个组件的使用,包括Observable、Observable、BoxComponent、Container、Panel、Viewport及Window...

    extjs入门之helloword

    这篇博客“extjs入门之hello world”应该是引导初学者了解并开始使用ExtJS的基本步骤。由于描述部分是空的,我们将主要依据标题和标签来探讨相关知识点。 首先,让我们来看看“源码”这个标签。在学习任何编程技术...

    ExtJS入门教程.pdf

    ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心

    ExtJs入门实例(内含N个实例源码)

    ExtJS入门实例、包含各种详细代码,非常适合初学者学习

    extjs入门教程介绍,GRID,json介绍

    extjs入门教程 extjs入门教程介绍,GRID,json介绍

    Extjs入门实例chm版

    Extjs入门实例chm版,非常好的Extjs学习资料

    extjs 入门 ppt

    ExtJs入门.ppt ExtJs入门.ppt 大家学习学习

    ExtJS快速入门指南

    javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用系统 的 开源 AJAX 应用框架 使用的开源协 议是 GPL ExtJS 是一个用 javascript 写...

    extjs入门概念简介

    extjs入门简介,讲解基础的概念和架构图。供新手快速入门

Global site tag (gtag.js) - Google Analytics