Ext JS工程目录机构介绍

最新推荐文章于 2019-01-07 23:44:00 发布

wangchunbo007

最新推荐文章于 2019-01-07 23:44:00 发布

阅读量1.2k

点赞数

分类专栏： ExtJS-Tutorial翻译文章标签： Ext

ExtJS-Tutorial翻译专栏收录该内容

16 篇文章 1 订阅

订阅专栏

原文详见（本文有删改）：http://www.extjs-tutorial.com/extjs/extjs-application-structure

在上一小节里，我们使用Sencha Cmd创建了第一个Ext JS的应用......每个Ext JS应用都遵循着相似的结构，让我们来简单的看一下这些文件夹和文件的意义：

文件夹部分

app

囊括了应用程序中所有的的自定义的文件。还有model, store and view这三个文件夹，其中的view可以建子文件夹存放相应的views。view包含的MainController.js和MainModel.js，分别代表了ViewController(控制器)和 ViewModel(视图模型)。真实的views实际上会被编译到classic和modern这两个文件夹中。Application.js这个文件里还存有全局设定，比如项目名称、公共的stores和models等。所有的Ext JS应用程序的开始都经过这样的步骤1.实例化Application类 2.通过app.js启动 3.测试实例。

build

当你通过sencha app build这个命令构建应用程序的时候，这个文件夹则会包含markup page、JavaScript代码和themes这三样东西。

classic

Ext JS存在两种不一样的工具包(toolkit): classic(对应PC端)和modern(对应移动端)，classic文件夹里包含了为两种终端呈现的所有视图。红框里面的文件结构相似，app -> view -> main里面的ViewController和ViewModel也会被共享。

ext

SDK文件夹。Ext JS 6框架所有的必要文件。

modern

和上面说的classic文件夹类似，移动端用。

overrides

所有Ext默认动作(overridden default behaviour)的重写在这里。这个文件夹里创建一个新的类来重写原有的Ajax机能时，Sencha Cmd就会自动编译。

packages

所有的本地的和第三方的开源包。

resources

资源类文件。例如项目中的自定义图片、css等。

sass

Ext JS通过使用sass文件夹来创建主题(themes files)。

文件部分

app.js

app.js是Ext JS应用程序的网关。由它创建并启动app.js中Application.js的一个实例。它也可用于使用mainView配置指定容器类，以便我们可以将任何类用作Viewport。

app.json

Ext Js使用Microloader来加载app.json中所描述的资源。取代了index.html的职能。 Sencha Cmd使用app.json来构建应用程序。通过app.json的方式，将应用程序的所有元数据(meta-data)归纳于同一个位置。

bootstrap.css、bootstrap.js 和 bootstrap.json

Ext JS支持使用requires的方式来管理各种依赖关系，bootstrap里面的文件的可以通过这个方式引入到程序中。

build.xml

执行sencha app build命令时，Sencha cmd使用该文件构建应用程序。当您要为构建过程(build process)添加一些额外的功能时，可以避免更改./sencha文件夹。

classic.json 和 modern.json

classic.json包含所有视图(views)和其他资源的路径（桌面设备和平板电脑）。 modern.json则包含用于移动设备的资源文件的路径。

index.html

Ext JS应用程序的根文件，包含了一个microloader以便Sencha Cmd可以构建应用程序：

<!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=1, user-scalable=no">

    <title>MyExtJSApp</title>

    
    <script type="text/javascript">
        var Ext = Ext || {}; // Ext namespace won't be defined yet...

        // This function is called by the Microloader after it has performed basic
        // device detection. The results are provided in the "tags" object. You can
        // use these tags here or even add custom tags. These can be used by platform
        // filters in your manifest or by platformConfig expressions in your app.
        //
        Ext.beforeLoad = function (tags) {
            var s = location.search,  // the query string (ex "?foo=1&bar")
                profile;

            // For testing look for "?classic" or "?modern" in the URL to override
            // device detection default.
            //
            if (s.match(/\bclassic\b/)) {
                profile = 'classic';
            }
            else if (s.match(/\bmodern\b/)) {
                profile = 'modern';
            }
            else {
                profile = tags.desktop ? 'classic' : 'modern';
                //profile = tags.phone ? 'modern' : 'classic';
            }

            Ext.manifest = profile; // this name must match a build profile name

            // This function is called once the manifest is available but before
            // any data is pulled from it.
            //
            //return function (manifest) {
                // peek at / modify the manifest object
            //};
        };
    </script>
    
    
    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="fec7a5cc-a11f-4421-b84d-127e09d0bdf7" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>