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}  ]}" );
%>