Ext2.0 综合应用

// JavaScript Document
/**
* @author Erit
*/

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.BLANK_IMAGE_URL = '../images/default/s.gif';

var frm = Ext.form;

var columns = [
{
id:'contractId',
header:'合同编号',
sortable:false,
align: 'center',
renderer:function (v) {
return '<span class="index_listid_underline" style="cursor:pointer;">' + v + '</font>';
},
dataIndex:'contractId',
width:60
},
{
id:'areaName',
header:'区域',
dataIndex:'areaName',
align: 'center',
sortable: true,
width:60

},
{
id:'agencyName',
header:'客户名称',
dataIndex:'agencyName',
align: 'center',
sortable: true,
width:120
},
{
id:'efDate',
header:'开通日期',
align: 'center',
dataIndex:'efDate',
sortable:true,
//renderer: Ext.util.Format.dateRenderer('Y年m月d日'),
width:100
},
{
id:'joinMode',
header:'加盟方式',
dataIndex:'joinMode',
align: 'center',
sortable:true,
width:80
},
{
id:'contractStatus',
header:'合同状态',
dataIndex:'contractStatus',
align: 'center',
sortable:true,
width:100
}
];

var contract = [
{name:'areaName',type:'string'},
{name:'agencyName',type:'string'},
{name:'contractId',type:'string'},
{name:'efDate',type:'string'},
{name:'joinMode',type:'string'},
{name:'contractStatus',type:'string'}
];

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url:''}),
reader: new Ext.data.JsonReader(
{
totalProperty:'dataForm',
root:'contract'
},
contract
),
remoteSort: true,
sortInfo:{field: 'areaName', direction: "DESC"},
groupField:'areaName'
});

var view = new Ext.grid.GroupingView({
forceFit:true,
sortAscText :'正序',
sortDescText :'倒序',
columnsText:'列显示/隐藏',
groupByText:'依本列分组',
showGroupsText:'分组显示',
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 0 ? "份合同" : "暂无合同"]})'
})

var store_selectType = new Ext.data.SimpleStore({
fields: ['typeCode', 'typeText'],
data : [
[1,'不限'],
[2, '合同编号'],
[3,'区域'],
[4,'加盟方式'],
[5,'合同状态'],
[6,'客户名称']
]
});


var selectType = new Ext.form.ComboBox({//查询类别的下拉框
store:store_selectType,
name: 'selectTypeName',
valueField:'typeCode',
displayField:'typeText',
typeAhead: true,
editable:false,//不可编辑的
mode: 'local',//本地模式
triggerAction: 'all',
blankText:'不限',
emptyText:'不限',
width:80
});

var store_selectArea = new Ext.data.SimpleStore({
fields: ['areaCode', 'areaText'],
data : [
[1,'不限'],
[2, '黄浦'],
[3,'浦东'],
[4,'闸北'],
[5,'闵行'],
[6,'徐汇'],
[7,'杨浦'],
[8,'虹口'],
[9,'长宁'],
[10,'静安'],
[11,'卢湾'],
[12,'宝山'],
[13,'嘉定'],
[14,'青浦'],
[15,'奉贤'],
[16,'南汇'],
[17,'普陀'],
[18,'金山'],
[19,'松江'],
[20,'崇明'],
[21,'周边地区']
]
});

var selectArea = new Ext.form.ComboBox({//查询类别的下拉框
store:store_selectArea,
name: 'selectAreaName',
valueField:'areaText',
displayField:'areaText',
typeAhead: true,
editable:false,//不可编辑的
mode: 'local',//本地模式
triggerAction: 'all',
blankText:'不限',
emptyText:'不限',
width:80
});

var beginDate = new Ext.form.DateField({
name: 'beginDate',
width:100,
readOnly:true,
format: 'Y年m月d日'
});

var endDate = new Ext.form.DateField({
id: 'endDate',
width:100,
readOnly:true,
format: 'Y年m月d日'
});

var selectKey = new Ext.form.TextField({
name:'KeyInfo',
width:80
});

