Extjs嵌套路据类型定义和显示 （二）
日期：2014-05-16 浏览次数：20593 次
Extjs嵌套数据类型定义和显示 （二）
虚拟列中使用 convert属性，定义需要显示的内容，把member成员拼接成一个字符串，以便在Ext.grid.Panel中显示。
在前一篇文章中，讲解了嵌套数据的模型定义，本篇文章主要讲解怎样在Ext.grid.Panel中显示嵌套的数据。
需求描述：
在Ext.grid.Panel中把定义的Project显示出来，项目成员显示在一列中。
因此需要稍微修改Model的定义，增加一个虚拟列：allMembers
/**
* 项目model定义
*/
Ext.define('Project', {
extend : 'Ext.data.Model',
fields : [ {
name : 'projectId', //项目id
type : 'string'
}, {
name : 'projectName', //项目名称
type : 'string'
}, {
name : 'projectManager', //项目主管
type : 'string'
}, {
name : 'allMembers', //项目成员列表
type : 'string',
convert : function(value, record) {
var members = record.raw.memberList;
var tempList = "";
Ext.Array.forEach(members, function(item, index, allItems) {
tempList += (item.memberName + " ");
});
return tempList;
}
}],
hasMany : {
model : 'ProjectMember',
name : 'members' //访问member的方法
associationKey : 'memberList' //读取数据的property
}
});虚拟列中使用 convert属性，定义需要显示的内容，把member成员拼接成一个字符串，以便在Ext.grid.Panel中显示。
注： record最好使用 record.raw.members的数据。
加上显示面板：
//项目列表
var projectPanel = Ext.create('Ext.grid.Panel', {
store : projectStore,
width : document.body.clientWidth * 0.98,
padding : '8 0 0 0',
collapsible : true,
renderTo : Ext.getBody(),
title : '项目列表',
stateful : true,
stripeRows : true,
columnLines : true,
selModel : Ext.create('Ext.selection.CheckboxModel', {
mode : 'SINGLE'
}),
columns : [ {
text : '项目名称',
dataIndex : 'projectName',
sortable : true,
align : 'center',
flex : 1
}, {
text : '项目主管',
dataIndex : 'projectManager',
sortable : true,
align : 'center',
flex : 1
}, {
text : '项目成员',
dataIndex : 'allMembers',
sortable : true,
align : 'center',
flex : 1
} ],
bbar : Ext.create('Ext.PagingToolbar', {
store : projectStore,
autoScroll : true,
displayInfo : true,
displayMsg : '当前显示 {0} - {1} 共{2}',
emptyMsg : "没有记录"
}),
listeners : {
selectionchange : function(model, records) {
}
}
});
});完整的可执行代码：modelDisplay.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>显示嵌套Model数据</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
/**
* 项目成员model定义
*/
Ext.define('ProjectMember', {
extend : 'Ext.data.Model',
fields : [ {
name : 'memberId', //项目成员Id
type : 'string'
}, {
name : 'memberName', //项目成员姓名
type : 'string'
}, {
name : 'projectId', //项目id
type : 'string'
} ],
belongsTo : {
model : 'Project',
primaryKey : 'memberId',
foreignKey : 'projectId'
}
});
/**
* 项目model定义
*/
Ext.define('Project', {
extend : 'Ext.data.Model',
fields : [ {
name : 'projectId', //项目id
type : 'string'
}, {
name : 'projectName', //项目名称
type : 'string'
}, {
name : 'projectManager', //项目主管
type : 'string'
}, {
name : 'allMembers', //项目成员列表
type : 'string',
convert : function(value, record) {
var members = record.raw.memberList;
var tempList = "";
Ext.Array.forEach(members, function(ite
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
