ExtJS6.0开发培训

一、EXT5
ext5的主题是用SASS（点击进入）和Compass（点击进入）编写的。

在ext5中，仅仅通过更改SASS的变量值，就可以将几乎所有的组件样式定制了，包括颜色，字体，边框，背景。

本文介绍了如何创建一个在多应用中可分享的定制化主题。

1.环境要求
Sencha Cmd 5
这是一个命令行工具，用于部署Ext JS应用，创建一个Ext JS 5主题，你必须拥有Sencha Cmd 5 或更高版本
注意：Sencha Cmd 5 已经预安装了SASS和Compass，如果你的电脑已经安装了，请卸载掉自己的。

Ruby
安装ruby环境（点击进入）用1.9.3版本
Ext JS
如果你本地有Ext JS SDK，解压后在本地路径下执行Cmd命令就行。

不过我们已经不用下载Ext JS 了，你可以用“-ext”命令来自动下载最新版的Ext JS 5！我们这次就用这个命令来做。

2.创建自定义主题
如上所述你需要安装ruby，cmd工具，就可以开始制作主题了
创建一个工作空间
第一步是用Sencha Cmd创建一个你自己的工作空间
[ruby]view plaincopyprint?
1.cd /d E:\ext
2.sencha generate workspace-ext my-workspace
如果你想使用一个下载好的SDK或本地的一个SDK副本，在命令前面加上你解压的Ext JS SDK的路径就可以了
[ruby]view plaincopyprint?
1.sencha -sdk~/sencha-5.0.0 generate workspace my-workspace
1. sencha -sdk C:\Users\zj\Desktop\ext-5.1.0-gpl\ext-5.1.0 generate workspace D:
\EXT\Sencha\Cmd5\Sencha\Cmd\work\ZJ
生成的工作空间将利用脚手架生成一个Sencha目录，让我们进去看看
[ruby]view plaincopyprint?
1.cd my-workspace
如图：
“ext” --- 包含了Ext JS SDK
“packages” --- EXT JS语言环境和主题包
生成一个App来测试主题
我们来生成一个App，在这个基础上来制作主题，在“my-workspace”路径下，用下面的命令来生成一个Ext JS应用的骨架：
[ruby]view plaincopyprint?
1.sencha -sdk ext generate app ThemeDemoApp theme-demo-app
1. sencha -sdk ext generate app ZJEXT ZJEXT
现在，我们生成了一个名字为ThemeDemoApp的应用，路径（也就是文件夹）为theme-demo-app。

这个应用将用"ext"文件夹下的js文件作为引用源。

现在的结构为
theme-demo-app里面的结构为
进入后用下面的命令启动app服务器用网页查看
[ruby]view plaincopyprint?
1.cd theme-demo-app
2.sencha app watch
这里有两种方式查看你的app：
1.开发模式
打开"my-workspace/theme-demo-app/index.html"
方便调试，代码未压缩，我们的教程用的是这个模式。

2.生产模式
运行命令
[ruby]view plaincopyprint?
1.sencha app build
构建后，你可以用浏览器在下面的路径找到你的应用
my-workspace/build/production/ThemeDemoApp/index.html
使用压缩后的源文件，性能更好
生成自定义主题包
在 theme-demo-app 文件夹下，运行
[ruby]view plaincopyprint?
1.sencha generate theme my-custom-theme
它告诉senchacmd 生成一个名字为my-custom-theme的主题包
就在my-workspace\packages路径下
l "package.json" --- 包属性文件，它告诉 Sencha Cmd 这个包的一些信息，如包名，版本，依赖（本包对其他包的依赖）等
l "sass/" --- 所有的主题SASS文件，里面分三部分：
n "sass/etc/" ---额外的工具函数或混入mixins
n "sass/src/" --- SASS规则和调用定义在“sass/var/”中的变量的UI mixin
n "sass/var/" --- SASS变量
"sass/var/" 和 "sass/src"是结构化的，也就是说，是按照你编写样式组件的类路径方式来匹配的。

