Ext -- 让人惊喜的data.srtoe的loadData
在写Ajax程序时，假如我们的布局如下：
+-------------------------+
|
|
|
+-------------------------+
|
|
|
+-------------------------+
如果我们增加一条记录，如何让列表也增加移行呢？从服务器读取？不太合理，当然是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联动就容易了，呵呵，用到的时候再试吧!
