js综合备忘
// 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');
}
}
});
});