举个例子，更改Ext.panel.Panel外观的变量应该放在一个文件名为"sass/v ar/panel/Panel.scss"的文件中
l "resources/" --- 图片和其它静态资源
l "overrides/" --- 包含任意修改主题组件类所需覆写的js
主题继承机制
每一个主题包都继承自基本主题包，你创建自己的主题首先要指出你继承自哪个主题，你能从my-workspace\ext\packages路径下看到所有的主题包
"ext-theme-base"
"ext-theme-neutral"
"ext-theme-neptune"
"ext-theme-crisp-touch"
"ext-theme-crisp"
"ext-theme-crisp-touch"
"ext-theme-classic"
"ext-theme-gray"
"ext-theme-aria"
我们的自定义主题应该继承哪一个作为开始呢？我们的建议是使用
"ext-theme-neptune" 或"ext-theme-classic"作为起点，因为这些主题包含所有创建一个有吸引力的主题的必要代码。

Neutral主题是一个比较抽象的主题，不容易直接继承。

覆写一个Neutral主题可能需要你数个小时的工作，更改数百个变量值，而用一个nept une或classic主题你可能只需要花几分钟更改数个变量。

当然，gray或aria主题也是相当不错的选择。

这个教程中，我们创建一个继承Neptune主题的自定义主题。

打开
“packages/my-custom-theme/package.json”文件，找到
[ruby]view plaincopyprint?
1."extend": "ext-theme-classic"
更改为
[ruby]view plaincopyprint?
1."extend":"ext-theme-neptune"
刷新app，这样保证正确的主题js文件包含到bootstrap.js中了，运行刷新命令[ruby]view plaincopyprint?
1.sencha app refresh
好了现在你的主题变成了Neptune主题了，你可以在
my-workspace\ext\packages\ext-theme-neptune中进行修改样式，编译后可看主题（编译在后面讲到）
运用自己的主题
首先讲解一下几个重要的命令行
sencha app watch
在app应用路径下执行。

用于启动服务器，一旦启动，它将监控你的应用更改并自动构建和刷新你的应用。

Sencha app build
在app应用路径下执行。

更改应用的某些参数后，需要重新构建一下来把参数导入Sencha app refresh
在app应用路径下执行。

更改内容写入bootstrap.js中，咱们这里是更改主题配参后运行一下。

Sencha package build
在主题包路径下执行。

更改主题包某些参数后，需要重新构建
好，首先让我们先把默认主题更改为我们的自建主题
路径：theme-demo-app/app.json
[ruby]view plaincopyprint?
1./**
2. * The nameof the theme for this application.
3. */
4."theme": "ext-theme-neptune",
更改为
[ruby]view plaincopyprint?
1./**
2. * The nameof the theme for this application.
3. */
4."theme": "my-custom-theme",
我们把neptune主题包更改为了我们自定义的主题包，ext会自己去my-workspace 下的package里面寻找。

@include extjs-panel-ui(
$ui-label: 'jzpm',
$ui-border-color : #32323A
$ui-border-width : 0
$ui-border-color : #32323A
$ui-header-color : #32323A
$ui-header-font-size : #FFFFFF
$ui-header-font-weight : #32323A
$ui-header-line-height : #32323A
$ui-header-background-color : #32323A
$ui-body-background-color : #32323A
);
配置全局主题变量
让我们来修改一个变量---base color。

在 "my-custom-theme/sass/var/"中创建一个文件 Component.scss，增加如下代码[ruby]view plaincopyprint?
3.$base-color: #317040!default;
后面加！default提高其优先级，因为Sencha Cmd变量文件读取是“反向”的，先读取衍生主题，最后是base主题。

更多的！default用法参见Variable Defaults 完整的ext js全局SASS变量列表参见Global_CSS.
构建包
现在你已经修改了自有主题的base color，你需要为你的主题构建一个包含所有样式规则的升级版本css文件。

到路径packages/my-custom-theme/下，运行[ruby]view plaincopyprint?
1.sencha package build
构建包将创建一个“build”文件夹，在"my-custom-theme/build/resources"中，你将找到一个 my-custom-theme-all.css，这个文件包含你的主题的所有组件的样式规则。

