1. <html> 
    2.  
         
  2.     <head> 
    3.  
         
  3.         <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
    4.  
         
  4.         <title>03.grid</title> 
    5.  
         
  5.         <link rel="stylesheet" type="text/css" href="../ext-3.1.1/resources/css/ext-all.css" /> 
    6.  
         
  6.         <script type="text/javascript" src="../ext-3.1.1/adapter/ext/ext-base.js"></script> 
    7.  
         
  7.         <script type="text/javascript" src="../ext-3.1.1/ext-all.js"></script> 
    8.  
         
  8.         <script type="text/javascript"> 
    9.  
         
  9. Ext.data.Store.prototype.applySort = function() {//重写applySort方法，使支持按中文首字母排序 
    10.  
         
  10.     if (this.sortInfo && !this.remoteSort) { 
    11.  
         
  11.         var s = this.sortInfo, f = s.field; 
    12.  
         
  12.         var st = this.fields.get(f).sortType; 
    13.  
         
  13.         var fn = function(r1, r2) { 
    14.  
         
  14.             var v1 = st(r1.data[f]), v2 = st(r2.data[f]); 
    15.  
         
  15.             if (typeof(v1) == "string") { 
    16.  
         
  16.                 return v1.localeCompare(v2); 
    17.  
         
  17.             } 
    18.  
         
  18.             return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0); 
    19.  
         
  19.         }; 
    20.  
         
  20.         this.data.sort(s.direction, fn); 
    21.  
         
  21.         if(this.snapshot && this.snapshot != this.data) { 
    22.  
         
  22.             this.snapshot.sort(s.direction, fn); 
    23.  
         
  23.         } 
    24.  
         
  24.     } 
    25.  
         
  25. }; 
    26.  
         
  26.  
    27.  
         
  27.  
    28.  
         
  28. Ext.onReady(function(){ 
    29.  
         
  29.  
    30.  
         
  30.     var cm = new Ext.grid.ColumnModel([ 
    31.  
         
  31.         {header:'编号',dataIndex:'id',sortable:true,width:35}, 
    32.  
         
  32.         {header:'名称',dataIndex:'name',sortable:true,width:80}, 
    33.  
         
  33.         {id:'descn',header:'描述',dataIndex:'descn',sortable:true,width:200} 
    34.  
         
  34.     ]); 
    35.  
         
  35.  
    36.  
         
  36.     var data = [ 
    37.  
         
  37.         ['1','啊','descn1'], 
    38.  
         
  38.         ['2','啵','descn2'], 
    39.  
         
  39.         ['3','呲','descn3'], 
    40.  
         
  40.         ['4','嘚','descn4'], 
    41.  
         
  41.         ['5','咯','descn5'] 
    42.  
         
  42.     ]; 
    43.  
         
  43.  
    44.  
         
  44.     var store = new Ext.data.Store({ 
    45.  
         
  45.         proxy: new Ext.data.MemoryProxy(data), 
    46.  
         
  46.         reader: new Ext.data.ArrayReader({}, [ 
    47.  
         
  47.             {name: 'id'}, 
    48.  
         
  48.             {name: 'name'}, 
    49.  
         
  49.             {name: 'descn'} 
    50.  
         
  50.         ]), 
    51.  
         
  51.         sortInfo: {field: "name", direction: "ASC"} 
    52.  
         
  52.     }); 
    53.  
         
  53.     store.load(); 
    54.  
         
  54.  
    55.  
         
  55.     var grid = new Ext.grid.GridPanel({ 
    56.  
         
  56.         autoHeight: true, 
    57.  
         
  57.         renderTo: 'grid', 
    58.  
         
  58.         store: store, 
    59.  
         
  59.         cm: cm, 
    60.  
         
  60.         autoExpandColumn: 'descn' 
    61.  
         
  61.     }); 
    62.  
         
  62.  
    63.  
         
  63. }); 
    64.  
         
  64.         </script> 
    65.  
         
  65.     </head> 
    66.  
         
  66.     <body> 
    67.  
         
  67.         <script type="text/javascript" src="../examples.js"></script> 
    68.  
         
  68.         <div id="grid"></div> 
    69.  
         
  69.     </body> 
    70.  
         
  70. </html> 
    71.