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();
	
});