你可以直接在你的应用中链接它，但是这样做并不推荐，因为“all”文件包含了每一个ext组件的所有样式，而许多app应用仅仅用了组件库中的子集，如果你想这么做，首先请先在你的应用中更改参数，指定好应用具体使用哪个主题，再开始构建，这样sencha c md会自动过滤掉未使用的css样式规则。

接着我们来构建一下my-custom-theme，因为刚才我们更改了
theme-demo-app/app.json文件，并没有构建
到theme-demo-app路径下，运行
[ruby]view plaincopyprint?
1.sencha app build
启动sencha app watch，刷新浏览器"theme-demo-app/index.html"。

你应该看到了更改的样子了。

背景变绿了
组件变量更改
每一个Ext JS组件都有一系列的主题全局变量可供你修改。

让我们来改变panel h eaders的font-family。

创建文件 "packages/my-custom-theme/sass/var/panel/Panel.scss"，增加如下代码
[ruby]view plaincopyprint?
1.$panel-header-font-family: Times New Roman!default;
运行
[ruby]view plaincopyprint?
1.sencha app build
可以看到字体变化了
注：其实这里我测试后发现这里字体是不会发生变化的，panel只有加了frame后字体才会发生变化
创建自定义组件UI
Ext中每个组件都拥有自己的UI设置参数，缺省下都是default，这个属性可以给予单独实体组件拥有自己的UI配参，可以让你在同一类型组件下给予不同的样式，比如，panel的“default UI”是黑蓝色的header，但它的“light UI”中，header是亮蓝色的，button也用UI来制作不同于普通按钮的工具条按钮。

Neutral主题为各种组件提供了很多SASS mixins混入，你可以用这些mixins来生成新的UI，这可以从API中找到它们，如，Ext.panel.Panel中，找到“CSS Mixins”部分，看看mixins需要哪些参数，现在，让我们来用mixins来创建一个Panel UI，创建一个文件packages/my-custom-theme/sass/src/panel/Panel.scss，写入如下代码
[ruby]view plaincopyprint?
1.@include extjs-panel-ui(
2.$ui-label: 'highlight-framed',
3.$ui-header-background-color: red,
4.$ui-border-color: red,
5.$ui-header-border-color: red,
6.$ui-body-border-color: red,
7.$ui-border-width: 5px,
8.$ui-border-radius: 5px
9.);
这段代码创建了一个新Panel UI ，名称为highlight-framed，为了在项目中使用它，把Panel中的ui属性设置为highlight（“-framed”这个后缀在你把frame属性设置为true 时会自动添加上）
打开"theme-demo-app/app/view/Main.js"，替换一下代码：
[ruby]view plaincopyprint?
1.items: [{
2. // custom "highlight" UI
3. xtype: 'panel',
4. ui: 'highlight',
5. frame: true, // Make sure to add thisconfig to see the frame highlight chang
es
6. bind: {
7. title: '{name}'
8. },
9. region: 'west',
10. html: '<ul><li>This area isused for navigation, for example, using a "tree"co
mponent.</li></ul>',
11. width: 250,
12. split: true,
13. tbar: [{
14. text: 'Button',
15. handler: 'onClickButton'
16. }]
17.},{
18. region: 'center',
19. xtype: 'tabpanel',
20. items:[{
21. title: 'Tab 1',
22. html: '<h2>Content appropriatefor the current navigation.</h2>'
23. }]
24.}]
效果如下：
虽然UI mixin是一个方便的方式为一个组件配置多个表象,他们不应该被过度使用。

每个调用UI mixin生成额外的CSS规则。

随意调用UI mixin可能产生过大的CSS文件。

另一个重要的一点要记住当调用UI mixin时，是通过其命名参数调用mixin,而不是参数值的有序列表。

尽管SASS支持两种形式，但是最好使用这种形式: [ruby]view plaincopyprint?
1.@includeextjs-component-ui(
2.$ui-foo: foo,
3.$ui-bar: bar
4.);
而不是
[ruby]view plaincopyprint?
1.@includeextjs-component-ui(foo, bar);
修改图片资源
所有的图片资源缺省下都继承自父主题，我们可以通过覆写方式来实现，把想覆写的图片放在"my-custom-theme/resources/images/中，给它们父主题中同样的名字即可。