var tbar =[
{
xtype:'button',
iconCls:'excelIcon',
tooltip:'把数据导出到excel',
handler:exportExcel
},'-',
'->','开始时间:',beginDate,'-','结束时间:',endDate,'-','区域:',selectArea,'-','查询条件:',selectType,'-','查询关键字:',selectKey,'-',
{
text:'查询',
handler:doSelect
}
];
var grid = new Ext.grid.GridPanel({
el:'contract-grid',
id:'contract-grid',
store: store,
columns: columns,
bodyBorder:false,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
view:view,
loadMask:({msg :'数据正在加载中……'}),
width: 1024,
height: 474,
tbar:tbar,
bbar:new Ext.PagingToolbar(
{
pageSize:15,
store:store,
displayInfo:true,
beforePageText:'第',
afterPageText:'页 共 {0} 页',
refreshText:'刷新',
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条合同记录',
emptyMsg: '没有记录'
})
});

grid.render();
store.load({params:{start:0, limit:15}});

grid.addListener('cellclick', cellclick);
//var mainPanel = Ext.getCmp('contract-grid');

function cellclick(grid,rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var maskDiv = document.getElementById('extMask');
var cnID = record.get('contractId');
if (fieldName == 'contractId') {
var cmWindow;
if (!cmWindow) {
//mainPanel.body.mask();
maskDiv.style.display = '';
var tCBar = ['->',{
text:'确定修改',
name:'saveContract',
handler:function(){
if (!Ext.get('idForContract').getValue()) {
Ext.MessageBox.alert('提示','合同编号不能为空!');
return false;
}

if (!Ext.get('agency').getValue()) {
Ext.MessageBox.alert('提示','中介名称不能为空!');
return false;
}

if (!Ext.get('join_mode').getValue()) {
Ext.MessageBox.alert('提示','加盟形式不能为空!');
return false;
}

if (!Ext.get('service_item').getValue()) {
Ext.MessageBox.alert('提示','服务项目不能为空!');
return false;
}

if (!Ext.get('efficient_date').getValue()) {
Ext.MessageBox.alert('提示','开通日期不能为空且格式为 年-月-日!');
return false;
} else if(!dateCheck(Ext.get('efficient_date').getValue())) {
Ext.MessageBox.alert('提示','开通日期格式为 年-月-日!');
return false;
}

if (!Ext.get('end_date').getValue()) {
Ext.MessageBox.alert('提示','时间截点不能为空且格式为 年-月-日!');
return false;
}else if(!dateCheck(Ext.get('end_date').getValue())) {
Ext.MessageBox.alert('提示','时间截点格式为 年-月-日!');
return false;
}

if(cPanel.form.isValid()){
Ext.MessageBox.wait('正在保存数据中, 请稍候……');
cPanel.form.submit({
//reset: true,
failure: function(form, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
cmWindow.close(this);
store.reload({params:{start:0, limit:15}});
//mainPanel.body.unmask();
maskDiv.style.display = 'none';
beginDate.setValue('');
endDate.setValue('');
}
});
}
}

},'-',
{
text:'查看收费详情',
id:'seeContract',
handler:function () {
var seeWind;

if (!seeWind) {
var ctColumns = new Ext.grid.ColumnModel([{
hidden:true,
id:'payID',
dataIndex:'payID'
},{
id:'transact',
header:'执行例次',
dataIndex:'transact',
renderer:function (v) {
return '<span class="index_listid_underline" style="cursor:pointer;">第' + v + '次</span>';
},
align:'center',
width:90
},
{
id:'sPayDate',
header:'付款时间',
dataIndex:'sPayDate',
align:'center',
width:140
},
{
id:'sPayMoney',
header:'此次金额(元)',
dataIndex:'sPayMoney',
align:'center',
width:100
},
{
id:'sEStartDate',
header:'服务开始时间',
dataIndex:'sEStartDate',
align:'center',
width:130
},
{
id:'sEEndDate',
header:'服务结束时间',
dataIndex:'sEEndDate',
align:'center',
width:130
},
{
id:'sPayStatus',
header:'状态',
dataIndex:'sPayStatus',
align:'center',
renderer:function (v) {
if (v == '已支付')
return '<span class="index_listid_underline" style="cursor:pointer;">' + v + '</span>';
else if (v == '未支付')
return '<span class="index_listid_underline" style="cursor:pointer;">' + v + '</span>';
},
width:81
}]
);

var sStract = [
{name:'payID'},
{name:'transact'},
{name:'sPayDate'},
{name:'sEStartDate'},
{name:'sEEndDate'},
{name:'sPayMoney',type:'float'},
{name:'sPayStatus'}
];

var sStroe = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:''}),
reader: new Ext.data.JsonReader(
{
totalProperty:'ConDataForm',
root:'getContract'
},
sStract
)
});

var sFModyCon = new Ext.form.Hidden({
id:'sFMody',
name:'sFMody',
value:'2'
});

var seeTextFiled = new Ext.form.FieldSet({
id:'sFieldset_panel',
title: '增加新收费（* 为必填项）',
autoHeight:true,
//collapsible: true,
defaultType: 'textfield',
items :[sFModyCon,
{
xtype:'hidden',
id:'payID',
name:'payID'
},
{
xtype:'hidden',
id:'contractId',
value:Ext.get('contractId').getValue()
},
{
xtype:'datefield',
fieldLabel: '付款时间',
id:'sPayDate',
name: 'sPayDate',
format:'Y-m-d',
allowBlank:false,
blankText:'请输入或选择时间',
invalidText:'输入日期:<font color="#ff0000">"{0}"</font>的格式不对，请按<font color="#ff0000">"{1}"</font>格式输入',
width:120
},{
fieldLabel: '此次金额(元)',
id:'sPayMoney',
blankText:'此次金额不能为空且为数字',
allowBlank:false,
name: 'sPayMoney'
},{
xtype:'datefield',
fieldLabel: '服务开始时间',
id:'sEStartDate',
format:'Y-m-d',
name: 'sEStartDate',
allowBlank:false,
blankText:'请输入或选择时间',
invalidText:'输入日期:<font color="#ff0000">"{0}"</font>的格式不对，请按<font color="#ff0000">"{1}"</font>格式输入',
width:120
},{
xtype:'datefield',
fieldLabel: '服务结束时间',
id:'sEEndDate',
format:'Y-m-d',
name: 'sEEndDate',
allowBlank:false,
blankText:'请输入或选择时间',
invalidText:'输入日期:<font color="#ff0000">"{0}"</font>的格式不对，请按<font color="#ff0000">"{1}"</font>格式输入',
anchor:'90%',
width:120
}]
});

function selectRow(sm, row, rec) {
Ext.getCmp('seePanel_grid').getForm().loadRecord(rec);
Ext.getCmp('sFieldset_panel').setTitle('修改收费项目（* 为必填项）');
}

var rsm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect:selectRow
}
});


