extjs6.0 动态加载_ExtJs6.0开发详解之理解框架代码

1、程序入口app.js

mainView配置项是用来创建的初始化视图，也就是说程序在初始化时会创建类为“Nms.view.main.Main”的实例。

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

2、Nms.Application

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

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里配置项data.name，见Nms.view.main.MainModel

viewModel的好处是，当里面的数据发生变化时，bind到

viewModel的视图能立即更新

},

flex: 0

},

iconCls: 'fa-th-list'

},

responsiveConfig: {

tall: {

headerPosition: 'top' 当浏览器视图高度大于宽度时，tab显示在视图顶部

},

wide: {

headerPosition: 'left' 当宽度大于高度时，tab显示在视图左边

}

},

高度大于宽度效果

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事件处理的函数原型

5、Nms.view.main.MainController

onItemSelected对应于Nms.view.main.List注册的回调处理函数。

6、Nms.view.main.MainModel

略