如，让我们改变MessageBox 组件的info icon，把下面的图片保存起来
"packages/my-custom-theme/resources/images/shared/icon-info.png"
在"theme-demo-app/app/view/Main.js"中写代码把其显示出来
[ruby]view plaincopyprint?
1....
2.tbar: [{
3. text: 'Button',
4. handler: 'onClickButton'
5.}],
6.items: [{
7. xtype: 'button',
8. text: 'Show Message',
9. handler: function() {
10. Ext.Msg.show({
11. title: 'Info',
12. msg: 'Message Box with customicon',
13. buttons: Ext.MessageBox.OK,
14. icon:
15. });
16. }
17.}]
18....
运行
[ruby]view plaincopyprint?
1.sencha app build
看效果
主题Js覆写
覆写js的属性十分简单，让我们试着把Panels中的属性titleAlign更改一下。

创建"packages/my-custom-theme/overrides/panel/Panel.js"，写如下代码
[ruby]view plaincopyprint?
1.Ext.define('MyCustomTheme.panel.Panel',{
2. override: 'Ext.panel.Panel',
3. titleAlign: 'center'
4.});
在 "packages/my-custom-theme/"路径下，运行
[ruby]view plaincopyprint?
1.sencha package build
这是为了让 "packages/my-custom-theme/build/my-custom-theme.js"包含最新的覆写。

在"theme-demo-app"路径下，运行
[ruby]view plaincopyprint?
1.sencha app refresh
这是为了覆写主题被包含进正在运行的项目。

现在在"theme-demo-app"路径下，重新构建项目
[ruby]view plaincopyprint?
1.sencha app build
可以起服务看效果了panel headers文字居中了~
SASS命名空间
如上所述,Sencha Cmd查找文件“sass / var”和“sass / src”相匹配的JavaScript类。

对于主题，在默认情况下,Ext名称空间被认为是顶级名称空间,所以主题的“sass/src /panel/Panel.scss”对应于 Ext.panel.Panel
对于Ext以外的主题名称空间，你必须改变在".sencha/package/app.json"中的名为p space的配置属性
为了统一配置你需要这样写
[ruby]view plaincopyprint?
1./**
2. * Sass configuration properties.
3. */
4."sass": {
5. /**
6. * The root namespace to use when mapping*.scss files to classes in the
7. * sass/src and sass/var directories. Forexample, "MyApp.view.Foo" would
8. * map to"sass/src/view/Foo.scss". If we changed this to"MyApp.view" the
n
9. * it would map to"sass/src/Foo.scss". To style classes outside the app's
10. * root namespace, change this to"". Doing so would change the mapping o
f
11. * "MyApp.view.Foo" to"sass/src/MyApp/view/Foo.scss".
12. */
13. /**
14. * <span style="color: rgb(38, 38, 38);">"MyApp.view.Foo"</span><span sty
le="color: rgb(38, 38, 38);">对应"sass/src/view/Foo.scss"</span>，如果我们更改为"My App.view"
15. * 那么将对应"sass/src/Foo.scss"，如果设置为""，"MyApp.view.Foo"
16. * 将对应"sass/src/MyApp/view/Foo.scss"
17. */
18.
19. "namespace": ""
20.},
在这个设定中， Ext.panel.Panel对应的就是"sass/src/Ext/panel/Panel.scss"了
添加自定义的SASS
所有的自定义SASS都放在"sass/etc"，你可以随意组织里面的代码，但是注意senc ha cmd只构建 "sass/etc/all.scss"，其他文件将导入到"all.scss"中，具体例子请参见"pac kages/ext-theme-base/sass/etc/“
这就是整个ext js 5的theme制作了，整个流程就是这样子的~
二、EXT6
1开发准备
ExtJS 6.0 GPL正式版下载地址
https:///legal/gpl/
ExtJS 6.0离线文档下载地址
经典版
/downloads/extjs-docs-6.0.0-classic.zip
现代版
/downloads/extjs-docs-6.0.0-modern.zip
Sencha Tool下载地址
/cmd/6.0.0.202/no-jre/SenchaCmd-6.0.0.202-windows-no_jre.zip
（假设你的系统里已经安装了JRE，否则请下载带JRE版本的Sencha Tool）
安装Sencha Tool
默认安装即可。