var seeGPanel = new Ext.grid.GridPanel({
id:'seeGPanel_grid',
title:'合同编号: '+cnID,
cm:ctColumns,
ds:sStroe,
sm: rsm,
autoScroll:true,
width:693,
height:180,
loadMask:({msg :'数据正在加载中……'})
});

sStroe.load({params:{cnID:Ext.get('contractId').getValue()}});

//var listPayInfo = Ext.getCmp("seeGPanel_grid");
var conMoneySum = new Ext.Button ({
id:'conMoneySum',
name:'conMoneySum',
text:''
});

var mButn = new Ext.Button({
id:'modyPayInfo',
name:'modyPayInfo',
text:'确定',
handler: function () {
var sFieldName = Ext.getCmp('sFieldset_panel').title;
if(sFieldName == '增加新收费（* 为必填项）'){
if (!Ext.get('sPayDate').getValue()) {
Ext.get('sPayDate').focus();
return false;
}

if (isNaN(Ext.get('sPayMoney').getValue())) {
Ext.get('sPayMoney').focus();
return false;
}

if (!Ext.get('sEStartDate').getValue()) {
Ext.get('sEStartDate').focus();
return false;
}

if (!Ext.get('sEEndDate').getValue()) {
Ext.get('sEEndDate').focus();
return false;
}

sFModyCon.value = '1';
sFModyCon.setValue(sFModyCon.value);

if(seePanel.form.isValid()){
Ext.MessageBox.wait('正在保存数据中, 请稍候……');
seePanel.form.submit({
reset: true,
failure: function(form, action) {
Ext.MessageBox.hide();
//Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
sStroe.reload();
}
});
Ext.getCmp('sFieldset_panel').title = '增加新收费（* 为必填项）';
}
} else {
if (!Ext.get('sPayDate').getValue()) {
Ext.get('sPayDate').focus();
return false;
}

if (isNaN(Ext.get('sPayMoney').getValue())) {
Ext.get('sPayMoney').focus();
Ext.get('sPayMoney').setValue(1);
return false;
}

if (!Ext.get('sEStartDate').getValue()) {
Ext.get('sEStartDate').focus();
return false;
}

if (!Ext.get('sEEndDate').getValue()) {
Ext.get('sEEndDate').focus();
return false;
}

if(seePanel.form.isValid()){
Ext.MessageBox.wait('正在保存数据中, 请稍候……');
seePanel.form.submit({
reset: true,
failure: function(form, action) {
Ext.MessageBox.hide();
//Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示',action.result.info);
sStroe.reload();
}
});
Ext.getCmp('sFieldset_panel').title = '增加新收费（* 为必填项）';
}
}
}
});

