ASP.NET+Extjs2.0读取xml文件显示在GridPanel面板上_怎么提取xml文件做展示面板-CSDN博客

本文链接：https://blog.csdn.net/LMAOhuaNL/article/details/6798950

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReaderXmlData.aspx.cs" Inherits="ReaderXmlData" %>

<!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>
    <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJs/ext-base.js" type="text/javascript"></script>
    <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 MyRecord = Ext.data.Record.create([
		   { name: 'id' },
		   { name: 'name' },
		   { name: 'sex' },
           { name: 'age' },
           { name: 'address' }
		  ]);
            var myReader = new Ext.data.XmlReader({//读取的xml文件
                totalRecords: "results", //总records
                record: "row", //row标签
                id: 'id'       //id标签
            }, MyRecord);
            var myProxy = new Ext.data.HttpProxy({
                url: 'XMLFile.xml', //xml文件
                success: function () {
                    //Ext.Msg.alert("提示", "成功了");
                },
                failure: function () {
                    Ext.Msg.alert("提示", "下载数据失败"); //失败提示
                }
            });
            //这里类似读取json数据方式
            var mystore = new Ext.data.Store({
                proxy: myProxy,
                reader: myReader
            });
            var colM = new Ext.grid.ColumnModel([
                       { header: "UserId", dataIndex: "id", sortable: true },//sortable排序
		               { header: "UserName", dataIndex: "name", sortable: true },
		               { header: "UserSex", dataIndex: "sex", sortable: true },
                       { header: "UserAge", dataIndex: "age", sortable: true },
                       { header: "UserAddress", dataIndex: "address", sortable: true },
			]);

            var grid = new Ext.grid.GridPanel({
                renderTo: "showXmlData",
                title: "将读取的xml文件显示在GridPanel上",
                height: 200,
                width: 600,
                cm: colM,   //显示各个列
                store: mystore,//数据源来自mystore
                autoExpandColumn: 2
            });
            mystore.load(); //加载

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="showXmlData">
    </div>
    </form>
</body>
</html>

//XMLFile.xml文件

<?xml version="1.0" encoding="utf-8" ?>
<dataset>
  <results>2</results>
  <row>
    <id>1</id>
    <name>张三</name>
    <age>18</age>
    <sex>男</sex>
    <address>深圳南山</address>
  </row>
  <row>
    <id>2</id>
    <name>李四</name>
    <age>22</age>
    <sex>男</sex>
    <address>深圳福田</address>
  </row>
</dataset>

效果预览如下：