ASP.NET+Extjs2.0读取Json数据显示在GridPanel面板上面

来源：互联网发布：手机千里眼监控软件编辑：程序博客网时间：2024/05/18 05:51

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReaderJson.aspx.cs" Inherits="ReaderJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <!--Ext2.0官方下载css文件-->    <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />    <!--Ext2.0官方下载ext-base.js文件-->    <script src="ExtJs/ext-base.js" type="text/javascript"></script>    <!--Ext2.0官方下载ext-all.js文件-->    <script src="ExtJs/ext-all.js" type="text/javascript"></script>    <script type="text/javascript" language="javascript">        //IE9必须加上此段代码        if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment) {            Range.prototype.createContextualFragment = function (html) {                var frag = document.createDocumentFragment(),                div = document.createElement("div");                frag.appendChild(div);                div.outerHTML = html;                return frag;            };        }        //加载事件        Ext.onReady(function () {            var store = new Ext.data.JsonStore({                url: 'users.json', //后缀名为json的文件                root: 'users',     //读取里面的users对象                fields: ['Name', 'No', 'Age', 'Address'] //读取里面的属性            });            store.load({                callback: function (rs, op, c) {                    //循环读取users.json文件里面的users对象                    for (var i = 0; i < rs.length; i++) {                        alert("编号："+rs[i].get("No")+"\n姓名：" + rs[i].get("Name") + "\n" + "年龄：" + rs[i].get("Age")+"\n地址："+rs[i].get("Address")); //显示json数据                    }                }            });            //将json数据放到GridPanel上面            var grid = new Ext.grid.GridPanel({                store: store,//数据来源store                columns: [                    { id: 'No', header: "No", width: 200, sortable: true, dataIndex: 'No' }, //第一列                    { header: "Name", width: 120, sortable: true, dataIndex: 'Name' },       //第二列                    { header: "Age", width: 120, sortable: true, dataIndex: 'Age' },         //第三列                    { header: "Address", width: 120, sortable: true, dataIndex: 'Address' }  //第四列                ], viewConfig: { forceFit: true },                sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),                width: 600,                height: 300,                frame: true,                title: 'GridPanel显示json数据',                iconCls: 'icon-grid',                renderTo: "showJson" //呈现在showJson层中            });        });    </script> </head><body>    <form id="form1" runat="server">    <div id="showJson">      </div>    </form></body></html>

//users.json文件

{users:[{No:'1001',Name:'张三',Age:'18',Address:'深圳罗湖'},{No:'1002',Name:'李四',Age:'22',Address:'深圳福田'},{No:'1003',Name:'王五',Age:'21',Address:'深圳宝安'}],rows:'3'}

预览效果如下：