這是一個關于dwr和使用ext進行編輯的例子,ext初搞，頭大.感覺ext學習起來有些麻煩
bean類
package table;
import java.util.Date;
public class ExtBean {
private String common;
private String light;
private float price; // automatic date conversions
private Date availDate;
private boolean indoor;
public ExtBean() {
}
public ExtBean(String common, String light, float price, Date availDate, boolean indoor) {
this.common = common;
this.light = light;
this.price = price;
this.availDate = availDate;
this.indoor = indoor;
}
public Date getAvailDate() {
return availDate;
}
public void setAvailDate(Date availDate) {
this.availDate = availDate;
}
public String getCommon() {
return common;
}
public void setCommon(String common) {
this.common = common;
}
public boolean isIndoor() {
return indoor;
}
public void setIndoor(boolean indoor) {
this.indoor = indoor;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
public String getLight() {
return light;
}
public void setLight(String light) {
this.light = light;
}
}
dwr處理類:
package table;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import org.apache.log4j.Logger;
public class ExtBeanModel {
private static Logger logger = Logger.getLogger(ExtBeanModel.class.getName());
public ExtBeanModel() {
// TODO Auto-generated constructor stub
}
public String save(List<ExtBean> extBeans) throws Exception{
logger.debug("start");
for(Iterator<ExtBean> it = extBeans.iterator(); it.hasNext();){
ExtBean extBean = it.next();
System.out.println(extBean.getCommon() + " "
+ extBean.getLight()+" "
+ extBean.getAvailDate()+ " " + extBean.getPrice() + " "
+ extBean.isIndoor());
}
return "ok";
}
public List<ExtBean> getExtBeans(){
List<ExtBean> extList = new ArrayList<ExtBean>();
ExtBean ext1 = new ExtBean("Erythronium","測試1",9.6F,new Date(),false);
ExtBean ext2 = new ExtBean("Erythronium2","測試2",9.6F,new Date(),true);
extList.add(ext1);
extList.add(ext2);
return extList;
}
}
dwr的配置文件dwr.xml
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="extModel">
<param name="class" value="table.ExtBeanModel" />
</create>
<convert match="table.ExtBean" converter="bean"></convert>
</allow>
<signatures>
<![CDATA[
import java.util.List;
import table.ExtBean;
import table.ExtBeanModel;
ExtBeanModel.save(List<ExtBean>);
]]>
</signatures>
</dwr>
jsp頁面:
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/interface/extModel.js'> </script>
<script>
//dwr回調方法 保存數據
function save(record){
var objArray = new Array();
//把ext的Record[]數組轉換成 js對象數組
for(ix = 0 ; ix < record.length;ix++){
var tmp = record[ix];
var obj={
common:tmp.get('common'),
light:tmp.get('light'),
price:tmp.get('price'),
availDate:tmp.get('availDate'),
inddor:tmp.get('inddor')
};
objArray[ix]=obj;
}
extModel.save(objArray,addItemCb);
}
function addItemCb(data)
{
if (data != null )
{
alert("ok");
}
else
{
alert("failure");
}
}
</script>
</head>
<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;
// 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',
width: 100,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "明亮度",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "價格",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "使用時間",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
}
]);
// by default columns are sortable
cm.defaultSortable = true;
// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var extBean = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);
// create the Data Store
var store = new Ext.data.JsonStore({
// load using HTTP
autoLoad:false,
fields: ['common', 'light', 'price', 'avaiDate','indoor'],
sortInfo:{field:'common', direction:'ASC'}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
clicksToEdit:1,
tbar: [{
text: '增加',
handler : function(){
var p = new extBean({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
},
{
//保存數據
text: '保存',
handler : function(){
//取得datasource對象 然后返回修改行的記錄對象Record[]數組
var record = grid.getStore().getModifiedRecords();
// : Ext.data.Record[]
save(record);
}
}]
});
extModel.getExtBeans(extBeanArray);
function extBeanArray(data){
for(var ix = 0; ix < data.length;ix++){
var tmp = data[ix];
var p = new extBean({
common: tmp.common,
light: tmp.light,
price: tmp.price,
availDate: tmp.availDate,
indoor: tmp.inddor
});
store.insert(ix, p);
}
}
store.load();
});
</script>
<select name="light" id="light" style="display: none;">
<option value="Shade測試">shade測試</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>
</body>
</html>