Let's Go!

extjs grid 基本练习代码

上一篇 / 下一篇 2011-04-07 18:58:37 / 个人分类：JAVA学习&编程相关

grid.js

Ext.onReady(function(){
//数据格式1：二维数组形式的数据：
var data=[[1,'EasyJWeb','EaseJF','www.baidu.com'],
        [2,'jfox','huihoo','www.jb31.com'],
        [3,'jdon','jdon','www.test.net'],
        [4,'springside','springside','tool.jb51.net']
   ] ;
var store= new Ext.data.SimpleStore({data:data,fields:['id','name','organization','homepage']}) ;

//数据格式2：一维数组，数组中的每一个元素是一个对象 ---> json串形式：
// var data=[{id:1,
//    name:'EasyJWeb',
//    organization:'EasyJF',
//    homepage:'www.baidu.com'},
//   {id:2,
//    name:'jfox',
//    organization:'huihoo',
//    homepage:'www.jb51.net'},
//   {id:3,
//    name:'jdon',
//    organization:'jdon',
//    homepage:'s.jb51.net'},
//   {id:4,
//    name:'springside',
//    organization: 'springside',
//    homepage:'tools.jb51.net'}
//   ];
//   var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});

    //数据格式3：xml格式的数据 --- xml文件为 grid1.xml
//    var store=new Ext.data.Store({
//  url:"hello.xml",    // 指定xml文件名
//  reader:new Ext.data.XmlReader({
//  record:"row"},      // 指定取数据的标签
//  ["id","name","organization","homepage"])     // 指定标签，取值
//  });

  //ColumnModel grid的列配置模板，替代columns配置项
var cm = new Ext.grid.ColumnModel([{header:'项目名称',dataIndex:'name',sortable:true},
     {header:'开发团队',dataIndex:'organization',sortable:true},
     {header:'网址',dataIndex:'homepage'}]) ;

// GridPanel 创建表格
var grid = new Ext.grid.GridPanel({
  renderTo:'grid1',
  title:'中国java开源产品团队',
  height:150,
  width:600,
//  columns:[{header:'项目名称',dataIndex:'name',sortable:true},
//     {header:'开发团队',dataIndex:'organization'},
//     {header:'网址',dataIndex:'homepage'}],
  // columns(列的定义数组)配置项被替换为cm(ColumnModel)配置项，来配置列的定义
  cm:cm,
  store:store,
  autoExpandColumn:2

});

//store.load(); 是用来加载数据

});