Ext3.0学习笔记xmlReader

 html代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>xml解析器</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
  Ext.onReady(function(){
	var myRecord = Ext.data.Record.create([
	  {name:"id"},
	  {name:"title"},
	  {name:"username",mapping:"author"},
	  {name:"loginTimes",type:"int"}
	]);
	
	var myReader = new Ext.data.XmlReader({
	  totalRecords:"results",
	  record:"row",
	  id:"id"
	},myRecord);
	/*var myReader = new Ext.data.XmlReader({
	  record:"row"
	},["id","title","author","loginTimes"]);*/
	
	var store = new Ext.data.Store({
	  //proxy: new Ext.data.HttpProxy({url: 'hello.xml'}),
	  url:"hello.xml",
	  reader:myReader
	});
	
	store.load();
	
	var sm = new Ext.grid.CheckboxSelectionModel();
	
	var cm = new Ext.grid.ColumnModel([
	  sm,
	  {header:"编号",width:90,sortable:true,dataIndex:"id"},
	  {header:"标题",width:90,sortable:true,dataIndex:"title"},
	  {header: "作者", width: 100, sortable: true, dataIndex: 'username'}, 
	  {header: "登录次数", width: 90, sortable: true, dataIndex: 'loginTimes'}
	]);
	
	var grid = new Ext.grid.GridPanel({
	  renderTo:"hello",
	  width:400,
	  height:150,
	  cm:cm,
	  ds:store,
	  sm:sm
	});
	
	grid.render();
  });
</script>
</head>

<body>
<div id="hello" style="position:absolute;left:100px;">&nbsp;</div>

</body>
</html>

 

xml代码:

<topics>
  <results>2</results>
  <row>
    <id>1</id>
	<title>测试</title>
	<author>小王</author>
	<loginTimes>3</loginTimes>
  </row>
  <row>
    <id>2</id>
	<title>新年好</title>
	<author>williamraym</author>
	<loginTimes>13</loginTimes>
  </row>
</topics>

 

运行结果:


Ext3.0学习笔记xmlReader
 

如果myReader使用

var myReader = new Ext.data.XmlReader({
	  record:"row"
	},["id","title","author","loginTimes"]);*/

 时,下方“作者”的dataIndex的值也应相应地改为"author".

你可能感兴趣的:(JavaScript,xml,css,XHTML,ext)