前面几篇文档，我们基本实现了一个静态的extjs页面，本篇开始，实现左侧导航树与右侧内容的联动，也就是点击导航菜单，加载对应模块页面和业务逻辑，实现js文件的按需加载。
业务需求是这样的：
左侧的treelist，当点击某个节点的时候，系统根据tree数据里配置的模块信息，加载这个模块，并且把模块对应的主页面显示在中间区域的tabpanel里。
改造主控制器:app/luter/controller/MainController.js
监听导航树的node点击事件，进行后续处理：
'navlist': {
'itemclick'：function(el, record, opt){
//可以通过如下方式获取点击节点的数据。
var nodeData = record.node.data;
}
}完整的代码如下:
Ext.define('luter.controller.MainController', {
extend: 'Ext.app.Controller',
views: ['main.ViewPort'],
stores: ['NavTreeStore'],
init: function (application) {
var me = this;
this.control({
'viewport': {//监听viewport的初始化事件，可以做点其他事情在这里，如有必要，记得viewport定义里的alias么？
'beforerender': function () {
console.log('viewport begin render at:' + new Date());
},
'afterrender': function () {
console.log('viewport render finished at:' + new Date());
},
},
'syscontentpanel': {
'afterrender': function (view) {
console.log('syscontentpanel rendered at:' + new Date());
}
},
'navlist': {
'itemclick': function (el, record, opt) {
var nodeData = record.node.data;//当前点击节点的数据
var tabpanel = Ext.getCmp('systabpanel');//中间tabpanel
var tabcount = tabpanel.items.getCount();//当前tabpanel已经打开几个tab了。
var maxTabCount = 5;//最大打开的tab个数
if (tabcount && tabcount > 5) {
showFailMesg({
title: '为了更好的使用，最多允许打开5个页面',
msg: '您打开的页面过多，请关掉一些!'
});
return false;
}
if (nodeData.leaf) {//是打开新模块，否则是展开树节点
var moduleID = nodeData.module_id;//找到控制器ID,定义在tree的数据里modole_id
if (!moduleID || moduleID == '') {
showFailMesg({
title: '创建模块失败.',
msg: '模块加载错误，模块id为空，创建模块失败'
});
return false;
}
console.log('to add module with id:' + moduleID);
//开始加载控制器
try {
//尝试加载这个控制器，这个过程就是按需ajax加载js文件的过程。
//如果这个模块被加载过，则不会重复加载。
var module = luterapp.getController(moduleID);
} catch (error) {
showFailMesg({
msg: '根据模块ID:' + moduleID + '创建模块失败。' +
'
可能的原因 :
1、该模块当前没有实现.' +
'
2、模块文件名称与模块名称不一致，请检查' +
'Error: ' + error + ''
});
return false;
} finally {
}
//判断模块是否加载下来，因为是ajax加载，所以还是判断一下比较好
if (!module) {
showFailMesg({
msg: 'B:load module fail,the module object is null.' +
'
maybe :the module is Not available now.'
});
return false;
}
//加载到之后，默认去获取控制器里views:[]数组里的第一个作为主视图
var viewName = module.views[0];
console.log('will create a tab with view ,id:' + viewName);
var view = module.getView(viewName);
console.log('get the view el:' + view);
if (!view) {
showFailMesg({
msg: 'Sorry ,to get the module view fail...'
});
return false;
}
//判断一下这个视图是不是已经加载到tabpanel里去了
var tabid = me.getTabId(moduleID);
console.log('will create a tab with id:' + tabid);
var notab = tabpanel.getComponent(tabid);
var viewEL = view.create();
if (!viewEL) {
showFailMesg({
msg: 'Sorry ,to get the module viewEL fail...'
});
return false;
}
if (!notab && null == notab) {//不存在新建
//不管是啥，都放到一个panel里面。
notab = tabpanel.add(Ext.create('Ext.panel.Panel', {
tooltip: nodeData.text + ':' + nodeData.qtip,
id: tabid, // tab的唯一id
title: nodeData.text, // tab的标题
layout: 'fit', // 填充布局,它不会让load进来的东西改变大小
border: false, // 无边框
closable: true, // 有关闭选项卡按钮
iconCls: nodeData.iconCls,
listeners: {
// 侦听tab页被激活里触发的动作
scope: this,
destroy: function () {
console.log("tab :" + tabid + ",has been destroyed")
}
},
items: [view.create()]
}));
//新建之后focus
tabpanel.setActiveTab(notab);
}
else {//如果这个tab已经存在了，则focus到这个tab
tabpanel.setActiveTab(notab);
}
} else {
//如果leaf =false,则说明这不是一个最底层节点，是目录，展开。
console.log('tree node expand')
}
}
}
});
},
//这个方法从tab id里分离出控制器名称
getTabId: function (mid) {
var winid = mid;
var c = winid.split('.');
winid = c.pop();
return winid + '-tab';
}
});
左侧菜单树对应的测试数据：app/testdata/menu.json
一般情况下，这个菜单数据是保存在后端的，通过权限判断加载用户可访问的资源形成树结构返回给前端使用。leaf标明了这是一个目录还是一个模块，module_id对应的是控制器的路径。 比如下面这个测试数据中。 "leaf": true, "module_id": "sys.UserController", 在app.js中，我们配置了appFolder:‘app/luter’, leaf标明了这是一个控制器模块，点击后会去触发控制器加载动作。 所以这个模块的实际路径(也就是js文件)就是:${appFolder}/controller/${module_id}.js 即：app/luter/controller/sys.UserController.js
[
{
"id": "111",
"text": "系统管理",
"href": null,
"leaf": false,
"iconCls": "fa fa-home",
"module_id": "no sign",
"qtip": "这个地方显示鼠标悬停提示",
"children": [
{
"id": "11111",
"text": "用户管理",
"href": null,
"leaf": true,
"iconCls": "fa fa-user",
"module_id": "sys.UserController",
"qtip": "系统用户管理",
"children": []
}
]
}
]
导航菜单与tabpanel 联动完成，下面弄个控制器实验一下效果，以新建一个系统管理分类下的用户管理模块功能为例：
系统管理部分模块放在sys目录下，so:
- 控制器:app/luter/controller/sys/UserController.js
- 模型：app/luter/model/UserModel.js
- Store:app/luter/store/UserStore.js
- 视图主入口：app/luter/model/view/sys/user/User.js
- 列表视图:app/luter/model/view/sys/user/UserList.js
- ......
用户管理控制器 :app/luter/controller/sys/UserController.js
Ext.define('luter.controller.sys.UserController', {
extend: 'Ext.app.Controller',
stores: ['UserStore'], //用户store
views: ['sys.user.User'], //主view ，tab里会加载第一个视图。
init: function () {
this.control({
'userlistview': {
'beforerender': function (view) {
console.log("beforerender list...... ");
},
'afterrender': function (view) {
console.log("afterrender list...... ");
// this.getUserStoreStore().load();//如果UserStore里没设置autoLoad: true,就可以在这里加载用户数据
}
}
});
}
});
用户模型Model：app/luter/model/UserModel.js
Ext.define('luter.model.UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'username', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'real_name', type: 'string'}
]
});
用户Store:app/luter/store/UserStore.js
Ext.define('luter.store.UserStore', {
extend: 'Ext.data.Store',
autoLoad: true,//自动加载数据
model: 'luter.model.UserModel',//使用的模型
pageSize: 15,//每页数据多少
proxy: {
type: 'ajax',//ajax获取数据
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
},
api: {
read: 'app/testdata/user.json'//从这个地方获取数据，当然，这里用测试数据
},
reader: {//返回数据解析器
type: 'json',
root: 'root',//用户列表数据在这个字段下
successProperty: 'success',//成功与失败的标志位是这个字段
totalProperty: 'total'//记录总数在这个字段
},
listeners: {
exception: function (proxy, response, operation, eOpts) {
DealAjaxResponse(response);//监听ajax异常提示错误
}
}
},
remoteSort: true,//服务器端排序
sortOnLoad: true,//加载就排序
sorters: {//拿ID排序
property: 'id',
direction: 'DESC'
}
});
用户管理模块主视图：app/luter/model/view/sys/user/User.js
Ext.define('luter.view.sys.user.User', {
extend: 'Ext.panel.Panel',
alias: 'widget.userview',
layout: 'fit',
requires: ['luter.view.sys.user.UserList'],//引入用户列表模块
border: false,
initComponent: function () {
var me = this;
me.items = [{
xtype: 'userlistview',
layout: 'fit'
}]
me.callParent(arguments);
}
});
用户列表视图:app/luter/model/view/sys/user/UserList.js
Ext.define('luter.view.sys.user.UserList', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlistview',//其他地方就可以这么用:xtype:‘userlistview’
requires: [],
store: 'UserStore',//用到的store
itemId: 'userGrid',//自己的itemid
columnLines: true,//是否显示表格线
viewConfig: {
emptyText: '暂无数据'//store没数据的时候显示这个
},
initComponent: function () {
var me = this;
me.columns = [{
xtype: 'rownumberer',
text: '序号',
width: 60
}, {
header: "操作",
xtype: "actioncolumn",
width: 60,
sortable: false,
items: [{
text: "删除",
iconCls: 'icon-delete',
tooltip: "删除这条记录",
handler: function (grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
if (!record) {
toast({
msg: '请选中一条要删除的记录'
})
} else {
showConfirmMesg({
message: '确定删除这条记录?',
fn: function (btn) {
if (btn === 'yes') {
Ext.Ajax.request({
url: 'sys/user/delete',
method: 'POST',
params: {
id: record.get('id')
},
success: function (response, options) {
DealAjaxResponse(response);
Ext.data.StoreManager.lookup('User').load();
},
failure: function (response, options) {
DealAjaxResponse(response);
}
});
} else {
return false;
}
}
})
}
}
}]
}, {
header: baseConfig.model.user.id,
dataIndex: 'id',
hidden: false,
flex: 1
},
{
header: baseConfig.model.user.username,
dataIndex: 'username',
flex: 1
},
{
header: baseConfig.model.user.real_name,
dataIndex: 'real_name',
flex: 1
}
]
me.bbar = Ext.create('Ext.PagingToolbar', {
store: me.store,
displayInfo: true,
displayMsg: '当前数据 {0} - {1} 总数： {2}',
emptyMsg: "没数据显示",
plugins: [new Ext.create('luter.ux.grid.PagingToolbarResizer', {
options: [5, 10, 15, 20, 25, 50, 100]
})]
})
me.dockedItems = [{
xtype: 'toolbar',
items: [{
text: '添加',
iconCls: baseConfig.appicon.add,
tooltip: '添加',
handler: function () {
var win = Ext.create('luter.view.sys.user.UserAdd');
win.loadView();
win.show();
}
}]
}]
me.listeners = {
'itemdblclick': function (table, record, html, row, event, opt) {
if (record) {
var id = record.get('id');
var view = Ext.create('luter.view.sys.user.UserEdit', {title: '编辑数据'});
view.loadView();
loadFormDataFromDb(view, 'sys/user/view?id=' + id);
} else {
showFailMesg({
msg: '加载信息失败，请确认。'
})
}
}
}
me.plugins = []
me.callParent(arguments);
}
});
//这里的baseConfig定义在公共配置文件config.js中，如下：公共配置参数定义文件:app/luter/config.js
别忘记在app.html中app.js之前引入这个文件。
/**
* icon_prefix font字体前缀定义
* baseConfig 全局配置
*/
var icon_prefix = " fa blue-color ", baseConfig = {
/**
* 全局常量定义
*/
cons: {
noimage: 'app/resource/images/noimage.jpg',
/**
* 静态服务器的地址
*/
static_server: ''
},
/**
* 渲染器，对Boolean类型的表格列的显示内容进行渲染
*/
renders: {
trueText: '',
falseText: '',
cancel: ''
},
/**
* 图标定义
*/
appicon: {
home: icon_prefix + 'fa-home',
add: icon_prefix + "fa-plus",
update: icon_prefix + "fa-edit",
trash: icon_prefix + "fa-trash",
delete: icon_prefix + "fa-remove red-color",
set_wallpaper: icon_prefix + "fa-image",
setting: icon_prefix + "fa-gears",
desktop: icon_prefix + "fa-desktop",
pailie: icon_prefix + "fa-cubes",
logout: icon_prefix + "fa-power-off",
avatar: icon_prefix + "fa-photo",
key: icon_prefix + "fa-key",
user: icon_prefix + "fa-user",
refresh: icon_prefix + "fa-refresh blue-color",
close: icon_prefix + "fa-close",
male: icon_prefix + 'fa-male',
female: icon_prefix + 'fa-female',
role: icon_prefix + 'fa-users',
user_add: icon_prefix + "fa-user-plus",
undo: icon_prefix + 'fa-undo',
search: icon_prefix + 'fa-search',
reset: icon_prefix + 'fa-retweet',
yes: icon_prefix + 'fa-check green-color',
no: icon_prefix + 'fa-close red-color',
list_ol: icon_prefix + ' fa-list-ol',
list_alt: icon_prefix + ' fa-list-alt',
ban: icon_prefix + "fa-ban",
log: icon_prefix + "fa-tty",
printer: icon_prefix + "fa-print",
fax: icon_prefix + "fa-fax",
download: icon_prefix + "fa-cloud-download",
upload: icon_prefix + "fa-cloud-upload",
comment: icon_prefix + " fa-commenting-o",
credit: icon_prefix + "fa fa-gift"
},
/**
* 模型定义
*/
model: {
/**
* 系统用户模型
*/
user: {
id: 'ID',
username: '用户名',
real_name: '真实姓名'
}
}
};
最后，附上用户列表的测试数据（当然，瞎编的......）：app/testdata/user.json
{
"total": 33,
"root": [
{
"id": "aaa",
"username": "user",
"real_name": "用户"
},
{
"id": "ccc",
"username": "user",
"real_name": "用户"
},
{
"id": "ddd",
"username": "user",
"real_name": "用户"
},
{
"id": "eee",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
},
{
"id": "fff",
"username": "user",
"real_name": "用户"
}
],
"success": true
}如上，没问题的话，刷新页面，应该能看到如下所示：
上图中，一些Extjs默认的样式经过了hack。不是默认样式。
最终，整个项目的目录结构如下：
判断是不是动态按需加载?
1、打开chrome的开发控制台，切换到network面板的js下。
2、刷新页面
3、重复点击左侧用户管理，查看JS加载情况。正常情况下同一个模块的js只加载一次。