日期:2014-05-16 浏览次数:20570 次
Ext.onReady(function(){
    
    //定义数据结构
    var fields = ["id","name","email","sex","age"];
    //定义数据
    //1.数组
//    var data = [
//        ["1","Troy1","TroyYoung@mwords.com","0","20"],
//        ["2","Troy2","TroyYoung@mwords.com","1","21"],
//        ["3","Troy3","TroyYoung@mwords.com","1","22"],
//        ["4","Troy4","TroyYoung@mwords.com","0","23"],
//        ["5","Troy5","TroyYoung@mwords.com","0","24"]
//    ];
    //2.json数据
    var data = {result:[
        {id:"1",name:"Troy1",email:"TroyYoung@mwords.com",sex:"0",age:"20"},
        {id:"2",name:"Troy2",email:"TroyYoung@mwords.com",sex:"0",age:"21"},
        {id:"3",name:"Troy3",email:"TroyYoung@mwords.com",sex:"0",age:"22"},
        {id:"4",name:"Troy4",email:"TroyYoung@mwords.com",sex:"0",age:"23"},
        {id:"5",name:"Troy5",email:"TroyYoung@mwords.com",sex:"0",age:"24"}
        ]};
    
    //数据与数据结构的映射格式
//    //1.将数据结构和数据组合
//    var store = new  Ext.data.SimpleStore({
//        fields:fields,
//        data:data
//    });
    //2.使用数组数据解析器
//    var store = new Ext.data.Store({
//        data:data,
//        reader:new Ext.data.ArrayReader({id:"id"},fields)
//    });
    //3.使用json数据解析器
//    var store = new Ext.data.Store({
//        data:data,
//        reader:new Ext.data.JsonReader({id:"id",root:"result"},fields)
//    });
    //4.使用jsonStore
    var store = new Ext.data.JsonStore({
        id:"id",
        data:data,
        fields:fields,
        root:"result"
    });
    //定义表头
    var cm = new Ext.grid.ColumnModel([
        {header:"id",dataIndex:"id"},
        {header:"姓名",dataIndex:"name"},
        {header:"Email",dataIndex:"email"},
        {header:"性别",dataIndex:"sex"},
        {header:"年龄",dataIndex:"age"}
        ]);
        
    //定义GridPanel
    var grid = new Ext.grid.GridPanel({
        title:"Grid数据列表显示",
        width:600,
        autoHeight:true,
        cm:cm,
        store:store
    });
    
    //显示数据
    grid.render(Ext.getBody());
});