在上文提到了本地化文件的问题,然后在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. Oracle性能优化-读懂执行计划

    Oracle的执行计划 得到执行计划的方式 Autotrace例子 使用Explain explain plan set STATEMENT_ID='testplan' for select * fr ...

  2. The new powerful SQL executing schedule monthly or weekly in DB Query Analyzer 7.01

    1 About DB Query Analyzer DB Query Analyzer is presented by Master Genfeng,Ma from Chinese Mainland. ...

  3. Docker学习笔记3:CentOS7下安装Docker-Compose

    Docker-Compose是一个部署多个容器的简单但是非常必要的工具. 安装Docker-Compose之前,请先安装 python-pip,请参考我的另一篇博文CentOS7下安装python-p ...

  4. CentOS 7 下使用虚拟环境Virtualenv安装Tensorflow cpu版记录

    1.首先安装pip-install 在使用centos7的软件包管理程序yum安装python-pip的时候会报一下错误: No package python-pip available. Error ...

  5. Cassandra 3.x官方文档(1)---关于Cassandra

    写在前面 cassandra3.x官方文档的非官方翻译.翻译内容水平全依赖本人英文水平和对cassandra的理解.所以强烈建议阅读英文版cassandra 3.x 官方文档.此文档一半是翻译,一半是 ...

  6. 递归dict

    一个看起来非常酷的定义 class Example(dict): def __getitem__(self, item): try: return dict.__getitem__(self, ite ...

  7. nginx平台初识(二) 浏览器 HTTP 协议缓存机制详解

    1.缓存的分类 缓存分为服务端侧(server side,比如 Nginx.Apache)和客户端侧(client side,比如 web browser). 服务端缓存又分为 代理服务器缓存 和 反 ...

  8. ssh用法及命令

    http://blog.csdn.net/pipisorry/article/details/52269785 什么是SSH? 简单说,SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本 ...

  9. 04_关于元数据,ResultSetMetaData对象以及API方法介绍

     ResultSetMetaData对象 元数据,可以理解为数据的数据 Jdbc中的元数据是指数据库.表.列的定义信息. ResultSetMetaData对象表示结果集ResultSet对象的元 ...

  10. ToolBar与AppcompatAcitivity实现浸入式Statusbar效果

    toolbar是android sdk API21新增的组件,下面是谷歌官方的介绍文档: A standard toolbar for use within application content. ...