Extjs 一个 Grid demo

代码如下：

Ext.onReady(function(){
	//alert('center');
	
	Ext.define('user',{
		extend:'Ext.data.Model',
		fields:['name','email']
	});
	
	var Gstore = Ext.create('Ext.data.Store', {
	    //storeId:'user',
	    model:'user',
	    data:[
	        { 'name': 'Lisa',  "email":"lisa@simpsons.com"},
	        { 'name': 'Bart',  "email":"bart@simpsons.com"},
	        { 'name': 'Homer', "email":"home@simpsons.com"},
	        { 'name': 'Marge', "email":"marge@simpsons.com"}
	    ]
//	    proxy: {
//	        type: 'memory',
//	        reader: {
//	            type: 'json',
//	            root: 'items'
//	        }
//	    }
	});
	
	Ext.create('Ext.grid.Panel',{
		//title:'add',
		store: Gstore,//Ext.data.StoreManager.lookup('user'),
		columns:[{text:'name',dataIndex: 'name'},
		         {text:'email',dataIndex: 'email',
		         //为达到可编辑的目的  列模式要重构  这里举着一个为例
//					field:{
//						xtype:''
//					}
				editor: 'textfield'
		         }
		        ],
		selType: 'checkboxmodel', // checkbox 复选框
		multiSelect : true,//控制可以多选
		height: 400,
		width: '100%',
		frame:true,//让Grid 有个边框（饱满一些）
		forceFit:true,//让columns栏充满整个宽度
		//draggable: true,
		
		tbar:[{xtype:'button', text:'Add'},'-',
		      {xtype:'button', text:'Delete', handler:function(b){
		    	  
		    	  	/*向上得到父控件方法
		    	  	 * 1.通过findParentByType('gridpanel')方法
		    	  	 * 2.通过ownerCt属性
		    	  	 */
					//var grid=b.findParentByType('gridpanel');
					var grid=b.ownerCt.ownerCt;
					/*下面得到被选中的行
					 * 1.用上面的grid调用getSelectionModel()得到该grid的选择模式  将返回一个Ext.selection.Model
					 * 2.然后调用该Ext.selection.Model的.getSelection()方法得到一个Ext.data.Model[]
					 * 此时被选中的行已经被得到了
					 */
					var sel=grid.getSelectionModel().getSelection();
					if(sel.length == 0){
						alert('you should choose one');
					}else{
						//下面做简单删除
						var store=grid.getStore();
						Ext.Array.each(sel,function(record){
							store.remove(record);
						});
					}
					}},'-',
		      {xtype:'button', text:'Edit'}
		      ],
		dockedItems:[
		             {xtype: 'pagingtoolbar', //翻页工具条
		              dock: 'bottom'  // 置于底部  （用bottom）
		             }
		],
		/*让每一行可编辑  
		 *用plugins配置Ext.grid.plugin.CellEditing插件，
		 *然后列模式要重构
		*/
		plugins: [
		          Ext.create('Ext.grid.plugin.CellEditing', {
		              clicksToEdit: 2
		          })
		      ],         
		renderTo: Ext.getBody()
	});
	
	//alert('aaaaaa');
});