Extjs GridPanel使用攻略简单教程

<!--
	Title:GridPanel 使用方案简单教程
	Author:Lovingshu(Mr Samael)
	Date:2012/07/27
	Remark:Use simple way to work with EXTJS
-->
Extjs中功能强大的组件太多了~GridPanel就是其中一个,写一个简单的教程实现GridPanel数据的加载...
CODES:
//这个是必须的~不然~你F5按坏了它都不会鸟你
Ext.onReady(function(){
	//得到ColumnModel对象,设定里面需要初始化的列及相关属性(*特别注意:是ColumnModel([])而不是ColumnModel(),中间记得加中括号!丫的~忘记了就等着把F5按坏吧)
	var colModel=new Ext.grid.ColumnModel([
		new Ext.grid.RowNumberer({
			header:"ID",
			width:20
		}),
		{header:"User Name",dataIndex:"USERNAME",sortable:true},
		//renderer这个方法我靠~~了不得~今天要不是看到韦少演示~哟西~我还不知道有这个方法~用了的人都说好
		{header:"User Pwd",dataIndex:"USERPWD",renderer:"function(value){value='';return '******';}"},
		{header:"User Remark",dataIndex:"USERREMARK"}
	]);

	//列的对象有了接下来就是的到数据了~Store是Extjs中不可缺少的组件,很强悍的对象,具体的可以参考帮助文档,在这里谢谢脚本娃娃整理的帮助文档~
	var store=new Ext.data.Store({
		url:"XXXX",//对应数据加载的路径,会通过ajax方式进行访问
		reader:new Ext.data.JsonReader({
			root:"",//JSON中对应的节点位置
			fields:["USERID","USERNAME","USERPWD","USERREMARK"]//JSON格式中对应的key
		}),
		autoLoad:true//是否需要自动加载数据~默认为false
	});

	//如果需要分页的话您还需要创建分页对象Pagingbar,记住是Ext.PagingToolbar,其中还有很多属性,具体参考帮助文档
	var pBar=new Ext.PagingToolbar({
		store:store
	});

	//最重要的来了~~~GridPanel~主角登场了~gridPanel就是把前面我们的东西全部整合的容器
	var gridPanle=new Ext.grid.GridPanel({
		title:"标题",
		cm:colModel,
		store:store,
		bbar:pBar,
		autoWidth:true,
		autoHeight:true,
		renderTo:""//需要放入该组件的容器的ID
	});
});

CODES FINISH~
写完了~希望有帮助...

<!--
	Author:Lovingshu's Forever
	Remark:Guys~You're the best!
-->