Ext -- 让人惊喜的data.srtoe的loadData

在写Ajax程序时，假如我们的布局如下：

+-------------------------+

|                                   |

|    数据列表区Grid            |

|                                    |

+-------------------------+

|                                     |

|    数据展示/编辑区            |

|                                    |

+-------------------------+ 

如果我们增加一条记录，如何让列表也增加移行呢？从服务器读取？不太合理，当然是js操作Grid是最好的，可是当我们使用Ext.GridPanel时 怎么办呢？使用grid.dom肯定是得不偿失的；让人意想不到的时我们可以通过操作grid.store来实现操作，有点类似Delphi的数据库程 序，(在Delphi中我们给Dataset增加一条记录，那么与其相关的展示数据的DBGrid会自动显示新增的数据）。

如下例所示：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
     < link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css" >
     < script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="../ext-all.js" ></ script >


< META  NAME ="Generator"  CONTENT ="EditPlus" >
< META  NAME ="Author"  CONTENT ="" >
< META  NAME ="Keywords"  CONTENT ="" >
< META  NAME ="Description"  CONTENT ="" >
</ HEAD >

< BODY >

< script >


//  -----------  GRID -----------------
var  myData  =  [
    [ ' Apple ' , 29.89 , 0.24 , 0.81 , ' 9/1 12:00am ' ],  
    [ ' Ext ' , 83.81 , 0.28 , 0.34 , ' 9/12 12:00am ' ],  
    [ ' Google ' , 71.72 , 0.02 , 0.03 , ' 10/1 12:00am ' ],  
    [ ' Microsoft ' , 52.55 , 0.01 , 0.02 , ' 7/4 12:00am ' ],  
    [ ' Yahoo! ' , 29.01 , 0.42 , 1.47 , ' 5/22 12:00am ' ]
    ];    

var  myReader  =   new  Ext.data.ArrayReader({},
[{name:  ' company ' },  
{name:  ' price ' , type:  ' float ' },  
{name:  ' change ' , type:  ' float ' },  
{name:  ' pctChange ' , type:  ' float ' },  
{name:  ' lastChange ' , type:  ' date ' , dateFormat:  ' n/j h:ia ' }
]);  

var  ds  =   new  Ext.data.Store({
        data: myData,
        reader: myReader
        });

var  grid  =   new  Ext.grid.GridPanel({
 store: ds, 
 columns: [{header:  " Company " , width:  120 , sortable:  true , dataIndex:  ' company ' },   
  {header:  " Price " , width:  90 , sortable:  true , dataIndex:  ' price ' },   
  {header:  " Change " , width:  90 , sortable:  true , dataIndex:  ' change ' },   
  {header:  " % Change " , width:  90 , sortable:  true , dataIndex:  ' pctChange ' },   
  {header:  " Last Updated " , width:  120 , sortable:  true , renderer: Ext.util.Format.dateRenderer( ' m/d/Y ' ),                          dataIndex:  ' lastChange ' }
 ],  
 viewConfig: {
  forceFit:  true
 },  
 title:  ' My First Grid ' ,  
 width:  500 ,  
 frame:  true
});

Ext.onReady( function () {
 grid.render( ' content ' );
});


function  addr()
{   //  下面就是为Grid新增一行的代码
  var  rd  =  [[ ' 苹果 ' , 29.89 , 0.24 , 0.81 , '' ]];   //  这是数据格式，必须与myData一样才行
 ds.loadData(rd,  true );    //  第二个参数如果为false，则会清空ds的数据后再追加，
}
</ script >

< div  id =content ></ div >
< input  type =button  value ="增加"  onclick ="addr()" >
</ BODY >
</ HTML >

如果把这项功能能用于从服务器获取数据，那么实现ComboBox联动就容易了，呵呵，用到的时候再试吧!

转载于:https://www.cnblogs.com/dotjava/articles/1264959.html