extJS 创建表格 grid.Pane

grid.Panel	columns	tbar	dockedItems
第一列文本居中	第二列文本居右	Ext.window.Window	控制组件位置,buttom

		var grid = Ext.create("Ext.grid.Panel", {
			title : '列表页1111',// 标题
			frame : true,// 面板渲染，使表格更加饱满
			// forceFit : true,//自动填充panel空白处
			width : 700,
			height : 550,
			columns : [ // 列模式
			{
						text : "主键",
						dataIndex : 'id',
						width : 100
					},// text列名，表头信息
					{
						text : "姓名",
						dataIndex : 'name',
						width : 100
					},// text列名，表头信息
					{
						text : "性别",
						dataIndex : 'sex',
						width : 100
					},// dataIndex从store/model中找到相应的记录
					{
						text : "生日",
						dataIndex : 'birth',
						width : 350,
						// 重构列模式
						field : {
							xtype : 'textfield',// 编辑方式
							allowBlank : false
							//
						}
					}// dataIndex从store/model中找到相应的记录
			],
			tbar : [
					// 这个地方iconCls是一些图标组件，大家可以自行添加
					{
				xtype : 'button',
				text : '添加',
				iconCls : 'fa fa-plus',
				handler : function(o) {

					// 点击添加按钮的事件，创建一个添加数据表单，添加数据提交并刷新table的store
					// 设置标题
					AddDialog.setTitle("添加数据");
					// 重置表单内容
					AddForm.form.reset();
					// 显示组件 addDailog-->的add组件
					// Ext.getCmp("btnAdd").show();
					// 显示组件
					// Ext.getCmp("pName").hide();
					// 显示组件addForm
					// Ext.getCmp("bName").hide();
					// 显示窗口或者说弹出窗口
					AddDialog.show();

				}
			}, {
				xtype : 'button',
				text : '删除',
				iconCls : 'table_remove',
				handler : function(o) {
					// var gird = o.findParentByType("gridpanel");
					var gird = o.ownerCt.ownerCt;// ownerCt是拥有这个组件的组件
					var data = gird.getSelectionModel().getSelection();
					// getSelectionModel得到Ext.selection.Model对象，得到选择模式
					// Ext.selection.Model中有getSelection方法得到选中对象的数组
					if (data.length == 0) {
						Ext.Msg.alert("提示", "您最少要选择一条数据");
					} else {
						// 1.先得到ID的数据(name)
						var st = gird.getStore();// 得到store
						var ids = [];
						Ext.Array.each(data, function(record) {
									ids.push(record.get('id'));
								})
						// 2.后台操作(delete)
						Ext.Ajax.request({
									url : _ctx + '/user/batchDelete.action',
									params : {
										ids : ids.join(",")
									},
									method : 'POST',
									timeout : 2000,// 延迟显示
									success : function(response, opts) {
										var respText = response.responseText;
										if (respText.indexOf('成功') != -1) {
											Ext.Array.each(data, function(
															record) {
														st.remove(record);
													})
										}
										Ext.Msg.alert("提示", respText);
									}
								})
						// 3.前端操作DOM进行删除(ExtJs)
					}
				}
			}, {
				xtype : 'button',
				text : '修改',
				iconCls : 'table_edit',
				handler : function(o) {
					var gird = o.ownerCt.ownerCt;
					var data = gird.getSelectionModel().getSelection();
					// getSelectionModel得到Ext.selection.Model对象，得到选择模式
					// Ext.selection.Model中有getSelection方法得到选中对象的数组
					if (data.length != 1) {
						Ext.Msg.alert("提示", "您必须要选择一条数据");
					} else {
						var record = data[0];

						// 点击修改
						// 点击添加按钮的事件，创建一个添加数据表单，添加数据提交并刷新table的store
						// 设置标题
						AddDialog.setTitle("添加数据");
						// 重置表单内容
						AddForm.form.reset();
						// 显示组件 addDailog-->的add组件
						Ext.getCmp("btnAdd").show();
						// 显示组件
						Ext.getCmp("text_id").setValue(record.get('id'));
						Ext.getCmp("text_name").setValue(record.get('name'));
						Ext.getCmp("text_sex").setValue(record.get('sex'));
						Ext.getCmp("text_birth").setValue(record.get('birth'));
						// 显示窗口或者说弹出窗口
						AddDialog.show();
					}

				}
			}, {
				xtype : 'textfield',
				id : 'KeyWord'
			}, {
				text : '搜索',
				handler : function(o) {
					var gird = o.ownerCt.ownerCt;// ownerCt是拥有这个组件的组件
					var st = gird.getStore();// 得到store
					var searchParam=Ext.getCmp("KeyWord").getValue();
					
					st.load({
						params:{
							name : searchParam
						}
					});
					//Ext.Ajax.request({
					//			url : _ctx + '/user/search.action',
						//		params : {
						//			    searchParam : searchParam
						//		},
						//		method : 'POST',
						//		timeout : 2000,// 延迟显示
							//	success : function(response, opts) {
						//			var respText = response.responseText;

							//		Ext.Msg.alert("提示", respText);
						//		}
						//	})
				}
			}
			// {
			// xtype:'button',
			// text:'查看',
			// iconCls:'table_comm',
			// handler:function(o){
			// //点击事件
			// }
			// }
			],
			dockedItems : [{// 控制组件在什么位置，随便定位
				xtype : 'pagingtoolbar',// 分页组件
				store : Ext.data.StoreManager.lookup('s_user'),// 分页也跟数据、挂钩
				dock : 'bottom',// 位置
				displayInfo : true
			}],
			plugins : [// Ext 4.0用的是 插件的形式来和form表单配合使用的
			Ext.create("Ext.grid.plugin.CellEditing", {
						clicksToEdit : 1
					})],
			selType : 'checkboxmodel',// 设定选择模式，前边会加选择框
			multiSelect : true,// 运行多选
			renderTo : 'gridDiv',// 把这个组件渲染到一个div上
			store : Ext.data.StoreManager.lookup('s_user')
				// 通过StoreManager读取数据
			});