Extjs 4 grid 简单示例

grid:

Ext.onReady(function() {
			Ext.Loader.setConfig({
						enabled : true
					});
			var grid = Ext.create("Ext.grid.Panel", {
						id:'grid_s',
						title : 'grid simple',
						width : 800,
						height : 400,
						renderTo : 'gridDiv',//渲染到某个div
						columns : [{
									title : 'name',
									dataIndex : 'name'//对应model里的fields的name
								}, {
									title : 'age',
									dataIndex : 'age'
								}, {
									title : 'email',
									dataIndex : 'email'
								}],
						store : Ext.data.StoreManager.lookup('g_store'),
						frame : true,//是否有边框
						forceFit : true,//是否自动填满表格
						multiSelect:true,//是否可选多条记录
						selType:'checkboxmodel',//设置选择模式 见Ext.selection包
						tbar : [{
									xtype : 'button',
									text : '增加'
								}, {
									xtype : 'button',
									text : '修改'
								}, {
									xtype : 'button',
									text : '删除',
									handler:function(o,e){
										//得到grid
										var grid1=o.findParentByType('grid');
										var sModel=grid1.getSelectionModel();//得到选择模型
										var selectedModels=sModel.getSelection();//得到选择的Ext。data。Model
										var names=[];
										Ext.each(selectedModels,function(model){
											names.push(model.get('name'));
										});
										//访问后台
										//如果后台返回成功则移除
										Ext.getCmp('grid_s').getStore().remove(selectedModels);
									}
					
								}],
						dockedItems:[{//停驻条目 
							dock:'bottom',//悬停方位 可是上、下、左、右 任意一个
							xtype:'pagingtoolbar',//分页工具栏
							store:Ext.data.StoreManager.lookup('g_store'),//根据storeid查找store
							displayInfo:true //显示 deisplayMsg
						}]
					});
		});

 

Model：

Ext.define("user", {
			extend : 'Ext.data.Model',
			fields : [{
						name : 'name',
						type : 'string'
					}, {
						name : 'age',
						type : 'int'
					}, {
						name : 'email',
						type : 'string'
					}],
			proxy : {
				type : 'ajax',//后台加载
				url : 'lesson11.jsp',
				reader : {
					type : 'json',
					root : 'storeData'
				}
			}
		});
Ext.create("Ext.data.Store", {
			model : 'user',
			autoLoad : true,
			storeId:'g_store'
		});