Ext JS 5初探（三）

在上文提到了本地化文件的问题，然后在Ext JS 5的包里找了找，居然还没包含本地化包。我估计目前还不到考虑本地化的时候。在Sencha Touch中，是没有本地化包的，但是要让Ext JS也不包含本地化包，那有点不现实。如果按照目前的模式，要插入本地化包，是个大问题。要加载本地化包，最佳位置应该是在完成Ext JS的初始化后，在加载应用程序之前，但根据目前的模式，一是自己去修改Bootstrap.json文件，一是在加载应用程序后再加载本地化包。如果自己去修改Bootstrap.json文件，有点不太显示，因为要调整加载文件的idx就很头疼了，如果不调整idx，直接在最后加入本地化包，哪就和直接在初始化应用程序化再加载本地化文件没区别了。在应用程序初始化后加载，是否存在问题，这个需要验证才知道，目前不好下结论。或许在后续版本会很好的解决这个问题也不一定，这个问题只有留待正式版的时候再来讨论。

下面来看看app.js，代码如下：

Ext.application({
    name: 'TestExt5',

    extend: 'TestExt5.Application',
    
    autoCreateViewport: 'TestExt5.view.main.Main'
	
});

从代码可以看到，这里与4最大的不同就是autoCreateViewport不再是true或false了，而是直接指定类名了。翻了下app\view目录，没有了4种的Viewport.js文件，这是怎么回事？

打开Ext.app.Application的源文件，看了一下，发现多了一个类Ext.container.plugin.Viewport，也就是说，Viewport现在只是一个容器的插件，不再是独立的容器类了。这样也好，可以避免使用上的混乱，再也不用担心在容器或面板内使用Viewport的情况了。

进入app目录，打开applicaiton.js文件，会看到这个是4的时候没区别。

下面打开TestExt5.view.main.Main的类文件，会看到多了以下几个定义：

    controller: 'main',
    viewModel: {
        type: 'main'
    },

这就是Ext JS 5新增的视图控制器和视图模型。

下面先来看看视图模型的定义，代码如下：

Ext.define('TestExt5.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        name: 'TestExt5'
    }

    //TODO - add data, formulas and/or methods to support your view
});

在代码中，只定义了一个数据name，值为TestExt5。这个值有什么用呢？切换回TestExt5.view.main.Main会看到以下代码：

        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',

从代码可以看到，这里将数据name绑定给了面板的标题（title），也就是面板的标题将会显示TestExt5，正如文章一图中所示的效果。

下面来看看视图控制器的代码：

Ext.define('TestExt5.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [
        'Ext.MessageBox'
    ],

    alias: 'controller.main',

    onClickButton: function () {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    }
});

在代码中定义了两个方法，其中onConfirm是onClickButton方法内Ext.Msg.confirm的回调函数。

切换回TestExt5.view.main.Main，可以看到，面板中的按钮绑定了onClickButton方法，也就是说，当单击按钮时，会直接执行视图控制器的onClickButton方法。这样的写法，实在太好，可减少不少代码量。在使用4的MVC结构，最大的烦恼就是要在控制器中定义一堆的引用以及写一堆的选择符为组件绑定事件。现在，只需要将方法写在视图控制器中，直接在视图中绑定方法就行了。这个得赞一下！

在app\controller目录下有Main.js和root.js两个文件，这两个文件都只有简单的定义，没有具体的执行代码。可以预想，在5的开发中，Main.js的主要作用是作为视图之间的数据传递之用。而root.js，根据注释主要作用是用来定义路由。

在文章的最后，我们来生成一下应用程序。打开命令提示符窗口，进入应用程序的目录，在这里是C:\TestExt5，然后运行以下命令：

sencha app build

等编译完成，可在C:\TestExt5\build\production\TestExt5目录看到以下的文件和目录：

打开index.html，会发现有一大段的压缩了的Javascript代码，这段代码仔细看了下，就是把bootstrap.js文件压缩后的代码。不过还是有变化的，就是在压缩代码的第一行会看到以下代码：

Ext.manifest="app"

也就是说，这次要去加载的不是bootstrap.json文件了，而是app.json文件了，也就是说，这时候是app.json文件发挥作用的时候了，要好好并仔细阅读一下app.json文件里面的注释了，不然贸然去修改该文件，很可能会出错。

好了，有关Ext JS 5的初步探讨就到这了，未来有机会研究一下Ext JS 5的新功能。