Extd第一个gridPanel小程序

这个小程序中包含了很多的参数配置和一些细节问题：仔细看看方便以后浏览熟悉一下语法

mode.js

//User类
Ext.define("user",{                   //基本上定义一个类用的是define，定义一个对象用create实现的
	extend:"Ext.data.Model",          //这个类基本上是都是继承Ext.data.Model的，含有一个fields,可以理解为数据库中的表
	fields:[
		{name:'name',type:'string',sortable:true},
		{name:'age',type:'int',sortable:true},
		{name:'email',type:'string',sortable:true}
	]
});
//User对象
var user = Ext.create("user",{});                  //声明一个对象
Ext.create("Ext.data.Store",{                      //这个对象是一个Ext.data.Store,实际上是用来存储数据的
	model:'user',                                  //一般情况下是一个代理，数据从后台取
	storeId:'s_user',
	proxy:{
		type:'ajax',
		url:'/extjs/extjs!getUserList.action',
		reader:{
			type:'json',
			root:'topics'
		},
		writer:{
			type:'json'
		}
	},
	autoLoad:true
});

结合：01gridDemo.js

(function(){
	Ext.onReady(function(){
		Ext.QuickTips.init();
		//穿件表格时候要 用表格的面板
		var grid = Ext.create("Ext.grid.Panel",{
			title : 'Grid Demo',//标题
			frame : true,//面板渲染
			//forceFit : true,//自动填充panel空白处
			width : 600,
			height: 280,
			columns : [ //列模式
				{text:"Name",dataIndex:'name',width:100},
				{text:"age",dataIndex:'age',width:100},
				{text:"email",dataIndex:'email',width:350,
					field:{                    //设置一个列模式，这样才能结合后边内容，让该列可编辑
						xtype:'textfield',
						allowBlank:false        //一个验证的选项
					}
				}
			],
			tbar :[
				{xtype:'button',text:'添加',iconCls:'table_add'},
				{xtype:'button',text:'删除',iconCls:'table_remove',
					handler:function(o){
						//var gird = o.findParentByType("gridpanel");
						var gird = o.ownerCt.ownerCt; //得到父级元素的父级元素【button的父级元素是toolbar，toolbar的父级元素师gridpanel】
						var data = gird.getSelectionModel().getSelection();
						if(data.length == 0){
							Ext.Msg.alert("提示","您最少要选择一条数据");
						}else{
							//1.先得到所有ID的数据(name)
							var st = gird.getStore();
							var ids = [];
							Ext.Array.each(data,function(record){
								ids.push(record.get('name'));
							})
							//2.后台操作(delet)
							Ext.Ajax.request({
								url:'/extjs/extjs!deleteData.action',
								params:{ids:ids.join(",")},//利用ajax将id传递到后台，
								                           //这里的join()函数也要注意，将Array变成字符串串起来
								method:'POST',
								timeout:2000,
								success:function(response,opts){
									Ext.Array.each(data,function(record){
										st.remove(record);     //Ext.data.Store里面有个remove()方法，删除数据
									})
								}
							})
							//3.前端操作DOM进行删除(ExtJs)
						}
					}
				  },
				{xtype:'button',text:'修改',iconCls:'table_edit'},
				{xtype:'button',text:'查看',iconCls:'table_comm'}
			],
			dockedItems :[{
				xtype:'pagingtoolbar',
				store:Ext.data.StoreManager.lookup('s_user'),
				dock:'bottom',                  //设置放置的位置
				displayInfo:true
			}],
			plugins:[                           //以插件的形式实现一些功能
				Ext.create("Ext.grid.plugin.CellEditing",{         //可编辑的插件
					clicksToEdit : 1            //单击多少下才能可编辑
				})
			],
			selType:'checkboxmodel',//设定选择模式 默认的是单选
			multiSelect:true,//运行多选
			renderTo :'gridDemo',
			store : Ext.data.StoreManager.lookup('s_user')
		});
	});
})();

分析帮助理解一下：

首先看看User.js

1）有一个User类，它是一个Model，有一个fields参数：实际上市数据库中表的意思。

2）有一个User对象，它是一个Store，用来存储数据的，但是这个store数据时从哪里来的呢？store必须基于proxy，然后type:ajax       url:'/extjs/extjs!getUserList.action',,在后台通过JSON格式取出数据，Reader，将取出来的数据写到Model中；最后通过writer以JSON的格式格式响应到前台。

注意：这里指定了 model:'user', 指定是基于哪个：Model，

                                storeId:'s_user',让前台可以通过：01gridDemo.js中的store : Ext.data.StoreManager.lookup('s_user')绑定这个数据。

关于01gridDemo.js中的参数，代码中写得非常清楚了，仔细研读。