ExtJs ArrayGrid简单例子

来源：互联网发布：桃花源记mac 编辑：程序博客网时间：2024/05/22 08:04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="css/ext-all.css" /><script type="text/javascript" src="js/ext-base.js"></script><script type="text/javascript" src="js/ext-all-debug.js"></script><script type="text/javascript"> Ext.onReady(function(){ function sexChange(val){ if(val=="男")  {   return '<span style="color:green">'+val+'</span>';  }else  { return '<span style="color:red">'+val+'</span>';  } }   function ageChange(val){ if(val>20)  {   return '<span style="color:green">'+val+'</span>';  }else  { return '<span style="color:red">'+val+'</span>';  } }  var myData=[['张三','男',20, 90],              ['刘思','女',24, 45],  ['齐硫','男',18, 95]]; var cm =new  Ext.grid.ColumnModel([{id:'name',header:'name',dataIndex:'name'},                                {header:'sex',width:75,sortable:true,renderer:sexChange,dataIndex:'sex'},{header:'age',width:75,sortable:true,renderer:ageChange,dataIndex:'age'},{header:'score',width:75,sortable:true,dataIndex:'score'}]); var store = new Ext.data.ArrayStore({       fields:[{name:'name'},{name:'sex'},{name:'age'},{name:'score'}]  });store.loadData(myData); var grid = new Ext.grid.GridPanel({ cm:cm, store:store, width:700, height:600, autoExpandColumn:'name', title:'Array-Grid', renderTo:'my-grid' }); });</script></head><body><div id="my-grid"></div></body></html>