ExtJS grid

自己调调看，没有问题

grid-simple.js:

 

Ext.onReady(function(){
 
 var fields = ["id","name","email","sex","age"];
// var data = [
//  ["1","langsin1","langsin@langsin.com","0","20"],
//  ["2","langsin2","langsin@langsin.com","0","22"],
//  ["3","langsin3","langsin@langsin.com","0","21"],
//  ["4","langsin4","langsin@langsin.com","0","23"],
//  ["5","langsin5","langsin@langsin.com","0","241"]];
  
// var data = {
//  metaData:{
//   totalProperty:"total",
//   root:"xx",
//   fields:["id","name","email","sex","age"]
//  },
//  total:100,
//  xx:[{
//   id:"1",
//   name:"langsin1",
//   email:"langsin@langsin.com",
//   sex:"0",
//   age:"20"
//  },{
//   id:"2",
//   name:"langsin2",
//   email:"langsin@langsin.com",
//   sex:"0",
//   age:"21"
//  },{
//   id:"3",
//   name:"langsin3",
//   email:"langsin@langsin.com",
//   sex:"0",
//   age:"22"
//  },{
//   id:"4",
//   name:"langsin4",
//   email:"langsin@langsin.com",
//   sex:"0",
//   age:"23"
//  },{
//   id:"5",
//   name:"langsin5",
//   email:"langsin@langsin.com",
//   sex:"0",
//   age:"24"
// }]};
// var store = new Ext.data.Store({
//  url:"user/grid-data.js",
//  reader:new Ext.data.JsonReader({})
// });
// store.load();
 
 var store = new Ext.data.Store({
  autoLoad:true,
//  url:"user/grid-data.xml",
  proxy:new Ext.data.HttpProxy({url: "user/grid-data.xml"}),
  reader:new Ext.data.XmlReader({id:"id",record:"row",totalRecords:"total"},fields)
 });
// store.load();
 
 var cm = new Ext.grid.ColumnModel([{
  header:"id",
  dataIndex:"id"
 },{
  header:"email",
  dataIndex:"email"
 },{
  header:"姓名",
  dataIndex:"name"
 },{
  header:"性别",
  dataIndex:"sex"
 },{
  header:"年龄",
  dataIndex:"age"
 }]);
 
 var grid = new Ext.grid.GridPanel({
  title:"grid列表显示示例",
  width:600,
  height:300,
  cm:cm,
  store:store
 });
 grid.render(Ext.getBody());
});

 

 

 

 

 

grid-data.xml:

<?xml version="1.0" encoding="utf-8"?>
<dataset>
 <total>100</total>
 <row>
  <id>1</id>
  <name>langsin1</name>
  <email>langsin@langsin.com</email>
  <sex>0</sex>
  <age>20</age>
 </row>
 <row>
  <id>2</id>
  <name>langsin2</name>
  <email>langsin@langsin.com</email>
  <sex>0</sex>
  <age>21</age>
 </row>
 <row>
  <id>3</id>
  <name>langsin3</name>
  <email>langsin@langsin.com</email>
  <sex>0</sex>
  <age>22</age>
 </row>
 <row>
  <id>4</id>
  <name>langsin4</name>
  <email>langsin@langsin.com</email>
  <sex>0</sex>
  <age>20</age>
 </row>
 <row>
  <id>5</id>
  <name>langsin5</name>
  <email>langsin@langsin.com</email>
  <sex>0</sex>
  <age>24</age>
 </row>
</dataset>

 

 

 

grid-data.js:

{
 metaData:{
  totalProperty:"total",
  root:"xx",
  fields:["id","name","email","sex","age"]
 },
 total:100,
 xx:[{
  id:"1",
  name:"langsin1",
  email:"langsin@langsin.com",
  sex:"0",
  age:"20"
 },{
  id:"2",
  name:"langsin2",
  email:"langsin@langsin.com",
  sex:"0",
  age:"21"
 },{
  id:"3",
  name:"langsin3",
  email:"langsin@langsin.com",
  sex:"0",
  age:"22"
 },{
  id:"4",
  name:"langsin4",
  email:"langsin@langsin.com",
  sex:"0",
  age:"23"
 },{
  id:"5",
  name:"langsin5",
  email:"langsin@langsin.com",
  sex:"0",
  age:"24"
 }]
}

 

 

 

 

 

index.jsp:

<link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
 <script type="text/javascript" src="scripts/ext/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="scripts/ext/ext-all.js"></script>
 <script type="text/javascript" src="user/grid-simple.js"></script>