您的位置：首页 > Web前端 > JavaScript

Extjs 4 Grid 一对一显示

2012-12-10 14:42 127 查看

标注：本文是关于Grid的一对一显示

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Extjs 4 Grid一对一显示</title>
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/bootstrap.js"></script>
<script type="text/javascript" src="../ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.define("Kaosheng", {
extend : 'Ext.data.Model',
fields : [ 'id', 'name', 'xuexiao' ],
associations : {
type : 'hasOne',
model : 'Xuexiao',
associationKey : 'xuexiao'
}
});

Ext.define("Xuexiao", {
extend : 'Ext.data.Model',
fields : [ 'id', 'xxMc' ]

});
var store = Ext.create('Ext.data.Store', {
model : "Kaosheng",
proxy : {
type : 'rest',
url : 'users2.json',
reader : {
type : 'json',
root : 'users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [
{
text : '序号',
dataIndex : 'id',
width : 350
},
{
text : '考生姓名 ',
width : 200,
dataIndex : 'name'
},
{
text : '学校',
width : 200,
dataIndex : 'xuexiao',
renderer : function(value, metadata, record, rowIndex,
colIndex, store, view) {
return value.xxMc;
}
} ],

renderTo : Ext.getBody(),
viewConfig : {
stripeRows : true
}
});
store.load();
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>

json数据如下

{
"users" : [{
"id" : 123,
"name" : "梅超风",
"xuexiao" : {
"id" : 50,
"xxMc" : "桃花岛大学"
}
},{
"id" : 124,
"name" : "洪七公",
"xuexiao" : {
"id" : 51,
"xxMc" : "丐帮大学"
}
}]
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航