ExtJs4入门之六: Grid组件简单示例

一:假数据+简单表格演示

var data=[
	           [1,'EasyJWeb', 'EasyJF','www.easyjf.com'],
	           [2,'jfox', 'huihoo','www.huihoo.org'],
	           [3,'jdon', 'jdon','www.jdon.com'],
	           [4,'springside', 'springside','www.springside.org.cn'] 
	  ];
	  var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
	  var grid=new Ext.grid.GridPanel({
	  renderTo:"gridbox",
	  title:"中国Java开源产品及团队",
	  height:150,
	  width:600,
	  columns:[{header:"项目名称",dataIndex:"name"},
	  {header:"开发团队",dataIndex:"organization"},
	  {header:"网址",dataIndex:"homepage"}],
	  store:store,
	  autoExpandColumn:2
	  });

二:简单的数据交互

1.表格js

Ext.onReady(function(){
	 
	//表格编辑插件 
	var cellEditor = Ext.create("Ext.grid.plugin.CellEditing",{
		clicksToEdit :2
	});
	
	Ext.QuickTips.init();//浮动提示
	var grid  = Ext.create("Ext.grid.Panel",{
		title : "Grid测试",
		renderTo : "divId",//渲染的锚点
		width : 600,
		height: 300,
		frame : true,//面板边框
		forceFit : true,//横行的拉抻
		//表头
		columns : [
		   {text:"userId" , dataIndex : "userId" ,width:"10%"},//dataIndex类会去寻找Store类或者对应Model中的键值
           {text:"name" , dataIndex : "name" ,width:"30%" },
           {text:"age" , dataIndex : "age" ,width:"30%",
           	field:{xtype : "textfield", allowBlank:false}
           },
           {text:"male" , dataIndex : "male" ,width:"10%"}
		],
		//获取M层指定的数据集合
		store : Ext.data.StoreManager.lookup("store_user"),
		//表头按钮数组
		tbar:[
			{ xtype:"button" , text:"添加" , iconCls:"table_add"},
			{ xtype:"button" , text:"删除" , handler:grid_delete},
			{ xtype:"button" , text:"修改" },
			{ xtype:"button" , text:"刷新" },
		],
		//组件集
		dockedItems:[
			//分页组件要和store挂钩, 否则是灰色的
			{ xtype:"pagingtoolbar" , dock:"bottom" , displayInfo:true,  store:Ext.data.StoreManager.lookup("store_user")}
		],
		//选择方式, 还有rowmodel,cellmodel什么的
		selType:'checkboxmodel',
		//多选框
		multiSelect:true,
		//可编辑的plugin插件
		plugins:[
			cellEditor
		]
	});
	
	
	
	//操作函数
	function grid_delete(btnObj)
	{
		//alert("==>grid_delete()"+btnObj.text);
		//按钮对象的父对象是工具条, 再父级才是所属表格
		var gird = btnObj.ownerCt.ownerCt;
		var dataArray = gird.getSelectionModel().getSelection();
		if( 0 == dataArray.length )
		{
			Ext.Msg.alert("提示","至少要选择一条数据");
		}
		else
		{
			var ids = [];
			$.each(dataArray , function(i,model){
				//alert( model.get("name") );//model.data.name
				ids.push( model.get("userId") );
			});
			
			Ext.Ajax.request({  
		        url:"extDemo/fakeData.jsp",
		        params:{'ids':ids},  
		        method:"POST",  
		        timeout:3000,//请求超时时间3秒   
		        success:function( response , options){  
		            //alert("==>成功" + response.responseText +"__" + options);  
		        	var store = gird.getStore();
		        	//成功后删除数据 , 还从dataArray拿值
		        	$.each(dataArray , function(i,model){
						store.remove(model);//store类的删除一个model
					});
		        },  
		        failure:function( response , options){  
		            alert("==>失败" + response.responseText +"__" + options);  
		        }  
		    });  
		}//end if else	
	}//end of function
});

2.所需Model的js

Ext.onReady(function(){
	
	//模型类
	Ext.define("User" ,{
		extend : "Ext.data.Model",
		fields:[
				{ name : "userId" , type : "int" , sortable : true },
		        { name : "name" , type : "string" , sortable : true },
		        { name : "age" , type : "int" , sortable : true },
		        { name : "male" , type : "string" , sortable : true }
		]
	});
	
	//实例化对象
	var user = Ext.create("User",{});
	
	//数据集合
	Ext.create("Ext.data.Store",{
		model : User,
		storeId : "store_user",//创建id,供组件调用
		autoLoad:true,//不自动加载的话就拿不到数据
		proxy:{
			type : "ajax",
			url: "extDemo/fakeData.jsp",
			reader:{
				type:"json",
				root:"users",
			},
			writer:{
				type:"json",
				
			}
		}
	})
	
});

3.模拟后台action

<%@ page language="java"  contentType="text/html" pageEncoding="UTF-8"%>  
<%@ page  import="java.lang.*" %>   
<%@ page  import="java.util.*" %>    
  
<%  
	//==>http://localhost:8080/ExtJs4_Demo/extDemo/fakeData.jsp
  	/*     */
    String param = request.getParameter("ids"); 
    if( null != param)
    { 
    	System.out.println("==>"+param);  
  	}
    
  	response.setCharacterEncoding("UTF-8");  
    response.getWriter().write( "{'total':2 ,'users':[{ 'userId':1, 'name':'rt涛' , 'age':24 ,'male':'M'} , { 'userId':2,'name':'kk' , 'age':24 ,'male':'F'}  ]}" );           
%> 

4.表格图标的样式文件

.table_add
{
	background-image:url(/ExtJs4_Demo/images/img/add_24x24.png)!important;
}