extjs代码
/*
* 报警事项处理窗口
* yening 2015.2.7
*
* paras.winTitle:窗口显示的标题
* paras.width:窗口宽度
* paras.height:
*
*/
Ext.ns('Ext.ux.window');
Ext.ux.window.AlarmProcessWnd = function(paras) {
var me = this;
var xflwdwUrl = "./xflwdwInfo.do?reqCode=queryXflwdwInfoData";// 消防联网单位信息查询URl
var xflwdwStaffUrl = "./xflwdwInfo.do?reqCode=queryXflwdwStaffData";// 消防联网单位人员信息查询URl
var fireAlarmProcessUrl = "./fireAlarm.do?reqCode=updateAlarmProcessState";// 消防联网单位人员信息查询URl
var processState = 0;
var eventStore = null;
// 初始化参数-----------
Ext.applyIf(paras, {
width : 1200,
height : 460,
winTitle : ''
});
// 部门信息--------------
var deptStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : xflwdwUrl
}),
reader : new Ext.data.JsonReader({
totalProperty : 'TOTALCOUNT',
root : 'ROOT'
}, [ {
name : 'deptid'
}, {
name : 'deptname'
}, {
name : 'address'
}, {
name : 'remark'
} ])
});
deptStore.on("load", function(dStore) {
deptPanel.getForm().loadRecord(dStore.getAt(0));
})
var deptPanel = new Ext.form.FormPanel({
id : 'deptPanel',
height : 100,
// title:'单位信息',
// collapsible : true,
name : 'deptPanel',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 80,
frame : true,
bodyStyle : 'padding:5 5 0',
items : [ {
fieldLabel : '单位名称',
name : 'deptname',
readOnly : true,
allowBlank : true,
anchor : '99%'
}, {
fieldLabel : '地址',
name : 'address',
allowBlank : true,
readOnly : true,
anchor : '99%'
}, {
fieldLabel : '说明',
name : 'remark',
allowBlank : true,
readOnly : true,
anchor : '99%'
} ]
});
// ---------------------部门人员信息--------------
var staffStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : xflwdwStaffUrl
}),
reader : new Ext.data.JsonReader({
totalProperty : 'TOTALCOUNT',
root : 'ROOT'
}, [ {
name : 'name'
}, {
name : 'sex'
}, {
name : 'type'
}, {
name : 'phone1'
}, {
name : 'phone2'
} ])
});
var staffCm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {
header : '姓名',
dataIndex : 'name',
width : 80
}, {
header : '性别',
dataIndex : 'sex',
width : 40,
renderer : SEXRender,
sortable : true
}, {
header : '类型',
dataIndex : 'type',
width : 100,
renderer : XFLWDWSTAFFTYPERender,
sortable : true
}, {
header : '联系电话1',
dataIndex : 'phone1',
width : 150,
sortable : true
}, {
header : '联系电话2',
dataIndex : 'phone2',
width : 200,
sortable : true
} ]);
var staffGrid = new Ext.grid.GridPanel({
// title : "联系人",
height : 120,
// width: 800,
autoScroll : true,
region : 'center',
margins : '3 3 3 3',
store : staffStore,
loadMask : {
msg : '正在加载表格数据,请稍等...'
},
stripeRows : true,
frame : true,
cm : staffCm
});
// ----------------------事项处理Panel--------------------
var store = new Ext.data.SimpleStore({
fields : [ 'name', 'code', 'remark' ],
data : [ [ '误报模板', '001', '该信息是误报,XXX' ],
[ '确认模板', '002', '火情已确认,XXXX' ] ]
});
var processMode = new Ext.form.ComboBox({
id : 'id_mode',
hiddenName : 'processMode',
fieldLabel : '处理模板',
triggerAction : 'all',
store : store,
displayField : 'name',
valueField : 'code',
mode : 'local',
forceSelection : true,
typeAhead : true,
resizable : true,
anchor : '99%',
emptyText : '请选择'
});
processMode.on("select", function(combo, record) {
var txt = Ext.getCmp("processText");
var remark = record.get("remark");
txt.setValue(remark);
});
var processForm = new Ext.form.FormPanel({
name : 'processForm',
// title : "火警处理",
labelWidth : 80, // 标签宽度
frame : true,
// frame : true, //是否渲染表单面板背景色
defaultType : 'textfield', // 表单元素默认类型
labelAlign : 'right', // 标签对齐方式
bodyStyle : 'padding:5 5 5 5', // 表单元素和表单面板的边距
items : [ processMode, {
id : "processText",
fieldLabel : '处理结果',
name : 'processText',
xtype : 'textarea',
height : 80, // 设置多行文本框的高度
emptyText : '请填写处理结果相关内容', // 设置默认初始值
allowBlank : false,
anchor : '99%'
}, {
id : "eventid",
name : 'eventid',
fieldLabel : '事件id',
hidden : true,
anchor : '99%'
}, {
id : "processstate",
name : 'processstate',
fieldLabel : '事件处理状态',
hidden : true,
anchor : '99%'
} ]
});
var eventItemPanel = new Ext.Panel({
layout : 'form',
resizable : false,
draggable : true,
closeAction : 'hide',
modal : true,
titleCollapse : true,
maximizable : false,
buttonAlign : 'right',
border : false,
animCollapse : true,
animateTarget : Ext.getBody(),
constrain : true,
items : [ deptPanel, staffGrid, processForm ],
buttons : [ {
text : '火警误报',
iconCls : 'exclamationIcon',
handler : function() {
processEventFunction(1);
}
}, {
text : '火警确认',
iconCls : 'acceptIcon',
handler : function() {
processEventFunction(2);
}
}, {
text : '转119',
iconCls : 'userIcon',
handler : function() {
processEventFunction(3);
}
}, {
text : '关闭',
iconCls : 'deleteIcon',
handler : function() {
eventItemWindow.hide();
}
} ]
});
// -------------------------GIS页面-----------------------
var GISPanel = new Ext.Panel(
{
collapsible : false,
margins : '3 3 3 3',
html : '<iframe id="gis" name="gis" src="app/fireAlarm/js/GIS.htm" width="100%" height="100%" frameborder=0 scrolling=auto></iframe>'
});
// ----------------------------------------------事项处理窗口-------------------
// ---
var eventItemWindow = new Ext.Window({
title : paras.winTitle,
layout : 'column',
width : paras.width,
height : paras.height,
closable : true, // 是否可关闭
closeAction : 'hide',
maximizable : true,// 最大化
animateTarget : Ext.getBody(),
collapsible : true, // 是否可收缩
border : true,
modal : true,
resizable : false,
draggable : true,
titleCollapse : true,
animCollapse : true,
margins : '3 3 3 3',
pageY : 20,
pageX : 50,
// pageX : document.body.clientWidth / 2 - 420 / 2,
constrain : true,// 设置窗口是否可以溢出父容器
items : [ {
collapsible : true,
columnWidth : .3,
AutoHeight:true,
region : 'west',
autoScroll : true,
items : [ eventItemPanel ]
}, {
region : 'center',
columnWidth : .7,
items : [ GISPanel ]
} ]
});
this.getProcessState = function() {
return processState;
};
/**
* 显示窗口
*/
this.showWindow = function(grid) {
var record = grid.getSelectionModel().getSelected();
eventStore = grid.store;
processState = 0;
if (Ext.isEmpty(record)) {
Ext.MessageBox.alert('提示', '请先选中要查看的事项');
return;
}
var eventID = record.get("eventid");// 事件ID
var deptID = record.get("deptid");// 部门ID
var longitudeInfo = record.get("longitude");
var latitudeInfo = record.get("latitude");
deptStore.load({
params : {
deptid : deptID
}
});
staffStore.load({
params : {
deptid : deptID
}
});
processForm.getForm().reset();
eventItemWindow.show();
Ext.getCmp("eventid").setValue(eventID);
window.frames['gis'].theLocation(longitudeInfo, latitudeInfo);
}
/**
* 获得经度
*
*/
function longitude() {
for (var i = 0; i < deptStore.getCount(); i++) {
var longitudeRecord = deptStore.getAt(i);
longitudeInfo = longitudeRecord.get('longitude');
return longitudeInfo;
}
}
/**
* 获得纬度
*
*/
function latitude() {
for (var i = 0; i < deptStore.getCount(); i++) {
var latitudeRecord = deptStore.getAt(i);
latitudeInfo = latitudeRecord.get('latitude');
return latitudeInfo;
}
}
/**
* 事件处理
*/
function processEventFunction(precessState) {
if (!processForm.form.isValid()) {
alert("请填写火警处理结果信息。。。。");
return;
}
update(precessState);
}
/**
* 事件处理
*/
function update(precessState) {
var cmpProcessState = Ext.getCmp("processstate");
cmpProcessState.setValue(precessState);
processForm.form.submit({
url : fireAlarmProcessUrl,
waitTitle : '提示',
method : 'POST',
waitMsg : '正在处理数据,请稍候...',
success : function(form, action) {
eventItemWindow.hide();
eventStore.reload();
form.reset();
},
failure : function(form, action) {
var msg = action.result.msg;
Ext.MessageBox.alert('提示', '数据修改失败:<br>' + msg);
}
});
}
}
百度地图代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
.anchorBL { display: none;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WQOD7GtcqdZaEDDPVBqdqeYj"></script>
<title>城市名定位</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
function initMap(longitudeInfo, latitudeInfo){
// 百度地图API功能
var new_point = new BMap.Point(longitudeInfo, latitudeInfo);
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new_point,14);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
var longitude = 116.331398;
var latitude = 39.897445;
initMap(longitude, latitude);
// 用经纬度设置地图中心点
function theLocation(longitude, latitude) {
initMap(longitude, latitude);
}
</script>