Ext Grit动态加载xml数据_videosgritjs-优快云博客

本文链接：https://blog.youkuaiyun.com/weoln/article/details/2649325

本文介绍如何使用ExtJS框架结合Java后端技术来创建一个动态资源列表。通过ExtJS的GridPanel组件展示从Java后端获取的数据，并利用HttpProxy和XmlReader组件进行数据交互与解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码：

Ext.onReady(function(){

    //创建数据存储
    var ds = new Ext.data.Store({
        //用http装载数据
        proxy: new Ext.data.HttpProxy({url: &apos;/globalresource/resource/controller/ResourceListServlet?index=ajax&fcuuid=&ccuuid=&apos;}),
        
        // 读取xml的reader
        reader: new Ext.data.XmlReader({
               //记录的root节点
               record: &apos;Result&apos;,
               id: &apos;id&apos;,
               totalRecords: &apos;Results&apos;
           }, 
		 [
		      {check: &apos;check&apos;, mapping: &apos;check&apos;},   
			   &apos;name&apos;,         
			   &apos;version&apos;,      
			   &apos;verder&apos;,      
			   &apos;entity&apos;,      
			   &apos;updatetime&apos;    
		])
    });
   
    // 创建grid
    var grid = new Ext.grid.GridPanel({
	    store: ds,
	    columns: [
	      	  {header: "选择", width: 120, dataIndex: &apos;check&apos;, sortable: true},
              {header: "资源名称", width: 120, dataIndex: &apos;name&apos;, sortable: true},
              {header: "版本", width: 120, dataIndex: &apos;version&apos;, sortable: true},
              {header: "提供者", width: 120, dataIndex: &apos;verder&apos;, sortable: true},
              {header: "资源实体", width: 120, dataIndex: &apos;entity&apos;, sortable: true},
              {header: "最后修改时间", width: 156, dataIndex: &apos;updatetime&apos;, sortable: true}
	    ],
	    renderTo:&apos;mytable&apos;,
	    width:756,
	    height:300
	});
	//加载数据
    ds.load();
});

java后台源码：

	
         String jsonStr = "21edf4c8-11b102e9390-d569d317a12498478070499d85d97cfbtt1ttedf4c8-11b102e9390-d569d317a12498478070499d85d97cfb2008-07-1111:33:522edf4c8-11b103ed5ac-d569d317a12498478070499d85d97cfbwww.sina.com.cn3.0icssedf4c8-11b103ed5ac-d569d317a12498478070499d85d97cfb2008-07-1111:51:38";
	
	response.setContentType("text/xml; charset=UTF-8");
	response.setHeader("Cache-Control", "no-cache");
	Writer out = response.getWriter();
	out.write(jsonStr);
	out.flush();
	out.close();