extjs5学习笔记之grid panel

懒人一只  直接贴代码算了

createGridPanel : function(url, height, pageSize) {
		//var sm = new Ext.grid.CheckboxSelectionModel();
		if (!pageSize)
			pageSize = 10;
		var model = Ext.define('Product', { // 数据解析 以后可做成工厂模式
			extend : 'Ext.data.Model',
			idProperty : 'productid',
			fields : [ {
				name : 'productname',
				type : 'string'
			}, {
				name : 'listprice',
				type : 'string'
			}, {
				name : 'productid',
				type : 'string'
			} ]
		});

		var store = Ext.create('Ext.data.Store', {
			model : model,
			pageSize : pageSize,
			pruneModifiedRecords: true ,//修改行验证
			proxy : {
				type : 'ajax',
				url : url,
				reader : {
					type : 'json',
				}
			},
			autoLoad : true
		});
		
		//var sm = new Ext.selection.CheckboxModel(); 
		
		var gridPanel = new Ext.create('Ext.grid.Panel', {
			//xtype : 'gridpanel',
			id :'grid',
			store : store,
			selModel:  Ext.create('Ext.selection.CheckboxModel', { //设置每行带有checkbox框
            	checkOnly:false
            }),
            selType: 'rowmodel', //可编辑模式
            plugins: [
                Ext.create('Ext.grid.plugin.RowEditing', {
                    clicksToEdit: 2  //点击两次出现编辑框
                })
            ],
            autoEncode: true, //提交时是否自动编码 
			columns : [  //editor :可以是json  也可以是string 表示双击出现的编辑框类型
			    // sm,	//checkbox
	 	        { header: '商品ID',  dataIndex: 'productid',align:'center'},
     	        { header: '商品名称', dataIndex: 'productname', flex: 1,align:'center',editor: 'textfield'},
     	        { header: '价格', dataIndex: 'listprice',align:'center',editor: 'textfield' }
	 	    ],
			columnLines : true,
			autoScroll : true,
			height : height * 0.89,
			tbar : [
			{
				xtype:'button',
				text:'添加一行',
				icon: "images/edit_add.png",
				cls: "x-btn-text-icon" ,
				handler:function(){
					myjs.addDateForWindow(gridPanel);
				}
				
			},
			{
				xtype:'button',
				text:'删除多行',
				icon: "images/edit_remove.png",
				cls: "x-btn-text-icon" ,
				handler:function(){
					var selected = gridPanel.getSelectionModel().getSelection();
					if(selected==null||selected.length<1){
						Ext.Msg.alert("hint","请选择一行数据再进行删除！");
						return;
					}
					else{
						Ext.Msg.confirm("警告","确定要删除该数据吗？",function(flag){
							if(flag=="yes"){
								for(var i = 0;i<selected.length;i++)
									store.remove(selected[i]);
								Ext.Msg.alert("hint","删除成功！");
							}
						});
					}
				}
				
				
			},
			{
				xtype:'button',
				text:'编辑一行',
				icon: "images/pencil.png",
				cls: "x-btn-text-icon" ,
				handler:function(){
					var selected = gridPanel.getSelectionModel().getSelection();
					var lastIndex = selected.length-1;
					if(selected==null||selected.length<1){
						Ext.Msg.alert("hint","请选择一行数据再进行删除！");
						return;
					}
					myjs.addDateForWindow(gridPanel,selected[lastIndex].getData(),function(){
						gridPanel.getSelectionModel().clearSelections(); //清除所有选择行
						var form = Ext.getCmp("form");
						var id = form.getForm().findField("id").getValue();
						var name = form.getForm().findField("name").getValue();
						var price = form.getForm().findField("price").getValue();;
						selected[lastIndex].set("productid",id);
						selected[lastIndex].set("productname",name);
						selected[lastIndex].set("listprice",price);
						selected[lastIndex].commit();
						Ext.getCmp("window").close();
						Ext.Msg.alert("hint","修改成功！");
						
					});
					
				}
				
				
			}
			],
			bbar : new Ext.PagingToolbar({
				store : store,
				pageSize : 10,
				displayInfo : true,
				/*
				 * listeners : { beforechange: function(event,page,eOpts){ } },
				 */
				displayMsg : '本页显示第{0}条到第{1}条的记录，一共 {2} 条。',
				emptyMsg : '没有记录'
			}),
			listeners:{
				edit:function(editor,obj){
					var moddifyObj = store.getAt(obj.rowIdx).getData();//获得被修改的一行数据
					Ext.Msg.alert("hint","成功修改一行数据！被修改的数据ID为："+moddifyObj.productid);
					/*Ext.Ajax.request({   //发送Ajax请求到数据库修改数据
						url: '_action.php?action=edit',  
						params: "json":moddifyObj
					});*/  
				}
			}
		// layout:'fit',
		}) ;
		
		return gridPanel;
	}