本人学习ext已有一段时间,将我的学习项目贴出来供大家参考
主程序参考ext官方网站的ext的window范例
main.jsp
[code]
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="org.acegisecurity.context.SecurityContext, org.acegisecurity.userdetails.UserDetails" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>House Charge Expenses System</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="utf-8" />
<meta content="all" name="robots" />
<meta name="author" content="ark"/>
<meta name="copyright" content="ark" />
<meta name="description" content="just for testing" />
<meta name="keywords" content="family,finance,study" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ajaxlib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ajaxlib/mylib/ext-patch.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/windows.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/ext/ext-lang-zh_CN.js"></script>
<!--buffalo-->
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/buffalo/prototype.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/buffalo/buffalo.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/buffaloext.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/dwrproxy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/ext-lang-zh.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/interface/houseChargeService.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/engine.js"></script>
<script language="javascript">
dwr.engine.setAsync(false);//同步
var ContextPath="<%=request.getContextPath() %>"
var END_POINT="<%=request.getContextPath() %>/bfapp";
var buffalo = new Buffalo(END_POINT,false);
</script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/buffaloext.js"></script>
<script type="text/javascript" src="desktop.js"></script>
<script type="text/javascript" src="windows.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/chargeItem.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/incomeItem.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/familyMember.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/bankAccount.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/daily/incomeDaily.js"></script>
</head>
<body>
<div id="x-taskbar">
<div id="title-bar">House Charge Expenses System</div>
<div id="logname">用户名:<strong class="username">
<%
SecurityContext context=(SecurityContext)request.getSession().getAttribute("ACEGI_SECURITY_CONTEXT");
UserDetails userDetails=(UserDetails)context.getAuthentication().getPrincipal();
out.print(userDetails.getUsername());
%>
</strong> | <a href="<%=request.getContextPath() %>/logout.html">登出</a>
</div>
<div id="x-launcher-wrap"><div id="x-launcher-inner"><div id="x-launcher-left"><div id="x-launcher-right"><div id="x-launcher-center"><div id="x-launcher"></div><div id="x-info"><ext:user-name /></div></div></div></div></div></div>
</div>
<div id="x-desktop">
</div>
<div id="x-windows">
<div id="x-winlist"><div id="spacer"></div></div>
<div class="x-clear"></div>
</div>
</body>
</html>
[/code]
windows.js
[code]
Myapp = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},
getModules : function(){
return [
new chargeItemWindow(),
new incomeItemWindow(),
new familyMemberWindow(),
new bankAccountWindow(),
new incomeDailyWindow(),
];
}
});
[/code]
familyMember.js
[code]familyMemberWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: '家庭成员',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var cm = new Ext.grid.ColumnModel([{
header: '姓名',
dataIndex: 'name',
width: 220,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank: false}))
}]);
// by default columns are sortable
cm.defaultSortable = true;
var FamilyMember = Ext.data.Record.create([
{name:'id',type:'int',mapping:'id'},
{name: 'name',type:'string',mapping: 'name'}
]);
var ds = new Ext.data.Store({
proxy: new Buffalo.Ext.DataProxy(buffalo,"houseChargeService.getAllFamilyMember",[]),
reader: new Ext.data.ArrayReader({id: 'id'}, FamilyMember),
// turn off remote sorting
remoteSort: false
});
var gridPanel = new Ext.grid.EditorGridPanel({
store: ds,
cm: cm,
selModel: new Ext.grid.CellSelectionModel(),
enableColLock:false,
buttonAlign:'top',
tbar:[{
text: '新增',
handler :doAdd
},{
text: '保存',
handler : doSave
},{
text: '删除',
handler : doDel
}]
});
var win = desktop.getWindow('familyMember-win');
if(!win){
win = desktop.createWindow({
id: 'familyMember-win',
title:'家庭成员',
width:740,
height:460,
x:10,
y:10,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: gridPanel
});
}
ds.load();
win.show();
function doAdd() {
var p = new FamilyMember({
id:-1,
name:''
});
gridPanel.stopEditing();
var yetCount=ds.getCount();
ds.insert(yetCount, p);
//标示cell已修改过
ds.getAt(yetCount).set("name",'未命名');
gridPanel.startEditing(yetCount, 0);
}
function doSave() {
var eds=ds.getModifiedRecords().slice(0);
for(var i = 0;i<eds.length;i++){
record =eds[i];
if (record.get("id")==-1) {
buffalo.remoteCall("houseChargeService.createFamilyMember",[record.get("name")],function(reply) {
var sucess = reply.getResult();
if (sucess==1) {
alert("重复姓名!");
} else {
if (sucess!=0) {
alert("保存失败!");
} else {
record.commit();
}
}
});
} else {
buffalo.remoteCall("houseChargeService.updateFamilyMember",[record.get("id"),record.get("name")],function(reply) {
var sucess = reply.getResult();
if (sucess==1) {
alert("重复姓名!");
} else {
if (sucess!=0) {
alert("保存失败!");
} else {
record.commit();
}
}
});
}
}
}
function doDel(){
if(gridPanel.selModel.hasSelection()){
Ext.MessageBox.confirm('Message', '确定删除吗?', doDelDetail);
} else {
Ext.MessageBox.alert('Error', '请选中一行!');
}
}
function doDelDetail(btn) {
if (btn == 'yes') {
var record = ds.getAt(gridPanel.selModel.getSelectedCell()[0]);
if (record.get("id")==-1) {
ds.remove(record);
} else {
buffalo.remoteCall("houseChargeService.deleteFamilyMember",[record.get("id")],function(reply) {
var sucess = reply.getResult();
if (sucess!=0) {
alert(" 删除失败!");
} else {
ds.remove(record);
}
});
}
}
}
}
});
[/code]
incomeDaily.js
[code]
incomeDailyWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: '收入日记录',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var cm = new Ext.grid.ColumnModel([
{
header: "收入项目",
sortable: true,
dataIndex: 'incomeItem_name',
width: 100
},{
header: "日期",
dataIndex: 'date',
width:60,
renderer:Ext.util.Format.dateRenderer('Y/m/d')
},{
header: "金额",
dataIndex: 'amount',
align: 'right',
width: 100
},{
header: "家庭成员",
dataIndex: 'familyMember_name',
width: 80
},{
header: "银行",
dataIndex: 'bankAccount_bank',
width: 120
},{
header: "帐号",
dataIndex: 'bankAccount_accountNo',
width: 120
},{
header:"备注",
dataIndex: 'remark',
width: 80
}]);
// by default columns are sortable
cm.defaultSortable = true;
var IncomeDaily = Ext.data.Record.create([
{name:'id',type:'int',mapping:'id'},
{name: 'incomeItem_name', type: 'string',mapping:'incomeItem.name'},
{name: 'date', type: 'date',dateFormat: 'Y/m/d',mapping:'date'},
{name: 'amount', type: 'float',mapping:'amount'},
{name: 'familyMember_name', type: 'string',mapping:'familyMember.name'},
{name: 'bankAccount_bank', type: 'string',mapping:'bankAccount.bank'},
{name: 'bankAccount_accountNo', type: 'string',mapping:'bankAccount.accountNo'},
{name: 'remark', type: 'string',mapping:'remark'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(houseChargeService.findIncomeDaily),
reader: new Ext.data.JsonReader({totalProperty:'total',root:'list',id:'id'},IncomeDaily),
remoteSort: false,
});
var gridPanel = new Ext.grid.EditorGridPanel({
ds:ds,
cm: cm,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
autoSizeColumns: true,
buttonAlign:'top',
tbar:[{
text: '新增',
handler :doAdd
},{
text: '查询',
handler : doQuery
},{
text: '删除',
handler : doDel
}],
bbar:new Ext.PagingToolbar({
pageSize: 2,
store: ds,
displayInfo: true
})
});
var win = desktop.getWindow('incomeDaily-win');
if(!win){
win = desktop.createWindow({
id: 'incomeDaily-win',
title:'收入日记录',
width:740,
height:460,
x:10,
y:10,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: gridPanel
});
}
win.show();
function doAdd() {
var allIncomeItem=[];
buffalo.remoteCall("houseChargeService.findRootIncomeItem",[], function(reply) {
getChild(reply.getResult());
function getChild(parent) {
if (parent.children.lengt==0) {
return 0;
}
for(var i=0; i<parent.children.length; i++) {
allIncomeItem.push([parent.children[i].id,parent.children[i].name]);
getChild(parent.children[i]);
}
}
});
var allFamilyMember=[];
buffalo.remoteCall("houseChargeService.getAllFamilyMember",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
allFamilyMember.push([list[i].id,list[i].name]);
}
});
var allBankAccount=[];
buffalo.remoteCall("houseChargeService.getAllBankAccount",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
if (list[i].bank=="现金") {
allBankAccount.push([list[i].id,list[i].bank]);
} else {
allBankAccount.push([list[i].id,list[i].bank+" "+list[i].accountNo+" "+list[i].cardNo]);
}
}
});
var addForm = new Ext.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
},
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: '',
//bodyStyle:'padding:5px 5px 0', ark
bodyStyle:'padding: 0',
width: 350,
labelSeparator:'',
items: [{
xtype:'combo',
fieldLabel: '家庭成员',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allFamilyMember
}),
editable: false,
hiddenName:'familyMember_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择家庭成员',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'datefield',
fieldLabel: '日期',
name: 'date',
width: 100,
allowBlank: false,
format:'Y/m/d'
}, {
xtype:'numberfield',
fieldLabel: '金额',
name: 'amount',
width: 100,
allowBlank: false,
allowNegative: false,
minValue: 0
},{
xtype:'combo',
fieldLabel: '账户',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allBankAccount
}),
editable: false,
hiddenName:'bankAccount_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择账户',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'combo',
fieldLabel: '收入项目',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allIncomeItem
}),
editable: false,
hiddenName:'incomeItem_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择收入项目',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'textfield',
fieldLabel: '备注',
name: 'remark',
width:300
}
],
buttons: [{
text: '保存',
handler:function(){
if(addForm.form.isValid()){
var my=addForm.form.getValues();
buffalo.remoteCall("houseChargeService.createIncomeDaily",[parseInt(my.incomeItem_id),Date.parseDate(my.date, "Y/m/d"),parseFloat(my.amount),parseInt(my.familyMember_id),parseInt(my.bankAccount_id),my.remark],function(reply) {
var sucess = reply.getResult();
if (sucess!=0) {
alert("保存失败!");
} else {
alert("保存成功!");
}
});
addWindow.close();
}
}
},{
text: '放弃',
handler: function(){
addWindow.close();
}
}]
});
var addWindow
if(!addWindow){
addWindow = new Ext.Window({
id: 'incomeDaily-add-win',
layout:'fit',
width:500,
height:300,
plain: true,
items:addForm
});
}
addWindow.show(this);
addForm.form.setValues({date:(new Date()).format("Y/m/d"),familyMember_id:'1',bankAccount_id:'1',incomeItem_id:'2'});
addForm.form.render();
}
function doQuery() {
var allIncomeItem=[];
buffalo.remoteCall("houseChargeService.findRootIncomeItem",[], function(reply) {
getChild(reply.getResult());
function getChild(parent) {
if (parent.children.lengt==0) {
return 0;
}
for(var i=0; i<parent.children.length; i++) {
allIncomeItem.push([parent.children[i].id,parent.children[i].name]);
getChild(parent.children[i]);
}
}
});
//alert(allIncomeItem);
var allFamilyMember=[];
buffalo.remoteCall("houseChargeService.getAllFamilyMember",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
allFamilyMember.push([list[i].id,list[i].name]);
}
});
var allBankAccount=[];
buffalo.remoteCall("houseChargeService.getAllBankAccount",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
if (list[i].bank=="现金") {
allBankAccount.push([list[i].id,list[i].bank]);
} else {
allBankAccount.push([list[i].id,list[i].bank+" "+list[i].accountNo+list[i].cardNo]);
}
}
});
var queryForm = new Ext.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
},
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: '',
//bodyStyle:'padding:5px 5px 0', ark
bodyStyle:'padding: 0',
width: 350,
labelSeparator:'',
items: [{
xtype:'fieldset',
checkboxName:'queryFamilyMember_id',
checkboxToggle:true,
title: '按家庭成员查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '家庭成员',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allFamilyMember
}),
editable: false,
hiddenName:'familyMember_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择家庭成员',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryDate',
title: '按日期查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'datefield',
fieldLabel: '日期起',
name: 'dateFrom',
width: 100,
allowBlank: false,
format:'Y/m/d'
},{
xtype:'datefield',
fieldLabel: '日期迄',
name: 'dateTo',
width: 100,
allowBlank: false,
format:'Y/m/d'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryAmount',
title: '按金额查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '运算符',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: [['<','小于'],['<=','小于等于'],['==','等于'],['>','大于'],['>=','大于等于']]
}),
editable: false,
hiddenName:'cmp_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择运算符',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'numberfield',
fieldLabel: '金额',
name: 'amount',
width: 100,
allowBlank: false,
allowNegative: false,
minValue: 0
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryBankAccount_id',
title: '按账户查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '账户',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allBankAccount
}),
editable: false,
hiddenName:'bankAccount_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择账户',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryIncomeItem_id',
title: '按收入项目查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '收入项目',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allIncomeItem
}),
editable: false,
hiddenName:'incomeItem_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择收入项目',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
}]
}
],
buttons: [{
text: '查询',
handler:function(){
if(queryForm.form.isValid()){
var my=queryForm.form.getValues();
ds.proxy.dwrParams=[my.queryFamilyMember_id=='on'?true:false,parseInt(my.familyMember_id),my.queryDate=='on'?true:false,Date.parseDate(my.dateFrom, "Y/m/d"),Date.parseDate(my.dateTo, "Y/m/d"),my.queryAmount=='on'?true:false,my.cmp_id,parseFloat(my.amount),my.queryBankAccount_id=='on'?true:false,parseInt(my.bankAccount_id),my.queryIncomeItem_id=='on'?true:false,parseInt(my.incomeItem_id)];
ds.load({params:{start:0,limit:2}});
queryWindow.close();
}
}
},{
text: '退出',
handler: function(){
queryWindow.close();
}
}]
});
var queryWindow
if(!queryWindow){
queryWindow = new Ext.Window({
id: 'incomeDaily-query-win',
layout:'fit',
width:500,
height:300,
maximizable:true,
plain: true,
items:queryForm
});
}
queryWindow.show(this);
queryForm.form.setValues({incomeItem_id:'2',dateFrom:(new Date(2007,1,1)).format("Y/m/d"),dateTo:(new Date()).format("Y/m/d"),familyMember_id:'1',bankAccount_id:'1',cmp_id:'>',amount:100,});
queryForm.form.render();
}
function doDel(){
if(gridPanel.selModel.hasSelection()){
Ext.MessageBox.confirm('Message', '确定删除吗?' , doDelDetail);
} else {
Ext.MessageBox.alert('Error', '请选中一行');
}
}
function doDelDetail(btn) {
if (btn == 'yes') {
var record =gridPanel.selModel.getSelected();
if (record.get("id")==-1) {
ds.remove(record);
} else {
buffalo.remoteCall("houseChargeService.deleteIncomeDaily",[record.get("id")],function(reply) {
var sucess = reply.getResult();
if (sucess!=0) {
alert("删除失败!");
} else {
ds.remove(record);
}
});
}
}
}
}
});
[/code]
dwrproxy.js
[code]
Ext.data.DWRProxy = function(dwrCall,dwrParams){
Ext.data.DWRProxy.superclass.constructor.call(this);
this.dwrCall = dwrCall;
this.dwrParams=dwrParams||[];
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function(params, reader, callback, scope, arg) {
var self = this;
if(this.fireEvent("beforeload", this, params) !== false) {
var delegate = this.loadResponse.createDelegate(this, [reader, callback, scope, arg], 1);
arg.params=arg.params||{};
var allParams=[arg.params.start||0,arg.params.limit||2].concat(this.dwrParams);
allParams.push(delegate);
this.dwrCall.apply(this,allParams);
} else {
callback.call(scope || this, null, arg, false);
}
},
loadResponse : function(listRange, reader, callback, scope, arg) {
var result;
try {
result = reader.readRecords(listRange);
} catch(e) {
this.fireEvent("loadexception", this, null,listRange, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
}
});
[/code]
主程序参考ext官方网站的ext的window范例
main.jsp
[code]
<%@ page contentType="text/html; charset=utf-8"%>
<%@ page import="org.acegisecurity.context.SecurityContext, org.acegisecurity.userdetails.UserDetails" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>House Charge Expenses System</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="utf-8" />
<meta content="all" name="robots" />
<meta name="author" content="ark"/>
<meta name="copyright" content="ark" />
<meta name="description" content="just for testing" />
<meta name="keywords" content="family,finance,study" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ajaxlib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ajaxlib/mylib/ext-patch.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/windows.css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/ext/ext-lang-zh_CN.js"></script>
<!--buffalo-->
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/buffalo/prototype.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/buffalo/buffalo.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/buffaloext.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/dwrproxy.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/ext-lang-zh.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/interface/houseChargeService.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/dwr/engine.js"></script>
<script language="javascript">
dwr.engine.setAsync(false);//同步
var ContextPath="<%=request.getContextPath() %>"
var END_POINT="<%=request.getContextPath() %>/bfapp";
var buffalo = new Buffalo(END_POINT,false);
</script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ajaxlib/mylib/buffaloext.js"></script>
<script type="text/javascript" src="desktop.js"></script>
<script type="text/javascript" src="windows.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/chargeItem.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/incomeItem.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/familyMember.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/steady/bankAccount.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/daily/incomeDaily.js"></script>
</head>
<body>
<div id="x-taskbar">
<div id="title-bar">House Charge Expenses System</div>
<div id="logname">用户名:<strong class="username">
<%
SecurityContext context=(SecurityContext)request.getSession().getAttribute("ACEGI_SECURITY_CONTEXT");
UserDetails userDetails=(UserDetails)context.getAuthentication().getPrincipal();
out.print(userDetails.getUsername());
%>
</strong> | <a href="<%=request.getContextPath() %>/logout.html">登出</a>
</div>
<div id="x-launcher-wrap"><div id="x-launcher-inner"><div id="x-launcher-left"><div id="x-launcher-right"><div id="x-launcher-center"><div id="x-launcher"></div><div id="x-info"><ext:user-name /></div></div></div></div></div></div>
</div>
<div id="x-desktop">
</div>
<div id="x-windows">
<div id="x-winlist"><div id="spacer"></div></div>
<div class="x-clear"></div>
</div>
</body>
</html>
[/code]
windows.js
[code]
Myapp = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},
getModules : function(){
return [
new chargeItemWindow(),
new incomeItemWindow(),
new familyMemberWindow(),
new bankAccountWindow(),
new incomeDailyWindow(),
];
}
});
[/code]
familyMember.js
[code]familyMemberWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: '家庭成员',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var cm = new Ext.grid.ColumnModel([{
header: '姓名',
dataIndex: 'name',
width: 220,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank: false}))
}]);
// by default columns are sortable
cm.defaultSortable = true;
var FamilyMember = Ext.data.Record.create([
{name:'id',type:'int',mapping:'id'},
{name: 'name',type:'string',mapping: 'name'}
]);
var ds = new Ext.data.Store({
proxy: new Buffalo.Ext.DataProxy(buffalo,"houseChargeService.getAllFamilyMember",[]),
reader: new Ext.data.ArrayReader({id: 'id'}, FamilyMember),
// turn off remote sorting
remoteSort: false
});
var gridPanel = new Ext.grid.EditorGridPanel({
store: ds,
cm: cm,
selModel: new Ext.grid.CellSelectionModel(),
enableColLock:false,
buttonAlign:'top',
tbar:[{
text: '新增',
handler :doAdd
},{
text: '保存',
handler : doSave
},{
text: '删除',
handler : doDel
}]
});
var win = desktop.getWindow('familyMember-win');
if(!win){
win = desktop.createWindow({
id: 'familyMember-win',
title:'家庭成员',
width:740,
height:460,
x:10,
y:10,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: gridPanel
});
}
ds.load();
win.show();
function doAdd() {
var p = new FamilyMember({
id:-1,
name:''
});
gridPanel.stopEditing();
var yetCount=ds.getCount();
ds.insert(yetCount, p);
//标示cell已修改过
ds.getAt(yetCount).set("name",'未命名');
gridPanel.startEditing(yetCount, 0);
}
function doSave() {
var eds=ds.getModifiedRecords().slice(0);
for(var i = 0;i<eds.length;i++){
record =eds[i];
if (record.get("id")==-1) {
buffalo.remoteCall("houseChargeService.createFamilyMember",[record.get("name")],function(reply) {
var sucess = reply.getResult();
if (sucess==1) {
alert("重复姓名!");
} else {
if (sucess!=0) {
alert("保存失败!");
} else {
record.commit();
}
}
});
} else {
buffalo.remoteCall("houseChargeService.updateFamilyMember",[record.get("id"),record.get("name")],function(reply) {
var sucess = reply.getResult();
if (sucess==1) {
alert("重复姓名!");
} else {
if (sucess!=0) {
alert("保存失败!");
} else {
record.commit();
}
}
});
}
}
}
function doDel(){
if(gridPanel.selModel.hasSelection()){
Ext.MessageBox.confirm('Message', '确定删除吗?', doDelDetail);
} else {
Ext.MessageBox.alert('Error', '请选中一行!');
}
}
function doDelDetail(btn) {
if (btn == 'yes') {
var record = ds.getAt(gridPanel.selModel.getSelectedCell()[0]);
if (record.get("id")==-1) {
ds.remove(record);
} else {
buffalo.remoteCall("houseChargeService.deleteFamilyMember",[record.get("id")],function(reply) {
var sucess = reply.getResult();
if (sucess!=0) {
alert(" 删除失败!");
} else {
ds.remove(record);
}
});
}
}
}
}
});
[/code]
incomeDaily.js
[code]
incomeDailyWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: '收入日记录',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var cm = new Ext.grid.ColumnModel([
{
header: "收入项目",
sortable: true,
dataIndex: 'incomeItem_name',
width: 100
},{
header: "日期",
dataIndex: 'date',
width:60,
renderer:Ext.util.Format.dateRenderer('Y/m/d')
},{
header: "金额",
dataIndex: 'amount',
align: 'right',
width: 100
},{
header: "家庭成员",
dataIndex: 'familyMember_name',
width: 80
},{
header: "银行",
dataIndex: 'bankAccount_bank',
width: 120
},{
header: "帐号",
dataIndex: 'bankAccount_accountNo',
width: 120
},{
header:"备注",
dataIndex: 'remark',
width: 80
}]);
// by default columns are sortable
cm.defaultSortable = true;
var IncomeDaily = Ext.data.Record.create([
{name:'id',type:'int',mapping:'id'},
{name: 'incomeItem_name', type: 'string',mapping:'incomeItem.name'},
{name: 'date', type: 'date',dateFormat: 'Y/m/d',mapping:'date'},
{name: 'amount', type: 'float',mapping:'amount'},
{name: 'familyMember_name', type: 'string',mapping:'familyMember.name'},
{name: 'bankAccount_bank', type: 'string',mapping:'bankAccount.bank'},
{name: 'bankAccount_accountNo', type: 'string',mapping:'bankAccount.accountNo'},
{name: 'remark', type: 'string',mapping:'remark'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(houseChargeService.findIncomeDaily),
reader: new Ext.data.JsonReader({totalProperty:'total',root:'list',id:'id'},IncomeDaily),
remoteSort: false,
});
var gridPanel = new Ext.grid.EditorGridPanel({
ds:ds,
cm: cm,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
autoSizeColumns: true,
buttonAlign:'top',
tbar:[{
text: '新增',
handler :doAdd
},{
text: '查询',
handler : doQuery
},{
text: '删除',
handler : doDel
}],
bbar:new Ext.PagingToolbar({
pageSize: 2,
store: ds,
displayInfo: true
})
});
var win = desktop.getWindow('incomeDaily-win');
if(!win){
win = desktop.createWindow({
id: 'incomeDaily-win',
title:'收入日记录',
width:740,
height:460,
x:10,
y:10,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: gridPanel
});
}
win.show();
function doAdd() {
var allIncomeItem=[];
buffalo.remoteCall("houseChargeService.findRootIncomeItem",[], function(reply) {
getChild(reply.getResult());
function getChild(parent) {
if (parent.children.lengt==0) {
return 0;
}
for(var i=0; i<parent.children.length; i++) {
allIncomeItem.push([parent.children[i].id,parent.children[i].name]);
getChild(parent.children[i]);
}
}
});
var allFamilyMember=[];
buffalo.remoteCall("houseChargeService.getAllFamilyMember",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
allFamilyMember.push([list[i].id,list[i].name]);
}
});
var allBankAccount=[];
buffalo.remoteCall("houseChargeService.getAllBankAccount",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
if (list[i].bank=="现金") {
allBankAccount.push([list[i].id,list[i].bank]);
} else {
allBankAccount.push([list[i].id,list[i].bank+" "+list[i].accountNo+" "+list[i].cardNo]);
}
}
});
var addForm = new Ext.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
},
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: '',
//bodyStyle:'padding:5px 5px 0', ark
bodyStyle:'padding: 0',
width: 350,
labelSeparator:'',
items: [{
xtype:'combo',
fieldLabel: '家庭成员',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allFamilyMember
}),
editable: false,
hiddenName:'familyMember_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择家庭成员',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'datefield',
fieldLabel: '日期',
name: 'date',
width: 100,
allowBlank: false,
format:'Y/m/d'
}, {
xtype:'numberfield',
fieldLabel: '金额',
name: 'amount',
width: 100,
allowBlank: false,
allowNegative: false,
minValue: 0
},{
xtype:'combo',
fieldLabel: '账户',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allBankAccount
}),
editable: false,
hiddenName:'bankAccount_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择账户',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'combo',
fieldLabel: '收入项目',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allIncomeItem
}),
editable: false,
hiddenName:'incomeItem_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择收入项目',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'textfield',
fieldLabel: '备注',
name: 'remark',
width:300
}
],
buttons: [{
text: '保存',
handler:function(){
if(addForm.form.isValid()){
var my=addForm.form.getValues();
buffalo.remoteCall("houseChargeService.createIncomeDaily",[parseInt(my.incomeItem_id),Date.parseDate(my.date, "Y/m/d"),parseFloat(my.amount),parseInt(my.familyMember_id),parseInt(my.bankAccount_id),my.remark],function(reply) {
var sucess = reply.getResult();
if (sucess!=0) {
alert("保存失败!");
} else {
alert("保存成功!");
}
});
addWindow.close();
}
}
},{
text: '放弃',
handler: function(){
addWindow.close();
}
}]
});
var addWindow
if(!addWindow){
addWindow = new Ext.Window({
id: 'incomeDaily-add-win',
layout:'fit',
width:500,
height:300,
plain: true,
items:addForm
});
}
addWindow.show(this);
addForm.form.setValues({date:(new Date()).format("Y/m/d"),familyMember_id:'1',bankAccount_id:'1',incomeItem_id:'2'});
addForm.form.render();
}
function doQuery() {
var allIncomeItem=[];
buffalo.remoteCall("houseChargeService.findRootIncomeItem",[], function(reply) {
getChild(reply.getResult());
function getChild(parent) {
if (parent.children.lengt==0) {
return 0;
}
for(var i=0; i<parent.children.length; i++) {
allIncomeItem.push([parent.children[i].id,parent.children[i].name]);
getChild(parent.children[i]);
}
}
});
//alert(allIncomeItem);
var allFamilyMember=[];
buffalo.remoteCall("houseChargeService.getAllFamilyMember",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
allFamilyMember.push([list[i].id,list[i].name]);
}
});
var allBankAccount=[];
buffalo.remoteCall("houseChargeService.getAllBankAccount",[],function(reply) {
var list = reply.getResult();
for(var i=0; i<list.length; i++) {
if (list[i].bank=="现金") {
allBankAccount.push([list[i].id,list[i].bank]);
} else {
allBankAccount.push([list[i].id,list[i].bank+" "+list[i].accountNo+list[i].cardNo]);
}
}
});
var queryForm = new Ext.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
},
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: '',
//bodyStyle:'padding:5px 5px 0', ark
bodyStyle:'padding: 0',
width: 350,
labelSeparator:'',
items: [{
xtype:'fieldset',
checkboxName:'queryFamilyMember_id',
checkboxToggle:true,
title: '按家庭成员查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '家庭成员',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allFamilyMember
}),
editable: false,
hiddenName:'familyMember_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择家庭成员',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryDate',
title: '按日期查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'datefield',
fieldLabel: '日期起',
name: 'dateFrom',
width: 100,
allowBlank: false,
format:'Y/m/d'
},{
xtype:'datefield',
fieldLabel: '日期迄',
name: 'dateTo',
width: 100,
allowBlank: false,
format:'Y/m/d'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryAmount',
title: '按金额查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '运算符',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: [['<','小于'],['<=','小于等于'],['==','等于'],['>','大于'],['>=','大于等于']]
}),
editable: false,
hiddenName:'cmp_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择运算符',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
},{
xtype:'numberfield',
fieldLabel: '金额',
name: 'amount',
width: 100,
allowBlank: false,
allowNegative: false,
minValue: 0
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryBankAccount_id',
title: '按账户查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '账户',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allBankAccount
}),
editable: false,
hiddenName:'bankAccount_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择账户',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
}]
},{
xtype:'fieldset',
checkboxToggle:true,
checkboxName:'queryIncomeItem_id',
title: '按收入项目查询',
autoHeight:true,
defaults: {width: 210},
collapsed: true,
items :[{
xtype:'combo',
fieldLabel: '收入项目',
store: new Ext.data.SimpleStore({
fields: ["id","name"],
data: allIncomeItem
}),
editable: false,
hiddenName:'incomeItem_id',
displayField:'name',
valueField:'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'请选择收入项目',
selectOnFocus:true,
resizable:true,
allowBlank:false,
forceSelection:true
}]
}
],
buttons: [{
text: '查询',
handler:function(){
if(queryForm.form.isValid()){
var my=queryForm.form.getValues();
ds.proxy.dwrParams=[my.queryFamilyMember_id=='on'?true:false,parseInt(my.familyMember_id),my.queryDate=='on'?true:false,Date.parseDate(my.dateFrom, "Y/m/d"),Date.parseDate(my.dateTo, "Y/m/d"),my.queryAmount=='on'?true:false,my.cmp_id,parseFloat(my.amount),my.queryBankAccount_id=='on'?true:false,parseInt(my.bankAccount_id),my.queryIncomeItem_id=='on'?true:false,parseInt(my.incomeItem_id)];
ds.load({params:{start:0,limit:2}});
queryWindow.close();
}
}
},{
text: '退出',
handler: function(){
queryWindow.close();
}
}]
});
var queryWindow
if(!queryWindow){
queryWindow = new Ext.Window({
id: 'incomeDaily-query-win',
layout:'fit',
width:500,
height:300,
maximizable:true,
plain: true,
items:queryForm
});
}
queryWindow.show(this);
queryForm.form.setValues({incomeItem_id:'2',dateFrom:(new Date(2007,1,1)).format("Y/m/d"),dateTo:(new Date()).format("Y/m/d"),familyMember_id:'1',bankAccount_id:'1',cmp_id:'>',amount:100,});
queryForm.form.render();
}
function doDel(){
if(gridPanel.selModel.hasSelection()){
Ext.MessageBox.confirm('Message', '确定删除吗?' , doDelDetail);
} else {
Ext.MessageBox.alert('Error', '请选中一行');
}
}
function doDelDetail(btn) {
if (btn == 'yes') {
var record =gridPanel.selModel.getSelected();
if (record.get("id")==-1) {
ds.remove(record);
} else {
buffalo.remoteCall("houseChargeService.deleteIncomeDaily",[record.get("id")],function(reply) {
var sucess = reply.getResult();
if (sucess!=0) {
alert("删除失败!");
} else {
ds.remove(record);
}
});
}
}
}
}
});
[/code]
dwrproxy.js
[code]
Ext.data.DWRProxy = function(dwrCall,dwrParams){
Ext.data.DWRProxy.superclass.constructor.call(this);
this.dwrCall = dwrCall;
this.dwrParams=dwrParams||[];
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function(params, reader, callback, scope, arg) {
var self = this;
if(this.fireEvent("beforeload", this, params) !== false) {
var delegate = this.loadResponse.createDelegate(this, [reader, callback, scope, arg], 1);
arg.params=arg.params||{};
var allParams=[arg.params.start||0,arg.params.limit||2].concat(this.dwrParams);
allParams.push(delegate);
this.dwrCall.apply(this,allParams);
} else {
callback.call(scope || this, null, arg, false);
}
},
loadResponse : function(listRange, reader, callback, scope, arg) {
var result;
try {
result = reader.readRecords(listRange);
} catch(e) {
this.fireEvent("loadexception", this, null,listRange, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
}
});
[/code]