关闭

Ext JS从零开始之二

标签: Ext JSCmdSencha
220人阅读 评论(0) 收藏 举报
分类:

原文地址:https://www.sencha.com/blog/ext-js-from-scratch-part-2/

欢迎来到Ext从零开始博客系列之二。在第一篇博客中,已经从零开始创建了一个应用程序看起来像什么且希望它做什么的的可工作的应用程序,现在,从HTML和CSS角度来审视一下它是如何构建的。

应用程序的源代码可以在这里找到:https://github.com/mgusmano/ExtJSFromScratch/tree/master/Part02/01

要注意的是,在该应用程序中,index.html文件使用了硬编码来指定js和css文件(第5到7行)。

    <!DOCTYPE HTML>
     <html>
       <head>
         <title>Ext JS From Scratch - Part 1, Demo 4</title>
         <link href='theme.css' rel='stylesheet'/>
         <script src='Ext-lite.js'></script>
         <script src='app.js'></script>
       </head>
       <body></body>
     </html>

在创建的应用程序中,这些文件会随着时间的推移不断被添加而发生改变。这些文件将会添加新的功能,例如,添加新的视图。此外,这些文件会随着开发到发布,发布到测试等不同阶段而发生改变,因而,需要一些必要手段来管理这些文件。

在Ext JS,文件管理是通过微加载和Sencha Cmd来实现的。使用Sencha Cmd创建的应用程序的index.html文件是不包含这些文件的,代之以的是使用微加载来下载他们。一个典型的,使用Sencha Cmd创建的Index.html文件包含以下代码:

    <!DOCTYPE HTML>
    <html manifest="">
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
      <title>FromScratch</title>
      <!-- The line below must be kept intact for Sencha Cmd to build your application -->
      <script id="microloader" data-app="41afb480-65e8-43c8-9cda-6b7659d5a865" type="text/javascript" src="bootstrap.js"></script>
    </head>
    <body></body>
    </html>

微加载一直很神秘:它是做什么的?它生成哪些文件?何时需要重新生成文件?重新生成了什么文件?好的,就从这个典型的Ext JS从零开始吧,来创建我们自己的微加载!

正如所提到的,使用Sencha Cmd创建的Ext JS应用程序在index.html中只包含1个文件——微加载,以下是它的代码:

    <script id="microloader" data-app="41afb480-65e8-43c8-9cda-6b7659d5a865" type="text/javascript" src="bootstrap.js"></script>

这个单一文件bootstrap.js,就是引导加载文件,或者被称为微加载文件。要注意的是,该文件与用来实现html布局的Bootstrap库没有任何关系。在未来的文章,会讲述如何修改该文件的名称以避免混淆,如microloader.js。在本博文,将使用bootsimple.js作为名称。

同样需要注意的是,微加载做了许多事情,在未来的文章中将会讲述,而现在,暂时只讨论它的文件加载功能。

微加载会从一个清单文件(manifest file)中读取所需的文件,默认是读取bootstrap.json文件。Sencha Cmd会向bootstrap.js文件添加诸如项目所需文件、修改过的主题等等内容。

在更高的层面,微加载会实现以下应用程序所需的功能:

  • 定义全局的Ext变量
  • 读取清单文件(bootstrap.json)
  • 等待氢弹文件读取完成
  • 为js和css文件生成DOM元素
  • 添加css文件的DOM元素到head标记
  • 添加第一个js文件DOM元素到head标记(Ext框架文件)
  • 等级框架文件加载完成
  • 将剩余的js文件的DOM元素添加到head标记
  • 当所有文件加载完成,触发app.js的launch事件

现在,来看看简化版的微加载,正如上面所提到的,将该文件命名为了bootsimple.js,并包含在了index.html文件中。以上处理的每一步都会通过console.log来显示,这样就可以很简单的看到微加载的过程了:https://github.com/mgusmano/ExtJSFromScratch/tree/master/Part02/02

微加载过程

在Ext JS,是使用Sencha Cmd工具来管理浏览器的加载文件,这个是一个免费工具,且正如你所看到的,它还可以用来构建一个初始应用程序,而且在整个应用程序的开发过程中都会使用到它。如果不使用Sencha Cmd,那就会在项目构建或其他许多方法失去最佳实践的体验。

Sencha Cmd可以在这里下载: https://www.sencha.com/products/extjs/cmd-download/

下面,使用Sencha Cmd来创建一个应用程序。为了构建初始应用程序,需要在终端窗口运行以下命令。在命令中,需要根据自身情况修改Ext JS框架的文件位置。

sencha -sdk <framework folder> generate app -modern -r -starter=false FromScratch ./03

在查看创建的应用程序文件夹内,会看到一些熟悉的文件:bootstrap.js和bootstrap.json(或bootstrap.jsonp,用于某些跨域情况)。这个几个文件是由Sencha Cmd生成的,在未来的文章还将谈论workspace.json、build.xml、bootstrap.css、app.json、ext文件夹和app文件夹。

在当前,只展示了微加载的一小部分功能,如从Sencha Cmd创建的清单文件中动态加载文件。在下一篇文章,将完成的展示如何在整个开发过程中使用Sencha Cmd。以下是使用微加载和Sencha Cmd来构建Ext JS应用程序的其他好处:

