当前位置: 代码迷 >> Web前端 >> 制造一个简单的表格
  详细解决方案

制造一个简单的表格

热度:98   发布时间:2012-10-28 09:54:44.0
制作一个简单的表格

/*制作一个简单的表格
?1.首先设置好表的列模型(列数、每列的名称、类型、如何显示、header/dataIndex,二维的)Ext.grid.ColumnModel
?2.第二,添加数据(二维数组) var data=...
?3.第三,转换原始数据,用Ext.data.Store 创建一个数据存储对象(proxy/reader),或者直接用SimpleStore
?4.用Ext.grid.GridPanel把原始数据和转换的数据装配在一起
?*/

?var colM=new Ext.grid.ColumnModel([
????{header:"编号",dataIndex:"id"},
????{header:"姓名",dataIndex:"name"},
????{header:"性别",dataIndex:"sex"},
????{header:"年龄",dataIndex:"age"},
????{header:"电邮",dataIndex:"email"},
??]);
?
?var data=[['1','wang','男','20','wang@163.com'],
????['2','wang2','男','20','wang@163.com'],
????['3','wang3','男','20','wang@163.com'],
????['4','wang4','男','20','wang@163.com'],
????['5','wang5','男','20','wang@163.com']
???? ];
?

? var store= new Ext.data.Store({

??????????????????? proxy:new Ext.data.MemoryProxy(data),
??????????????????? reader:new Ext.data.ArrayReader({},[{name:'id'},
?????????????????????? ?{name:'name'},
?????????????????????? ?{name:'sex'},

?????????????????????? ?{name:'age'},

??????????????????????? {name:'email'}

??????????????????]),
??? });
?//var store=new Ext.data.SimpleStore({data:data,fields:['id','name','sex','age','email']});
?
?
?var grid=new Ext.grid.GridPanel({
??renderTo:'test',//渲染到id为test的页面中
??title:'test',
??height:200,
??cm:colM,
??store:store,

?});

  相关解决方案