• JsExt入门


    1. Ext发布包

    Ext是一款富客户端开发框架,它基于JavaScript、HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。可以从 http://www.sencha.com/products/extjs/ 免费获得Ext发布包,其中源代码、API文档和示例一应俱全。

    2. Ext发布包目录说明 

    adapter:该目录下是Ext的核心代码和底层库,包括jQuery、Prototype和YUI的适配器。

    docs:该目录下是Ext的文档,最主要和最重要的是Ext的API,开发中离不开它。

    examples:该目录下是官方的演示示例,是入门的最佳途径之一。

    pkgs:该目录下是Ext压缩后的代码,经过压缩的代码,体积更小,加载更快。

    resources:该目录下是Ext要用到的图片文件和样式文件,Ext的外观全部由这个目录中的文件控制。

    src:该目录下是Ext的源码文件,也就是相对pkgs目录而言,未经过压缩的代码。

    ext-all.js:是Ext的核心库,是必须引入的。

    ext-all-debug.js:是ext-all.js的调试版,在调试时使用这个调试版本的文件才能正确定位出现错误的位置。

    INCLUDE_ORDER.txt:用来说明在页面上引用底层库的JavaScript文件的顺序。

    LICENSE.txt:是Ext的使用许可文件。

    3. 在项目中使用EXt

    如果想把Ext应用到项目中,那么需要自己整理一下,因为发布包里的内容并非都是必须的,比如文档、示例和源代码。 必须内容至少应包括: 

    <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/locale/ext-lang-zh_CN.js"></script>

    注:(1)ext-all.js和ext-base.js已经包含了Ext的所有功能,所有的js脚本都在这里。

      (2)ext-lang-zh_CN.js是简体中文国际化资源文件。

      (3)resources目录下是CSS样式表和图片。

    4. 为什么页面提示“找不到图片”

    Ext里经常用一张空白图片作为占位符号,然后用CSS里配置的背景图片显示,这样有利于更换主题。这张空白图片的名字就是Ext.BLANK_IMAGE_URL,默认情况下它的值是BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif "。图片虽然很小,但是也需要从网上下载,一旦下载失败,就会显示找不到图片。 在examples目录下的示例,每个示例都引用了../shared/examples.js,在这个examples.js的第一行就已经设置了 Ext.BLANK_IMAGE_URL='http://www.cnblogs.com/resources/images/default/s.gif'。所以,要解决自己写的代码找不到图片的问题,只需要参照examples.js中的方法,修改自己项目中的s.gif的本地路径即可。

    5. 辅助开发

    调试工具:Firebug

  • 相关阅读:
    webpack打包(2)
    webpack打包(1)
    angular(5自定义模块和ionic创建)
    angular(4)路由及其使用
    anjular(3 生命函数及请求)
    Angular(2)
    自学Angular(1)
    Typescript知识总结
    PLC数据采集与MES系统对接
    python格式化日期时间自动补0
  • 原文地址:https://www.cnblogs.com/prettymdx/p/2859852.html
Copyright © 2020-2023  润新知