代码改变世界

Extjs 4 Grid 一对一显示

2012-12-10 14:42  cai-yigo  阅读(426)  评论(0)  编辑  收藏  举报

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

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 3 <html>
 4 <head>
 5 <title>Extjs 4 Grid一对一显示</title>
 6 <link rel="stylesheet" type="text/css"
 7     href="../ext/resources/css/ext-all.css" />
 8 <script type="text/javascript" src="../ext/bootstrap.js"></script>
 9 <script type="text/javascript" src="../ext/locale/ext-lang-zh_CN.js"></script>
10 <script type="text/javascript">
11     Ext.onReady(function() {
12         Ext.define("Kaosheng", {
13             extend : 'Ext.data.Model',
14             fields : [ 'id', 'name', 'xuexiao' ],
15             associations : {
16                 type : 'hasOne',
17                 model : 'Xuexiao',
18                 associationKey : 'xuexiao'
19             }
20         });
21 
22         Ext.define("Xuexiao", {
23             extend : 'Ext.data.Model',
24             fields : [ 'id', 'xxMc' ]
25 
26         });
27         var store = Ext.create('Ext.data.Store', {
28             model : "Kaosheng",
29             proxy : {
30                 type : 'rest',
31                 url : 'users2.json',
32                 reader : {
33                     type : 'json',
34                     root : 'users'
35                 }
36             }
37         });
38         var grid = Ext.create('Ext.grid.Panel', {
39             store : store,
40             columns : [
41                     {
42                         text : '序号',
43                         dataIndex : 'id',
44                         width : 350
45                     },
46                     {
47                         text : '考生姓名 ',
48                         width : 200,
49                         dataIndex : 'name'
50                     },
51                     {
52                         text : '学校',
53                         width : 200,
54                         dataIndex : 'xuexiao',
55                         renderer : function(value, metadata, record, rowIndex,
56                                 colIndex, store, view) {
57                             return value.xxMc;
58                         }
59                     } ],
60 
61             renderTo : Ext.getBody(),
62             viewConfig : {
63                 stripeRows : true
64             }
65         });
66         store.load();
67     });
68 </script>
69 </head>
70 <body>
71     <div id="grid"></div>
72 </body>
73 </html>

json数据如下

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