var seePanel = new Ext.FormPanel({
url:'',
id:'seePanel_grid',
border:false,
frame:true,
width:705,
autoHeight:true,
//height:350,
items:[seeGPanel,seeTextFiled],
tbar:[{
id:'conMCount',
name:'conMCount',
text:'金额统计:'
},conMoneySum,'-',
{
xtype:'button',
iconCls:'excelIcon',
tooltip:'把数据导出到excel',
handler:function () {
if (sStroe.getCount() == 0) {
Ext.Msg.show({
title:'提示',
msg: '暂无数据!',
icon: Ext.MessageBox.WARNING
});
return false;
}
var contractID = document.getElementById('contractID');
var formObjList = document.getElementById('toListExcel');
contractID.value = Ext.get('contractId').getValue();

formObjList.submit();
}
},'-',
'->',
{
xtype:'button',
id:'closePayInfo',
text:'关闭',
handler:function () {
seeWind.close(this);
cmWindow.show(this);
}
}
],
bbar:['->',mButn,'-',
{
text: '清空',handler:function(){
var frm=Ext.getCmp("seePanel_grid").getForm();
frm.reset();
Ext.getCmp('sFieldset_panel').setTitle('增加新收费（* 为必填项）');
}
}]
});

seeWind = new Ext.Window({
width: 715,
border:false,
frame:true,
resizable:false,
bodyStyle:'padding-top:0px;',
closable:false,//是否可以关闭
closeAction:'hide',
defaults : {
// 容器内元素是否显示边框
border : false
},
items:[seePanel]
});

function changRowNum(grid,rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var dataValue = record.get(fieldName);

if (fieldName == 'sPayStatus') {
if (dataValue == '未支付') {
seePanel.form.submit({
reset: true,
url:'',
method:'GET',
failure: function(form, action) {
Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
sStroe.reload();
}
});
} else if (dataValue == '已支付'){
seePanel.form.submit({
reset: true,
url:'',
method:'GET',
failure: function(form, action) {
Ext.MessageBox.alert('提示',action.result.info);
},
success: function(form_instance_create, action) {
sStroe.reload();
}
});
}
}
}


