/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/Ext.onReady(function(){
Ext.QuickTips.init(); var fm = Ext.form;
function t()
{
}
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "第一列",
dataIndex: 'common',
align: 'center',
width: 150,
editor: new fm.TextField({
allowBlank: false,
listeners:{
'blur' : {
fn:t,
scope: this,
delay: 100
}
}
})
},{
header: "第二列",
dataIndex: 'light',
width: 150,
align: 'center',
editor: new fm.TextField({
typeAhead: true,
triggerAction: 'all', displayField:'state',
mode: 'local',
triggerAction: 'all',
selectOnFocus:true })
},{
header: "第三列",
dataIndex: 'price',
width: 150,
align: 'center',
// renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "和",
dataIndex: 'availDate',
width: 100,
editor: new fm.TextField({
id:'he',
allowBlank: false
})
} ]); // by default columns are sortable
cm.defaultSortable = true; // create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'myTotals.json', // the return will be XML, so lets set up a reader
reader: new Ext.data.JsonReader({
idProperty:'common',
root:'plant',
fields:[
{name:'common',type: 'float'},
{name:'light',type: 'float'},
{name:'price',type: 'float'},
{name:'availDate',type: 'float'}
]
}), sortInfo:{field:'common', direction:'ASC'}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'Totals-Grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
clicksToEdit:1, tbar: [
{
text: 'Save',
scope:this,
handler:function()
{
alert('Save');
} }
]
});
// trigger the data store load
store.load();
grid.on("afteredit",function(field){
alert(field+"更改时触发");
var rowCount =grid.store.getCount();
var colCount = grid.getColumnModel().getColumnCount();
var view = grid.getView();
var tSum=0;
for(i=0;i<rowCount;i++)
{
var one =grid.store.data.get(i).get("common");
var two =grid.store.data.get(i).get("light");
var three =grid.store.data.get(i).get("price");
var sum=grid.store.data.get(i).get("availDate");
tSum= parseInt(one)+parseInt(two)+parseInt(three);
grid.store.data.get(i).get("availDate")==100;
}
});
});
这片代码保存为myTotals.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<link href="../ext-2.0.2-aspx-all/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="../ext-2.0.2-aspx-all/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="../ext-2.0.2-aspx-all/ext-all.js" type="text/javascript"></script> <script src="myTotals.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" action="">
</form>
<div id="Totals-Grid"></div></body>
</html>
保存为myTotals.html{plant:[
{common: '1', light: '2', price: '3', availDate: '6'},
{common: '10', light: '11', price: '12', availDate: '33'}
]}保存为myTotals.json
引入extjs包就可以运行！ 我要实现 > 列一 + 列二 + 列三 =和 ；如我的例子：1+2+3=6，当1改变为10时，结果为16.
我现在能取出他们的和，但是无法改变和的值，怎么给和赋值，能及时的改变？
希望知道的大侠能帮我解决下。
{plant:[
{common: '1', light: '2', price: '3', availDate: '6'},
{common: '10', light: '11', price: '12', availDate: '33'}]}
改变数据源的数据，然后reload下store
grid.on("afteredit",function(field){//这个参数不对,应该是e
alert(field+"更改时触发");//改成alert(e.field+"更改时触发");
var rowCount =grid.store.getCount();
var colCount = grid.getColumnModel().getColumnCount();
var view = grid.getView();
var tSum=0;
for(i=0;i<rowCount;i++)
{
var one =grid.store.data.get(i).get("common");
var two =grid.store.data.get(i).get("light");
var three =grid.store.data.get(i).get("price");
var sum=grid.store.data.get(i).get("availDate");
tSum= parseInt(one)+parseInt(two)+parseInt(three);
grid.store.data.get(i).get("availDate")==100;
}
});
如果要改变availDate的值要e.record.set("availDate","值")//改变的是本条记录的availDate
然后可以再循环store求总和
设置
grid.store.data.get(i).set("availDate", 100);
其实修改当前编辑grid的当前行record就可以了
record.set("availDate", 100);
1，3楼的 差不多！