ExtJs4入门之八: 补充Grid组件中columns数据格式

1.m层

Ext.define("RT.model.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 },
	        //==>补充数据类型
	        { name : "isSome" , type : "string" , sortable : true },//boolean
	        { name : "birthday" , type : "date" , sortable : true },//Date
	        { name : "income" , type : "int" , sortable : true },//浮点
	        
	]
});

2.v层

		//表头
		columns : [
		   {text:"userId" , dataIndex : "userId" ,width:"5%"},//dataIndex类会去寻找Store类或者对应Model中的键值
	       {text:"name" , dataIndex : "name" ,width:"10%" },
	       {text:"age" , dataIndex : "age" ,width:"10%",
	          	field:{xtype : "textfield", allowBlank:false}
	       },
	       //==>col_Action
	       {
	    	   text:"Action" ,  xtype:"actioncolumn" ,id:"delcol",
	    	   iconCls:"table_delete" , width:"5%"
	    	   /*放到控制层,handler:function( grid , row  ,col )
	    	   {
	    		   alert("row==>"+row+"_col==>"+col);
	    	   }*/
	       },
	       //==>temp组装数据(比如隐藏数据的组装)
	       {
	    	   text:"描述" , xtype:"templatecolumn",
	    	   tpl:"姓名:{name},年龄{age}"//{}对应dataIndex
	       },
	       //==>数据类型补充
	       { //==>1.boolean  { name : "isSome" , type : "string" , sortable : true },
	    	   text:"isSomeThing" , 
	    	   width:"10%",
	    	   dataIndex : "isSome" ,
	    	   xtype:"booleancolumn",
	    	   trueText:"是", 
	    	   falseText:"否"
	       },
	       { //==>2.Date { name : "birthday" , type : "date" , sortable : true }
	    	   text:"birthday",
	    	   width:"20%",
	    	   dataIndex : "birthday" ,
	    	   xtype:"datecolumn",
	    	   format:"Y年m月d日"
	       },
	       { //==>3.number  { name : "income" , type : "int" , sortable : true },
	    	   text:"income" , 
	    	   width:"30%",
	    	   dataIndex : "income" ,
	    	   xtype:"numbercolumn",
	    	   format:"0.0"
	       },
	       //==>4.表格行号
	       Ext.create("Ext.grid.RowNumberer",{}),
	       //==>5.自定义绘制列
	       {
	    	   text:"male" , dataIndex : "male" ,width:"10%", id:"male",
	    	   renderer : function( value )
	    	   {
	    		   if( value)//==>相当于!=null , != undefined
	    		  {
		    		   if( value == 'M' )
		    		   {
		    			   return "<span style='color:green'>男</span>";
		    		   }
		    		   else if( value == 'F' )
		    		   {
		    				   return "女";
		    		   }
	    		   }
	    	   }
	       },
		],

3.json数据

<%  
  	response.setCharacterEncoding("UTF-8");  
    response.getWriter().write( "{'total':2 ,'users':[{ 'userId':1, 'name':'rt涛' , 'age':24 ,'male':'M','isSome':true,'birthday':'1989-03-07','income':123456789} , { 'userId':2,'name':'kk' , 'age':24 ,'male':'F','isSome':false,'birthday':'1989-03-21','income':9876543210}  ]}" );           
%>