在写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 >
< 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联动就容易了,呵呵,用到的时候再试吧!