在上文提到了本地化文件的问题,然后在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的新功能。

Ext JS 5初探(三)的更多相关文章

  1. Ext JS 5初探(二) ——Bootstrap.js

    在Bootstrap.js文件中,总共有1500行(包含注释和空行),使用编辑器的代码折叠功能就如下图可以一窥全貌了. 从代码可以看到,这里主要定义了Ext.Boot.Ext.globalEval.E ...

  2. Ext.Js核心函数( 三)

    ExtJs 核心函数简介 1.ExtJs提供的常用函数2.get.fly.getCmp.getDom.getBody.getDoc3.query函数和select函数4.encode函数和decode ...

  3. Ext JS 5初探(一)

    在开始前,先安装好Sencha Cmd 5.然后输入以下命令创建一个测试用的应用程序: sencha -sdk c:\ext5 generate app TestExt5 C:\TestExt5 想不 ...

  4. Ext JS学习第三天 我们所熟悉的javascript(二)

    •javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类 ...

  5. 初探 Ext JS 6 (sencha touch/ext升级版)

    Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...

  6. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  7. Ext JS 6开发实例(三) :主界面设计

    在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要.除了设计主界面,还有一些其他的东西需要配置一下. 添加本地化包 打开a ...

  8. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  9. 【转载】《Ext JS 4 First Look》翻译之一:新特性

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:^_^肥仔John      原文地址:http://www.cnblogs. ...

随机推荐

  1. makefile 和shell文件相互调用

    shell 文件内调用makefile文件:   #!/bin/bash cd ctemplate-2.1./configuresudo make -f installcd ../cd Templat ...

  2. 阿里云服务器云数据库免费体验(Java Web详细实例)

    一.效果展示 博主部署了两个war包到阿里云服务器上,一个是没有连接数据库的,另外一个是连接了数据库的. (由于阿里云服务器免费使用15天,下面链接约2016年3月9日后无效) (1)无数据库版访问地 ...

  3. Python实现八大排序算法(转载)+ 桶排序(原创)

    插入排序 核心思想 代码实现 希尔排序 核心思想 代码实现 冒泡排序 核心思想 代码实现 快速排序 核心思想 代码实现 直接选择排序 核心思想 代码实现 堆排序 核心思想 代码实现 归并排序 核心思想 ...

  4. 23 服务的创建Demo1

    结构 MainActivity.java package com.qf.day23_service_demo1; import android.app.Activity; import android ...

  5. Cocos2D与SpriteBuilder的问题在哪提问

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道Cocos2D的教程中文版的非常少,注意我没有说Coc ...

  6. Android开发艺术探索笔记——第一章:Activity的生命周期和启动模式

    Android开发艺术探索笔记--第一章:Activity的生命周期和启动模式 怀着无比崇敬的心情翻开了这本书,路漫漫其修远兮,程序人生,为自己加油! 一.序 作为这本书的第一章,主席还是把Activ ...

  7. SQL Server性能优化——等待——SLEEP_BPROOL_FLUSH

    前言: 有一个用于历史归档的数据库(简称历史库),经过一定时间的积累,数据文件已经达到700多GB,后来决定某些数据可以不需要保留,就把这部分数据truncate了,空余出600多GB的空间,也就是说 ...

  8. FORM当前状态分析

     变量  SYSTEM.RECORD_STATUS 确定当前记录状态.有四种返回值:CHANGED表示记录从数据库取来,并且该记录至少一个基表列被更新:INSERT表示给一个非取自数据库记录的基表 ...

  9. memcached实战系列(二)memcached参数以及启动

    memcached启动的时候配置的参数也比较多.在这里我就做一个汇总,需要的时候直接查看参数以及参数的含义. 下面是参数的定义以及解释. 1.1.1. 参数说明 -d选项是启动一个守护进程 -m是分配 ...

  10. Java并发框架——AQS之阻塞与唤醒

    根据前面的线程阻塞与唤醒小节知道,目前在Java语言层面能实现阻塞唤醒的方式一共有三种:suspend与resume组合.wait与notify组合.park与unpark组合.其中suspend与r ...