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
略