seeGPanel.addListener('cellclick', changRowNum);
sStroe.on('load',function (){
conMoneySum.setText(sStroe.sum('sPayMoney',0,sStroe.getTotalCount()-1) + '元');
});
cmWindow.hide();
seeWind.show(this);
}
}
},
{
text:'关闭',
name:'closePage',
handler:function () {
cmWindow.close(this);
maskDiv.style.display = 'none';
beginDate.setValue('');
endDate.setValue('');

//mainPanel.body.unmask();
}
}];

var cPanel = new Ext.FormPanel({
url:'',
id:'cPanel',
tbar:tCBar,
defaults:{
border : false
},
items:[{autoLoad:{id:'listGrid',url: '', scope: this,callback:function(){}, scripts: true,params:'cnID='+cnID}}]
});

cmWindow = new Ext.Window({
width: 715,
border:false,
frame:true,
resizable:false,
style: {
'background-color':'#999999'
},
closable:false,//是否可以关闭
closeAction:'hide',
defaults : {
// 容器内元素是否显示边框
border : false
},
items:[cPanel]
})
cmWindow.setPosition(278,100);
cmWindow.show(this);
}
}
}

endDate.on('blur',function () {
var bDate = beginDate.getValue();
var eDate = endDate.getValue();

if (bDate)
bDate = bDate.format('Y-m-d');
else
bDate = '';

if (eDate)
eDate = eDate.format('Y-m-d');
else
eDate = '';

if (bDate == '') {
Ext.MessageBox.alert("提示","起始时间不能为空!");
}

});

function doSelect() {
var id = selectType.getValue();
var xiInfo = selectKey.getValue();//得到当前选择输入框的值
var bDate = beginDate.getValue();
var eDate = endDate.getValue();
var area = selectArea.getValue();
if (bDate == null || bDate == '') {
bDate = '';
} else
bDate = bDate.format('Y-m-d');

if (eDate== null || eDate== '') {
eDate= '';
} else
eDate= eDate.format('Y-m-d');

if(id == null || id == ''){
id = '1';
}

if(eDate && !bDate) {
Ext.MessageBox.alert("提示","请选择开始结束时间!");
return false;
}

if(bDate && eDate == '') {
Ext.MessageBox.alert("提示","请选择结束结束时间!");
return false;
}

if (bDate && eDate)
if (compareDate(eDate,bDate) == 2) {
Ext.MessageBox.alert("提示","结束时间不能小于起始时间!");
return false;
}

store.load({params:{start:0,limit:15,typeId:id,info:xiInfo,beginDate:bDate,endDate:eDate,area:area}});
}

function compareDate(DateOne,DateTwo) {

var OneMonth = DateOne.substring(5,DateOne.lastIndexOf ("-"));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf ("-")+1);
var OneYear = DateOne.substring(0,DateOne.indexOf ("-"));

var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf ("-"));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf ("-")+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf ("-"));

if (Date.parse(OneMonth+"/"+OneDay+"/"+OneYear) > Date.parse(TwoMonth+"/"+TwoDay+"/"+TwoYear))
return 1;
else
return 2;
}

function exportExcel() {
if (store.getCount() == 0) {
Ext.Msg.show({
title:'提示',
msg: '暂无数据!',
icon: Ext.MessageBox.WARNING
});
return false;
}
var conID = selectType.getValue();
var xiInfo = selectKey.getValue();//得到当前选择输入框的值
var bDate = beginDate.getValue();
var eDate = endDate.getValue();
var area = selectArea.getValue();

if (bDate)
bDate = bDate.format('Y-m-d');
else
bDate = '';

if (eDate)
eDate = eDate.format('Y-m-d');
else
eDate = '';

var typeIDHidden = document.getElementById('typeID');
var infoHidden = document.getElementById('info');
var begDate = document.getElementById('begDate');
var enDate = document.getElementById('enDate');
var areaSet = document.getElementById('areaSet');

typeIDHidden.value = conID;
infoHidden.value = xiInfo;
begDate.value = bDate;
enDate.value = eDate;
areaSet.value = area;

var formObj = document.getElementById('toExce');
formObj.submit();

}

