学步园

Fixed Sorting Table (Ext)
<link rel="stylesheet" type="text/css" href="${base}/extjs3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="${base}/extjs3/ux/css/LockingGridView.css" />

<script type="text/javascript" src="${base}/extjs3/ext-base.js"></script>
<script type="text/javascript" src="${base}/extjs3/ext-all.js"></script>

<script type="text/javascript" src="${base}/extjs3/ux/LockingGridView.js"></script>

<table>

<tr>
  <center><div id="grid"></div></center>
 </tr>
</table>

<script type="text/javascript">
  var dataStr;
  getJSON("${base}/ajax/loadELogSheet.action",
   function(msg){
    dataStr = msg;
   },false);
  Ext.onReady(function(){
   var cm = new Ext.ux.grid.LockingColumnModel([
    {header:'LOTID',dataIndex:'LOTID', sortable: true, locked: true},
   ... ...
    {header:'TRACKOUT_FOUPID',dataIndex:'TRACKOUT_FOUPID', sortable: true},
    {header:'BATCHID',dataIndex:'BATCHID', sortable: true}
   ]);
   //JsonData
   var data = {
    'LIST': dataStr
   }
   //ds使用的MemoryProxy对象和JsonReader对象
   var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.JsonReader({root: 'LIST'}, [
     {name: 'LOTID'},
    ... ...      
     {name: 'BATCHID'}
    ])
   });
   ds.load();
   var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    stripeRows: true,
    height: table_height,
    width: table_width,
    title: 'E-LogSheet',
    view: new Ext.ux.grid.LockingGridView()
    });
    grid.render();
  })
}
</script>