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的新功能。
Ext JS 5初探(三)的更多相关文章
- Ext JS 5初探(二) ——Bootstrap.js
在Bootstrap.js文件中,总共有1500行(包含注释和空行),使用编辑器的代码折叠功能就如下图可以一窥全貌了. 从代码可以看到,这里主要定义了Ext.Boot.Ext.globalEval.E ...
- Ext.Js核心函数( 三)
ExtJs 核心函数简介 1.ExtJs提供的常用函数2.get.fly.getCmp.getDom.getBody.getDoc3.query函数和select函数4.encode函数和decode ...
- Ext JS 5初探(一)
在开始前,先安装好Sencha Cmd 5.然后输入以下命令创建一个测试用的应用程序: sencha -sdk c:\ext5 generate app TestExt5 C:\TestExt5 想不 ...
- Ext JS学习第三天 我们所熟悉的javascript(二)
•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类 ...
- 初探 Ext JS 6 (sencha touch/ext升级版)
Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
- Ext JS 6开发实例(三) :主界面设计
在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要.除了设计主界面,还有一些其他的东西需要配置一下. 添加本地化包 打开a ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
- 【转载】《Ext JS 4 First Look》翻译之一:新特性
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:^_^肥仔John 原文地址:http://www.cnblogs. ...
随机推荐
- JavaScript 知识图谱
- 记一次MySQL删库的数据恢复
昨天因为不可描述的原因,数据库直接被 drop database删除.在第一时间停止数据库服务和Web服务,备份MySQL数据目录下的所有文件之后,开始走上数据恢复之路. 第一次干这种事,各种不得法. ...
- Bash shell中的位置参数$#,$*,$@,$0,$1,$2...及特殊参数$?,$-等的含义
http://hi.baidu.com/lolorosa/blog/item/5775a608bd670d33b0351da7.html $# 是传给脚本的参数个数 $@ 是传给脚本的所有参数的列表 ...
- 网卡配置和DNS配置,手动挂在nas存储的共享目录,网络相关其它操作命令,修改防火墙中的端口配置,resolv.conf配置详细介绍和网卡信息配置详细介绍
1. 网卡配置和DNS配置 若想服务器能够发邮件,需要让部署的服务器能够访问到外网环境.若部署的服务器访问不到外网,通过ping www.baidu.com的方式执行的时候,会出现以下问题: &q ...
- tomcat自动运行磁盘任意位置上的项目、使用Maven对tomcat进行自动部署
对于非Maven的web项目,有时候我们想不时常通过打war包.拷贝war包.启动tomcat来运行项目.这时候我们可以通过以下方式来进行配置: 1.1:创建web工程.工程结构如下: 1.2. ...
- cassandra 如何写数据以及放置副本
application发送数据到server application 发送请求到server 根据设置的load balance 规则从cluster中挑选一个coordinator,一般使用轮询即可 ...
- React Native开发工具Nuclide使用
之前写RN的时候首选webstorm,这是之前做前端已经习惯的工具,其实RN开发官网推荐的是Nuclide工具, Nuclide是Fackbook专门为React开发IDE,今天也来尝试下,如果对we ...
- 自己写一个网页版的Markdown实时编辑器
这几天忙着使用Python+Django+sqlite 搭建自己的博客系统,但是单纯的使用H5的TextArea,简直太挫了有木有.所以,就想模仿一下人家内嵌到网页上的Markdown编辑器,从而让自 ...
- UNIX环境高级编程——实现uid to name
setpwent()用来将getpwent()的读写地址指回文件开头,即从头读取密码文件中的账号数据. strcut passwd * getpwent(void); getpwent()用来从密码文 ...
- 【编程练习】poj1111
Image Perimeters Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8632 Accepted: 5168 ...