解压离线帮助文档extjs-docs-6.0.0-classic.zip
解压ext-6.0.0-gpl.zip
2生成程序框架
>sencha -sdk ./ext-6.0.0 generate app -classic Nms ./Nms
指定Ext源文件路径
D:\EXT\Sencha\Cmd\6.0.0.202\NEW\zj>sencha -sdk C:\Users\zj\Desktop\ext-6.0.0-gpl
\ext-6.0.0 generate app -classic ZJ ./NEW/zj
sencha -sdk C:\Users\zj\Desktop\ext-6.0.0-gpl\ext-6.0.0 generate app -classic ZJ ./NEW/zj sencha generate app ZJFRAME D:\EXT\Sencha\Cmd\6.0.2.14\NEW5
sencha generate app ZJFRAME D:\EXT\Sencha\Cmd\6.0.2.14\NEW
进入到Nms目录，看到生成的工程
cd Nms
进入到该目录
执行
sencha app watch
浏览器输入
http://localhost:1841
3定制样式
3.1修改主题
打开app.json，定位到"theme": "theme-triton"改为"theme": "theme-neptune-touch"并保存。

观察DOS窗口的变化。

可以看到，橙色标识的部分表示sencha cmd 工具监测到了文件被修改app.json被修改了，工具实时编译，完成后再次输出Waiting for changes…，继续监听文件是否有更改。

刷新浏览器，看到主题变化已经生效。

