内嵌Json的绑定GridPanel方法

Posted 周四, 08/07/2008 - 18:43 by admin

在本站的ExtJs的官方实例中有关于json数据的绑定方法。该方法可以远程读取json文件中的内容，十分方便。这里向大家介绍另一种方法 内嵌Json的绑定GridPanel方法。

演示(demo)地址在文章最后.

效果图如下：

源代码包括：0005_json_include.html
0005_json_include.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>内嵌Json的绑定GridPanel方法</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
/*
 * Copyright(c) extjs.org.cn | jamblues
 * 
 * 
 * http://extjs.org.cn
 */

Ext.onReady(function(){

	var myData = [   
			{   
				name:"一" ,sex:"男" 
			},   
			{   
				name:"二" ,sex:"男"   
			},   
			{   
				name:"三" ,sex:"女"  
			},   
			{   
				name:"四" ,sex:"男"   
			}   
		];
		
	
 	// create the data store
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'name',mapping: 'name'},
           {name: 'sex',mapping: 'sex'}
        ]
    });
    store.loadData(myData);


    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "name", width: 60, dataIndex: 'name', sortable: true},
            {header: "sex", width: 60, dataIndex: 'sex', sortable: true}
        ],
        renderTo:'example-grid',
        width:200,
        height:200
    });

});
</script>
</head>
<body>
<h1>内嵌Json的绑定GridPanel方法</h1>
<p>直接绑定js中定义的json数据.<br>

<div id='example-grid'></div>

<br />

</body>
</html>

演示(demo)地址:
http://extjs.org.cn/extjs/mydemo/0005_json_include.html

（版权声明：本篇文章版权属于extjs.org.cn所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）

  • 要发表评论，请先登录