zoukankan      html  css  js  c++  java
  • ExtJS学习笔记:初识

    Ext JS通常简称为EXT,它是一个非常优秀的Ajax框架,用JavaScript编写,与后台技术无关,可以用来开发具有炫丽外观的富客户端应用。

    用途:对于企业应用系统,尤其是MIS(Management Information System管理信息系统)类型的系统,EXT非常适用。

    对于一些没有美术功底的程序员来说,EXT为我们解决了一大难题,因为它天生拥有炫丽的外表。同时,有很多用其他技术无法实现或极难实现的功能,却能用EXT轻易实现,比如EXT中的表格、树形、布局等控件能为我们的日常开发工作节约大量的时间和精力。

    1、目录结构(不同版本稍有不同,鉴于主要学3版本,所以对版本4未做了解):

    1)ext-3.4.0

    clip_image001

    2)ext-2.3.0

    clip_image002

    2、ext使用所必须的文件

    必要的最小集合是:ext-all.js,adapter/ext-base.js,src(build)/local/ext-lang-zh_CN.js(语言包)和整个resources目录(主要样式引用:resources/css/ext-all.css)。

    简要说明:

    ext-all.js,adapter/ext-base.js 包含了ext的所有功能和所有的js脚本代码;

    src(build)/local/ext-lang-zh_CN.js 是正文语言包,ext可以提供多种语言支持,在local文件夹下;

    resources目录是所有css样式和图片;

    在项目中引用时只需引用如下:(注意js的引用顺序(跟定义顺序有关))

    <link rel="stylesheet" type="text/css" href="${放置ext的目录}/resources/css/ext-al.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/locale/ext-lang-zh_CN.js"></script>

    3、Hello World代码

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <title>Hello World Test of ExtJS</title>
    
    <meta charset="UTF-8" />
    
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    
    <script type="text/javascript" src="../ext-all.js"></script>
    
    <script type="text/javascript" src="../src/locale/ext-lang-zh_CN.js"></script>
    
    <script>
    
                            Ext.onReady(function(){
    
                                    Ext.MessageBox.alert("Hello World!","Hello World.");
    
                            });
    
    </script>
    
    </head>
    
    <body></body>
    
    </html>

    效果:

    clip_image003

    4、辅助开发工具:(参见:ExtJS 开发调试工具大全:http://extjs.org.cn/node/323/)

    1)开发利器Spket

    2)FireBug调试工具

  • 相关阅读:
    读书笔记:《HTML5开发手册》-- 现存元素的变化
    关于微信小程序,一些想法
    HTML5--details活学活用
    读书笔记:《HTML5开发手册》--figure、time、details、mark
    读书笔记:《HTML5开发手册》--HTML5新的结构元素
    微信小程序开源项目库汇总
    Debian安装fail2ban来防止扫描
    Debian更新软件源提示There is no public key available for the following key IDs的解决方法
    JavaBugCharSequence
    分析 《7吨碳九泄漏,40万泉港人在无声中消逝》虚假报道
  • 原文地址:https://www.cnblogs.com/yevon/p/2941851.html
Copyright © 2011-2022 走看看