store.on('load', function() { //数据加载完毕后触发事件
var el = Ext.get('contract-grid');
var tableObj = el.select('table.x-grid3-row-table');
var k = 0;
var j = 0;
var n = 0;
for (var i = 0; i < store.getCount(); i++) {
if (store.getAt(i).get('contractStatus') == '进行中') {
k = i;
tableObj.item(k).addClass('x-grid3-row-customOne-class');
} else if (store.getAt(i).get('contractStatus') == '结束') {
j = i;
tableObj.item(j).addClass('x-grid3-row-customTwo-class');
} else if (store.getAt(i).get('contractStatus') == '完成') {
n = i;
tableObj.item(n).addClass('x-grid3-row-customThree-class');
}
}
});

});

交流一下，希望大家指出缺点。

1. 没有支持国际化：header:'合同编号'，不过可能项目没这个需求

2. hard-coding：下拉框里面的data都写死的，应该从后台load，再如

if (store.getAt(i).get('contractStatus') == '进行中') {
k = i;
tableObj.item(k).addClass('x-grid3-row-customOne-class');
} else if (store.getAt(i).get('contractStatus') == '结束') {
j = i;
tableObj.item(j).addClass('x-grid3-row-customTwo-class');
} else if (store.getAt(i).get('contractStatus') == '完成') {
n = i;
tableObj.item(n).addClass('x-grid3-row-customThree-class');
} 

'进行中'，'结束'和'完成'为什么要写死在这里呢？

1. 没有支持国际化：header:'合同编号'，不过可能项目没这个需求

2. hard-coding：下拉框里面的data都写死的，应该从后台load，再如

if (store.getAt(i).get('contractStatus') == '进行中') {
k = i;
tableObj.item(k).addClass('x-grid3-row-customOne-class');
} else if (store.getAt(i).get('contractStatus') == '结束') {
j = i;
tableObj.item(j).addClass('x-grid3-row-customTwo-class');
} else if (store.getAt(i).get('contractStatus') == '完成') {
n = i;
tableObj.item(n).addClass('x-grid3-row-customThree-class');
} 

'进行中'，'结束'和'完成'为什么要写死在这里呢？
[/quote]

首先，谢谢sam.ds.chen的建议。
1. 没有支持国际化,确实是项目不需要。
2. 下拉框里面的data都写死的，因为过度使用ajax也会降低速度。
3. 项目开发时间只有15天，其中学习ext api和研究其中的例子用了3天，所以说，我还是菜鸟级别。
'进行中'，'结束'和'完成'为什么要写死在这里，是当时我没有找到更好的办法。
项目要求对不同的数据，要有颜色区分。我只好用了个笨办法。你有什么好的建议，希望能和你交流一下。
chaozhengzhang@hotmail.com

我觉得可以在服务器端做个ConstantsServlet或LocaleServlet，系统启动时从配置文件里load到Constants或Locale资源，以JSON形式输出（顺便也把国际化也实现了）
在html文件中用<script src="jslib/constants.js" charset="utf-8" />把那些资源从服务器端下载到客户端。。。
然后你的代码

if (store.getAt(i).get('contractStatus') == '进行中') { 
...
}

就可以改成

if (store.getAt(i).get('contractStatus') == Constants.in_progress) { 
...
} 

了

请参阅拙作《浅谈基于ExtJS的AJAX程序中i18n的实现》http://sam-ds-chen.javaeye.com/blog/196946

sam.ds.chen
关于国际化，其实我在做文件的时候，js本身就是以utf-8格式来开发的，<script src="jslib/constants.js" charset="utf-8" />无非也是实现这个目的。

结合服务器端来实现，我倒是没有去想过。谢谢你的提醒！

其实你的js文件不就是从服务器端下载来的吗（web程序的js, css, html等都是从服务器端下载的嘛），只不过大多数js的内容是静态的，写死的，而使用servlet来生成js可以做到动态生成