3.2修改全局主题变量
为了能够实时看到修改后的效果，我们把浏览器地址增加一个参数http://localhost:1841/?platformTags=fashion:true
打开all.scss文件
增加一行
$base-color: dynamic(#123456);
如下图所示：
回到浏览器页面，效果如下：
可以看到，标题和按钮的颜色为我们设置的颜色值。

查看哪些全局的主题变量可以修改，需要参考Ext Api Document
3.3配置组件的变量
新建一个文件
Nms\sass\var\view\main\List.scss，该文件对应于代码
Nms\app\view\main\List.js，意味着我们将要修改视图Nms.view.main.List的样式。

设置panel的背景
$panel-body-background-color : dynamic(#4682B4);
设置表头背景
$grid-header-background-color : dynamic(#F0FFF0);
设置行间隔颜色为透明
$grid-row-cell-border-color : dynamic(transparent);
设置列表行背景
$grid-row-cell-background-color : dynamic(#FFFAFA);
设置列表行交替背景
$grid-row-cell-alt-background-color : dynamic(#FFEFD5); 最终效果如下
3.4通过JS覆盖(override)主题
创建overrides\panel\Panel.js
加入如下代码
Ext.define('Nms.panel.Panel', {
override : 'Ext.panel.Panel',
titleAlign : 'center'
});
刷新页面，观察页面变化。

3.5创建用户组件UI
每一个Ext Framework下的组件都拥有自己的UI设置参数，缺省下都是default，这个属性可以给予单独实体组件拥有自己的UI配参，可以让你在同一类型组件下给予不同的样式。

Ext为各种组件提供了很多SASS mixins混入，你可以用这些mixins来生成新的UI，这可以从API中找到它们。

如
创建sass\src\panel\Panel.scss，增加
@include extjs-panel-ui(
$ui:'highlight-framed',
$ui-header-background-color:#FF6347,
$ui-border-color:#FF6347,
$ui-header-border-color:#FF6347,
$ui-body-border-color:#FF6347,
$ui-header-color:white
);
修改Nms\app\view\main\List.js代码，增加
ui : 'highlight',
frame : 'true',
两个配置，刷新页面，观察页面变化
3.6定制Image
双击列表的某条记录，弹出如下对话框，
建立一个png文件
当再双击列表记录时，弹出的对话框图标变为了我们刚刚设置的图标。

我们使用的主题是theme-neptune-touch，对比一下目录和文件名，就明白我们为什么要在N ms\resources\images\shared\下面创建同名icon-question.png图片了。

4开发详解
4.1理解框架代码
3.1.1.程序入口app.js
mainView配置项是用来创建的初始化视图，也就是说程序在初始化时会创建类为“Nms.vie w.main.Main”的实例。

注意，匿名类继承的是Nms.Application类。

3.1.2.Nms.Application
stores存放的是全局或者共享的store，如果定义的store不在这里配置，则程序不会加载该store。

3.1.3.Nms.view.main.Main
extend: 'Ext.tab.Panel',继承自Ext.tab.Panel
controller: 'main',使用名字为main的控制器，
Nms.view.main.MainController里有配置项alias: 'controller.main' viewModel: 'main',使用名字为main的视图模型
Nms.view.main.MainModel里有配置项alias: 'viewmodel.main'
ui: 'navigation',见第二章介绍
header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'绑定的是对应的viewModel里配置项，见
Nms.view.main.MainModel
viewModel的好处是，当里面的数据发生变化时，bind到
viewModel的视图能立即更新
},
flex: 0
},
iconCls: 'fa-th-list'
},
responsiveConfig: {
tall: {
headerPosition: 'top'当浏览器视图高度大于宽度时，tab显示在视图顶部},
wide: {
headerPosition: 'left'当宽度大于高度时，tab显示在视图左边
}
},
高度大于宽度效果
宽度大于高度效果
items: [{
title: 'Home',
iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
xtype: 'mainlist'Nms.view.main.List类的xtype: 'mainlist'，是对类名的简写}]
}, {
title: 'Users',
iconCls: 'fa-user',
bind: {
html: '{loremIpsum}'见dataModel的data.loremIpsum
}
}, {
title: 'Groups',
iconCls: 'fa-users',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Settings',
iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]
可以看出，配有4个Tab项。

3.1.
4.Nms.view.main.List
Ext.define('Nms.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
ui : 'highlight',
frame : 'true',
requires: [
'Nms.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'使用的Nms.store.Personnel，其配置有alias: 'store.personnel', },
columns: [有三列，每列要显示的值通过dataIndex指示
{ text: 'Name', dataIndex: 'name' },dataIndex的配置值对应于
Nms.store.Personnel的fields里的项{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
listeners: {
select: 'onItemSelected'注册事件处理函数，当select事件发生时，
调用controller的'onItemSelected'函数
}
});
事件及其处理函数的参数，参考帮助文档。

如
点击select
跳转到select事件处理的函数原型
3.1.5.Nms.view.main.MainController
onItemSelected对应于Nms.view.main.List注册的回调处理函数。

3.1.6.Nms.view.main.MainModel
略。

4.2开发实践
这一节，我们在原有程序上进行扩充，实现一个简单的页面。

该页面用来定制快捷菜单。

4.2.1.创建页面视图Nms.view.system.CustomizeShortCuts
创建一个js文件，如下图所示：
修改主视图，将第二个tab页面改为刚创建的视图。

刷新页面，看一下页面效果。

4.2.2.创建视图对应的控制器Nms.view.system.CustomizeShortCutsController
该控制器里有视图中【保存】按钮对应的事件处理函数。

其中，getVeiw()函数获取的是注册到该控制器的视图，在这里指Nms.view.system.CustomizeShortCuts。

我们需要注册该控制器到视图。

在Nms.view.system.CustomizeShortCuts里放开注释的那一行。

刷新页面，看一下效果。

当点击确定按钮后，提示保存失败。

失败的原因在于，程序需要向url: 'system/menu/saveShortCuts.action'提交结果，而url对应的文件不存在，因此，我们在Nms\app\view\system下创建一个文件saveShortCuts.action内容为空。

再次运行，提示保存成功。

4.2.3.初始化视图Nms.view.system.CustomizeShortCuts的数据
我们注意到，视图的下拉框内容为空，因为我们没有为tagfield设置store。

4.2.4.创建storeNms.store.system.QuickStartMenuStore
内容如下：
Ext.define('Nms.store.system.QuickStartMenuStore', {
extend: 'Ext.data.Store',
model: 'Nms.model.system.MenuModel',
proxy: {
type: 'ajax',
api: {
read: 'system/menu/getMenusOfLeaf.action'
},
reader: {
type: 'json'
}
}
});
4.2.
5.创建modelNms.model.system.MenuModel
内容如下
Ext.define('Nms.model.system.MenuModel', {
extend: 'Ext.data.Model',
fields : [ 'id', 'text', 'cntType', 'icon', 'root', 'smallIcon', 'pId',
'pName', 'shortCut', 'quickStart', 'size', 'sort', 'mode' ]
});
4.2.6.创建模拟数据
我们的store设置了从read: 'system/menu/getMenusOfLeaf.action'下面获取数据，因此，我们需要创建文件。

文件内容如下。

[ {
"id" :"5c919ee03772a0f50137731a772f9923",
"text" :"全网监视",
"root" :false,
"icon" :"resources/images/menustore/area.png",
"smallIcon" :"resources/images/smallmenustore/area.png",
"cntType" :"globaltopo",
"size" :-1,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731a772f9922",
"text" :"拓扑监测",
"root" :false,
"icon" :"resources/images/menustore/config.png",
"smallIcon" :"resources/images/smallmenustore/config.png",
"cntType" :"gistopo",
"size" :-1,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731a772f9924",
"text" :"物理拓扑",
"root" :false,
"icon" :"resources/images/menustore/topocfg.png",
"smallIcon" :"resources/images/smallmenustore/topocfg.png",
"cntType" :"topoconfiggraph",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731a772f9925",
"text" :"系统监视",
"root" :false,
"icon" :"resources/images/menustore/faultstatistic.png",
"smallIcon" :"resources/images/smallmenustore/faultstatistic.png", "cntType" :"systemstatus",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731acaf12301",
"text" :"设备配置",
"root" :false,
"icon" :"resources/images/menustore/cmdterminal.png",
"smallIcon" :"resources/images/smallmenustore/cmdterminal.png", "cntType" :"devframeconfigview",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731acaf2200",
"text" :"故障统计",
"root" :false,
"icon" :"resources/images/menustore/faulthistroy.png",
"smallIcon" :"resources/images/smallmenustore/faulthistroy.png", "cntType" :"panel",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731acaf33300",
"text" :"任务管理",
"root" :false,
"icon" :"resources/images/menustore/buildstrategy.png",
"smallIcon" :"resources/images/smallmenustore/buildstrategy.png", "cntType" :"panel",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731acaf32117",
"text" :"用户管理",
"root" :false,
"icon" :"resources/images/menustore/system.png",
"smallIcon" :"resources/images/smallmenustore/system.png",
"cntType" :"userlist",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731acaf32118",
"text" :"权限组管理",
"root" :false,
"icon" :"resources/images/menustore/usergroup.gif",
"smallIcon" :"resources/images/smallmenustore/usergroup.gif", "cntType" :"usergroup",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731a772f9992",
"text" :"菜单管理",
"root" :false,
"icon" :"resources/images/menustore/menu.png",
"smallIcon" :"resources/images/smallmenustore/menu.png",
"cntType" :"menulist",
"size" :-1,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
}, {
"id" :"5c919ee03772a0f50137731a772f9991",
"text" :"数据管理",
"root" :false,
"icon" :"resources/images/menustore/log.png",
"smallIcon" :"resources/images/smallmenustore/log.png",
"cntType" :"sysparam",
"size" :800,
"shortCut" :1,
"quickStart" :1,
"mode" :0,
"pid" :null,
"pName" :null,
"sort" :0,
"menuModel" :null,
"pname" :null,
"menu" :null
} ]
保存文件时，选择utf-8编码
4.2.7.配置全局store
4.2.8.初始化视图的store
控制器的control配置项是另外一种注册事件响应函数的方式。

在init函数中使用视图的on函数注册事件响应函数
上述例子中，演示了viewController的gerReferences方法的使用方式，可以快速定位指定控件。

组件使用reference配置项进行配置。