缓存文件
禁用或启用缓存
同步或异步加载
Url的规范化(创建规范的url)
处理跨域问题
设置平台标记
为Ext JS 6通用应用程序调用Ext.BeforeLoad
处理IE的各种问题

Sencha还可以用来创建自己的应用程序起始模版。在下一篇文章中将会谈论这个——敬请关注!

作者:Marc Gusmano

Marc is a Sales Engineer with Sencha and has more than 30 years of experience in the software services industry. He has been extensively involved with custom HTML5 browser and mobile development projects, using his experience to build HTML5 Single Page Applications. Marc has worked for several large software services companies, including Andersen Consulting and Hitachi Consulting, and he was co-owner of a software services and training company for more than 10 years. Marc has a passion for building outstanding software, especially leading-edge, user-centric applications.

0
0
查看评论

Ext JS多语言

国际化和本地化 对Ext JS的国际化和本地化做了些研究,有了些体会和总结,在此备忘. 首先将官方博客关于国际化和本地化的内容进行翻译,因为这篇文章很好的告诉我们该如何用Ext JS实现国际化和本地化,然后是根据自身项目的特点总结出一套自己的方案 官方博客翻译 原文地址:htt...
  • hunhun1122
  • hunhun1122
  • 2017-04-13 08:53
  • 784

网站搭建从零开始(一)域名

我是前段时间开始接触网站搭建的,目前也是新手,但是这几天从对网站完全不了解,到自己搭建一个比较完整的网站,算是学了不少知识。所以现在总结一下,希望对同样想建站但又不知如何下手的人有所帮助。 搭建一个网站,除了网站的建设,我们主要还需要两个条
  • jzj1993
  • jzj1993
  • 2014-10-15 23:29
  • 1541

[Ext JS 4] 动态加载

一次性加载完所有的js 文件, 对于比较大型的项目来说,效率较为低下。可能只是一个简单的首页, 也要几秒甚至十几秒才能出得来。 是否可以在需要的时候才进行加载? 动态加载, 是Ext JS 4 中新增的特性。 总结一下, 可以通过 1. Ext require 动态加载 2. sench...
  • oscar999
  • oscar999
  • 2014-01-21 12:05
  • 7311

CDH安装oozie页面缺少Ext JS library

通过Oozie Web UI访问oozie 页面报错: Oozie web console is disabled. To enable Oozie web console install the Ext JS library. Refer to Oozie Quick ...
  • englishsname
  • englishsname
  • 2015-10-23 09:18
  • 1248

Ext Js3.2 折线图应用

1:源代码   <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":...
  • woshisap
  • woshisap
  • 2011-11-15 11:30
  • 6178

Ext JS模拟Windows桌面 (项目搭建)

在Ext JS的目录下包含了相关的例子,Ext JS_HOME/examples/desktop目录下可以找打相关的示例。 (1)把整个desktop文件夹拷贝到主目录下 (2)在主目录下创建一个文件夹script,把Ext JS目录里的下述文件复制到script文件夹中 ...
  • hechurui
  • hechurui
  • 2015-09-10 14:24
  • 605

【翻译】Ext JS 4.2介绍

原文:Introducing Ext JS 4.2Ext JS 4.2包含了许多令人兴奋的增强功能和特性。你可能已经在之前的文章中阅读过相关的一些功能和特性了,如Grid组件改进。在这篇文章中,将介绍新的海王星主题和从右到左(RTL)的支持。海王星在Ext JS 4.2中,我们很高兴的欢迎海王星作为...
  • tianxiaode
  • tianxiaode
  • 2013-04-18 05:05
  • 7057

Ext JS 与jQuery和Bootstrap 的区别

Ext JS 主要做Web Application场景为主 也就是网站的后台的管理系统 因为提供了很多现成的模版 所以在网站后台开发 具有很快的开发效率 Bootstrap以及jQuery主要以Web Site场景为主 也就是网站的页面展示层 能够提供很多艳丽的效果
  • majishushu
  • majishushu
  • 2016-09-11 16:37
  • 2970

Ext Js -- 多选下拉框

今天客户需要做一个多选下拉列表,当然就需要扩展组建,网上收了下,果然好多,转载一篇[http://blog.sina.com.cn/s/blog_5140a6a50100bfao.html],简要记录。 一. 自定义组建组建 Ext.form.MultiSelect,新建MultiSele...
  • xiaocha2008
  • xiaocha2008
  • 2011-11-08 21:30
  • 11713

Ext JS - renderer函数中各参数含义

renderer: function(value, metaData, record, rowIndex, columnIndex, store){ // 函数中各个参数的含义 } -------------------------------------------------------...
  • zhoukexecute
  • zhoukexecute
  • 2016-09-13 09:52
  • 517
    个人资料
    • 访问:1593209次
    • 积分:18015
    • 等级:
    • 排名:第623名
    • 原创:164篇
    • 转载:28篇
    • 译文:102篇
    • 评论:2193条
    交流QQ群
    391747779
    193238033
    博客专栏
    《Ext JS 6.2实战》
    《Ext JS权威指南》
    《Sencha Touch实战》
    《Ext JS 4.2 实战》
    文章分类
    最新评论