Ext Grid 独孤九剑-第六式

<% @ page contentType = " text/html;charset=UTF-8 " %>
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8"   />
         < title > onReady </ title >
         < link  rel ="stylesheet"  type ="text/css"
            href ="/ext/resources/css/ext-all.css"   />
         < script  type ="text/javascript"  src ="/ext/adapter/ext/ext-base.js" ></ script >
         < script  type ="text/javascript"  src ="/ext/ext-all.js" ></ script >
         < script >  
         function  a()
        {
             function  renderSex(value) {
                 if  (value  ==  'boy') {
                     return   " <span style='color:red;font-weight:bold;'>男</span> " ;
                }  else  {
                     return   " <span style='color:green;font-weight:bold;'>女</span> " ;
                }
            }
             var  sm  =   new  Ext.grid.CheckboxSelectionModel();
             var  cm  =   new  Ext.grid.ColumnModel(
                [
                     new  Ext.grid.RowNumberer(),
                    sm,
                    {header:'编号',dataIndex:'id',width: 80 ,sortable: true },
                    {header:'名称',dataIndex:'name',width: 80 },
                    {header:'性别',dataIndex:'sex',renderer:renderSex},
                    {header:'日期',dataIndex:'date',width: 100 ,renderer: Ext.util.Format.dateRenderer('Y年m月d日')},
                    {header:'描述',dataIndex:'descn',width: 200 }
                ]);
            alert(cm);
             var  data  =  [
                [' 1 ','name1','girl',' 1970 - 01 - 15T02: 58 : 04 ','descn1'],
                [' 2 ','name2','boy',' 1970 - 01 - 15T02: 58 : 04 ','descn2'],
                [' 3 ','name3','girl',' 1970 - 01 - 15T02: 58 : 04 ','descn3'],
                [' 4 ','name4','girl',' 1970 - 01 - 15T02: 58 : 04 ','descn4'],
                [' 5 ','name5','boy',' 1970 - 01 - 15T02: 58 : 04 ','descn5']
            ];
            alert(data);
             var  ds  =   new  Ext.data.Store({
                proxy:  new  Ext.data.MemoryProxy(data),
                reader:  new  Ext.data.ArrayReader({}, [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'sex'},
                    {name: 'date', type:'date',dateFormat:'Y - m - dTH:i:s'},
                    {name: 'descn'}
                ])
            });
            ds.load();
    
             var  grid  =   new  Ext.grid.GridPanel({
                el: 'grid',
                ds: ds,
                cm: cm,
                sm: sm,
                autoExpandColumn:  6 ,
                bbar:  new  Ext.PagingToolbar({
                    pageSize:  10 ,
                    store: ds,
                    displayInfo:  true ,
                    displayMsg: '显示第 { 0 } 条到 { 1 } 条记录，一共 { 2 } 条',
                    emptyMsg:  " 没有记录 "
                })
            });
            grid.render();
        }
        Ext.onReady(a); 
         </ script >
     </ head >
     < body >
         < div  id ="grid" ></ div >
     </ body >
</ html >