ExtJs_Grid

< script   type = "text/javascript" >
Ext.onReady( function (){
     var  date=[
              [1, "EasyJweb" , "EasyJF" , "www.easyjf.com" ],
              [2, "jfox" , "huihoo" , "www.huihoo.org" ],
              [3, "jdon" , "jdon" , "www.jdon.com" ],
              [4, "springside" , "springside" , "www.springside.org.cn" ],
              ];         //定义数据
    var  store =  new  Ext.data.SimpleStore({data:date,fields:[ "id" , "name" , "organization" , "homepage" ]});         //定义在columns中引用的名称，需要和date当中的数据顺序保持一致
    var  gird =  new  Ext.grid.GridPanel({         //声明一个GridPanel
        renderTo: "btn" ,
        title: "中国java开发" ,
        height:150,
        width:600,
        columns:[
                 
                 {header: "序号" ,dataIndex: "id" },                     //header表头名称,dateIndex元素内容和store中定义的fields一致
                 {header: "项目名称" ,dataIndex: "name" },
                 {header: "开发团队" ,dataIndex: "organization" },
                 {header: "网址" ,dataIndex: "homepage" },
                 ],
    store:store,             //给定数据源
    autoExpandColumn:2
    });
}); </ script >

效果：

 

来自为知笔记(Wiz)