- 浏览: 1281662 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (471)
- Database (29)
- Java (47)
- Frameworks (9)
- JavaScript (30)
- Others (27)
- ExtJS (26)
- Linux (49)
- Windows (11)
- Web (8)
- Ubunt (9)
- Shell (21)
- MySQL (26)
- Redis (9)
- Git (6)
- Maven (29)
- Python (3)
- Nginx (10)
- Nodejs (7)
- Network (1)
- GO (2)
- Docker (36)
- MongoDB (5)
- Intellij idea (7)
- Ruby (3)
- Weblogic (3)
- CSS (15)
- VMware (3)
- Tomcat (6)
- Cache (2)
- PHP (8)
- Mac (7)
- jQuery (3)
- Spring (8)
- HTML5 (2)
- Kubernetes (8)
最新评论
-
masuweng:
Intellij idea 主题下载网址 -
mimicom:
还有一个情况, 也是连不上 2018-05-06T06:01: ...
docker-compose 部署shipyard -
lixuansong:
put()方法调用前必须先手动调用remove(),不然不会实 ...
JavaScript创建Map对象(转) -
jiao_zg22:
方便问下,去哪里下载包含Ext.ux.TabCloseMenu ...
Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例 -
netwelfare:
对于基本类型的讲解,文章写的有点简单了,没有系统化,这篇文章介 ...
Java 基础类型范围
Ext.ux.GMapPanel.js组件的使用 示例
效果:
创建调用的html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= utf-8">
<title>GMap Window Example</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- GMaps API Key that works for www.extjs.com -->
<!--<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUCG2rlIeVFJ07rCgVUYjhhSVbRpeAZk72H9nRSWIwLg0s1ul-BRlbCt360qbQumadan9ZlGxlCWzqg" type="text/javascript"></script>-->
<!-- GMaps API Key that works for localhost -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A" type="text/javascript"></script>
<script src="./Ext.ux.GMapPanel.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var mapwin = new Ext.Window({
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width:400,
height:400,
x: 40,
y: 60,
items: {
xtype: 'gmappanel',
region: 'center',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert('Its fine', 'and its art.');
}
}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
}
});
mapwin.show();
});
</script>
</body>
</html>
引入Ext.ux.GMapPanel.js组件的源文件:
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @author Shea Frederick
*/
Ext.namespace('Ext.ux');
/**
*
* @class GMapPanel
* @extends Ext.Panel
*/
Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
initComponent : function(){
var defConfig = {
plain: true,
zoomLevel: 3,
yaw: 180,
pitch: 0,
zoom: 0,
gmapType: 'map',
border: false
};
Ext.applyIf(this,defConfig);
Ext.ux.GMapPanel.superclass.initComponent.call(this);
},
afterRender : function(){
var wh = this.ownerCt.getSize();
Ext.applyIf(this, wh);
Ext.ux.GMapPanel.superclass.afterRender.call(this);
if (this.gmapType === 'map'){
this.gmap = new GMap2(this.body.dom);
}
if (this.gmapType === 'panorama'){
this.gmap = new GStreetviewPanorama(this.body.dom);
}
if (typeof this.addControl == 'object' && this.gmapType === 'map') {
this.gmap.addControl(this.addControl);
}
if (typeof this.setCenter === 'object') {
if (typeof this.setCenter.geoCodeAddr === 'string'){
this.geoCodeLookup(this.setCenter.geoCodeAddr);
}else{
if (this.gmapType === 'map'){
var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
this.gmap.setCenter(point, this.zoomLevel);
}
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
}
}
if (this.gmapType === 'panorama'){
this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
}
}
GEvent.bind(this.gmap, 'load', this, function(){
this.onMapReady();
});
},
onMapReady : function(){
this.addMarkers(this.markers);
this.addMapControls();
this.addOptions();
},
onResize : function(w, h){
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
},
setSize : function(width, height, animate){
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}
Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
},
getMap : function(){
return this.gmap;
},
getCenter : function(){
return this.getMap().getCenter();
},
getCenterLatLng : function(){
var ll = this.getCenter();
return {lat: ll.lat(), lng: ll.lng()};
},
addMarkers : function(markers) {
if (Ext.isArray(markers)){
for (var i = 0; i < markers.length; i++) {
var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
}
}
},
addMarker : function(point, marker, clear, center, listeners){
Ext.applyIf(marker,G_DEFAULT_ICON);
if (clear === true){
this.getMap().clearOverlays();
}
if (center === true) {
this.getMap().setCenter(point, this.zoomLevel);
}
var mark = new GMarker(point,marker);
if (typeof listeners === 'object'){
for (evt in listeners) {
GEvent.bind(mark, evt, this, listeners[evt]);
}
}
this.getMap().addOverlay(mark);
},
addMapControls : function(){
if (this.gmapType === 'map') {
if (Ext.isArray(this.mapControls)) {
for(i=0;i<this.mapControls.length;i++){
this.addMapControl(this.mapControls[i]);
}
}else if(typeof this.mapControls === 'string'){
this.addMapControl(this.mapControls);
}else if(typeof this.mapControls === 'object'){
this.getMap().addControl(this.mapControls);
}
}
},
addMapControl : function(mc){
var mcf = window[mc];
if (typeof mcf === 'function') {
this.getMap().addControl(new mcf());
}
},
addOptions : function(){
if (Ext.isArray(this.mapConfOpts)) {
var mc;
for(i=0;i<this.mapConfOpts.length;i++){
this.addOption(this.mapConfOpts[i]);
}
}else if(typeof this.mapConfOpts === 'string'){
this.addOption(this.mapConfOpts);
}
},
addOption : function(mc){
var mcf = this.getMap()[mc];
if (typeof mcf === 'function') {
this.getMap()[mc]();
}
},
geoCodeLookup : function(addr) {
this.geocoder = new GClientGeocoder();
this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
},
addAddressToMap : function(response) {
if (!response || response.Status.code != 200) {
Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
}else{
place = response.Placemark[0];
addressinfo = place.AddressDetails;
accuracy = addressinfo.Accuracy;
if (accuracy === 0) {
Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
}else{
if (accuracy < 7) {
Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
}else{
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
}
}
}
}
}
});
Ext.reg('gmappanel',Ext.ux.GMapPanel);
发表评论
-
ExtJS Architecture
2011-04-12 10:17 1090website: http://www.slideshare. ... -
ExtJS2.0中使用开始和结束时间的控件 示例
2009-05-25 18:54 2462ExtJS2.0中使用开始和结束时间的控件 示例 效果: ... -
ExtJS grid中如何显示时间
2009-05-12 16:05 5192ExtJS grid中如何显示时间 效果: 实现 ... -
在ExtJS2.0中使用datefield编写开始/结束时间组件
2009-04-08 10:17 3407在ExtJS2.0中使用datefield编写开始/结束时间组 ... -
解决ExtJs分页grid中load数据为空时不能刷新Ext.PagingToolbar信息的问题
2009-03-19 16:43 7036解决ExtJs分页grid中load数据为空时不能刷新Ext. ... -
Ext.plugins.TDGi.tabScrollerMenu插件的使用
2009-03-10 15:47 2868Ext.plugins.TDGi.tabScrollerMen ... -
Ext.ux.TabPanel组件的使用
2009-03-10 11:36 7288Ext.ux.TabPanel组件的使用 效果: HTML ... -
如何在Ext.form.FormPanel中让等待提示绑定在具体的form之上
2009-03-10 09:16 2738如何在Ext.form.FormPanel中让等待提示绑定在具 ... -
Ext.ux.ImageButton的使用(带有图片的按钮) 示例
2009-02-23 16:23 6969Ext.ux.ImageButton的使用( ... -
fieldset多列展示 示例
2009-02-23 16:17 2592fieldset多列展示 示例 效果: HTML源码: &l ... -
Ext.ux.UploadDialog组件的使用 示例
2009-02-18 17:22 7911Ext.ux.UploadDialog组件的使用 示例 效果: ... -
ExtJS TreeCheckNodeUI组件的使用 示例
2009-02-17 16:37 7847ExtJS TreeCheckNodeUI组件的使用 示例 效 ... -
使用localXHR.js让ExtJS docs可以在本地浏览
2009-02-17 11:32 5641使用localXHR.js让ExtJS docs可以在本地浏览 ... -
ExtJS MultiselectItemSelector的使用 示例
2009-02-17 10:30 8477ExtJS MultiselectItemSelector的使 ... -
ExtJS GroupHeaderPlugin的使用 示例
2009-02-17 09:18 6651ExtJS GroupHeaderPlugin的使 ... -
Ext.ux.RadioGroup的使用(让各radio使用不同的名称) 示例
2009-02-16 16:13 9438Ext.ux.RadioGroup的使用(让各radio使用不 ... -
ExtJS中DatetimeMenu组件(包括时、分)的使用 示例
2009-02-16 14:01 2220ExtJS中DatetimeMenu组件(包括时、分)的使用 ... -
ExtJS中editable-column-tree组件的使用 示例
2009-02-16 13:26 5382ExtJS中editable-column-tree组件的使用 ... -
Ext.ux.ThemeCycleButton换肤组件 示例
2009-02-13 14:04 3140Ext.ux.ThemeCycleButton换肤组件 示例 ... -
ExtJS编写的youtube视频播放组件 示例
2009-02-13 11:21 3934ExtJS编写的youtube视频播放组件 示例 效果: ...
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
The class is ready for i18n, override the Ext.ux.UploadDialog.Dialog.prototype.i18n object with your language strings, or just pass i18n object in config. Server side handler. The files in the queue...
Ext.ux.tree.treegrid异步加载,点击节点加载数据
基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit
ext.ux.uploadDialog实例
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
EXTjs的上传组件
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
Ext+SwfUpload做的一个多文件上传的插件.
[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree
Ext.ux.UploadDialog批量上传文件应用,后台采用com.jspsmart.upload.SmartUpload。myeclipse工程,导入即可运行。
带复选框的这是经过测试可以用的下拉树
工程文件 博文链接:https://mutongwu.iteye.com/blog/693692
在做文件上传的时候,发现了Ext.ux.UploadDialog这个强大的东西,实现了一下
Ext.ux.GoogleChart extjs插件Ext.ux.GoogleChart extjs插件
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
ext.ux.menu.storemenu.zip
这个文件是重写ext的ColorPickerFieldPlus控件,实现自定义调色,和ps取颜色一样,比Ext自带的颜色多很多,是自己可以调的
Ext.ux.touch.DateTimePicker 该扩展通过扩展 Ext.Picker 为 Sencha Touch 框架提供了一个 DateTimePicker。用法datetimePicker = new Ext.ux.touch.DateTimePicker({ useTitles: true, id: 'dt', value: { day: 23,...