Extjs 中的GridPanel学习例子一
Ext.onReady(function(){ //var sm=new Ext.grid.CheckboxSelectionModel();//sm身兼两职,既要放到cm里,也要放到GridPanel里//列模型var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),//行号 //sm,{header:'编号',dataIndex:'id',width:40,sortable:true},//sortable设定该列具有排序的功能{header:'名称',dataIndex:'name',width:80},{header:'描述',dataIndex:'descn',width:200,editor:new Ext.form.TextField({ allowBlank:false})},{header:'选项',dataIndex:'choose',width:80,renderer:renderChoose}]);//针对'choose'的值进行渲染的方法function renderChoose(value){//renderer是负责渲染的属性if(value=="n"){ return "<span style='color:red;'>N</span>"}else{ return "<span style='color:blue;'>Y</span>"}}//数据 JSON类型var data=[ ['1','name1','descn1','n'], ['2','name2','descn2','y'], ['3','name3','descn3','n'], ['4','name4','descn4','y'], ['5','name5','descn5','n'], ['6','name6','descn6','n'], ['7','name7','descn7','n'], ['8','name8','descn8','n'], ['9','name9','descn9','n'], ['10','name10','descn10','n'], ['11','name11','descn11','n'], ['12','name12','descn12','n'], ['13','name13','descn13','n'], ['14','name14','descn14','n'], ['15','name15','descn15','n'], ['16','name16','descn16','n'], ['17','name17','descn17','n'], ['18','name18','descn18','n'], ['19','name19','descn19','n'], ['20','name20','descn20','n']];//store是数据存储对象,负责把各种类型的数据,转化为适合Grid的数据var store=new Ext.data.Store({//proxy:获取数据的方式 //reader:解析数据proxy:new Ext.data.MemoryProxy(data),reader:new Ext.data.ArrayReader({},[ {name:'id'},//mapping可以不写 {name:'name'}, {name:'descn'}, {name:'choose'}])});var grid=new Ext.grid.EditorGridPanel({ renderTo:'myid',store:store,width:450,height:130,loadMask:true,cm:cm,//sm:sm,bbar:new Ext.PagingToolbar({ pageSize:5, store:store, displayInfo:true}),viewConfig:{ forceFit:true//设置为true的时候,可以使列自动填满//autoExpandColumn:'descn'}});store.load();});?