floating windows, drag and drop and google 地图s

2012-10-29

floating windows, drag and dropand google maps树形结构代码：htmlheadmeta http-equivContent-Ty

floating windows, drag and drop and google maps

树形结构代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext2.2 Demo</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>
?
??? <script src="Ext.ux.GMapPanel.js"></script>
<script>
?Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
?Ext.onReady(function(){
?????? var viewport = new Ext.Viewport({
??????????? layout:'border',
??????????? items:[
??????????????? new Ext.BoxComponent({ // raw
??????????????????? region:'north',
??????????????????? el: 'north',
??????????????????? height:32
??????????????? }),
??????????????? new Ext.BoxComponent({ // raw
??????????????????? region:'south',
??????????????????? el: 'south',
??????????????????? height:32
??????????????? }),
??????????????? {
??????????????????? region:'west',
??????????????????? id:'west-panel',
??????????????????? title:'Menu',
??????????????????? split:true,
??????????????????? width: 200,
??????????????????? minSize: 175,
??????????????????? maxSize: 400,
??????????????????? collapsible: true,
??????????????????? margins:'0 0 0 5',
??????????????????? layout:'accordion',
??????????????????? layoutConfig:{
??????????????????????? animate:true
??????????????????? },
??????????????????? items: [
??????????????????? ?{
???????????????????????? contentEl: 'west',
???????????????????????? title:'TreeDemo',
???????????????????????? border:false,
???????????????????????? iconCls:'nav'
??????????????????? ?},
??????????????????? ?{
???????????????????????? title:'Settings',
???????????????????????? html:'<p>Some settings in here.</p>',
???????????????????????? border:false,
???????????????????????? iconCls:'settings'
??????????????????? ?}
??????????????????? ]
??????????????? },
??????????????? new Ext.TabPanel({
??????????????????? region:'center',
??????????????????? id:'tabs',
??????????????????? deferredRender:false,
??????????????????? activeTab:0,
??????????????????? defaults: {autoScroll:true},
??????? ???enableTabScroll:true,
??????? ???resizeTabs:true, // turn on tab resizing
??????????????????? items:[{
??????????????????????? contentEl:'content',
??????????????????????? title: 'Welcome',
??????????????????????? autoScroll:true
??????????????????? }]
??????????????? })
???????????? ]
??????? });
???????
???????
??????? //var loader=new Ext.tree.TreeLoader({
??//?url:"treedata.js"
??//});
??var root=new Ext.tree.AsyncTreeNode({
???id:"root",
???text:"Examples",
???hrefTarget:"_blank",
???leaf:false,
???children:[{
????id: 1,
????text: 'Floating Windows Example',
????children:[{id:2,text:'Hello World Window Example',href:"hello.html",hrefTarget:"content",leaf:true}
????]
????},
????{
????id: 5,
????text: 'Drag and Drop Example',
????children:[{id:6,text:'Grid to Grid Drag and Drop Example',href:"dnd_grid_to_grid.html",hrefTarget:"content",leaf:true}
????]
????},
????{
????id: 7,
????text: 'Sliding Windows Example',
????children:[{id:7,text:'GMap Window Example',href:"gmap.html",hrefTarget:"content",leaf:true}
????]
????}
???]
??});
??var tree=new Ext.tree.TreePanel({
???id:"0",
???title:"Extjs静态树",
???renderTo:"tree",
???root:root,
???width:300
??});
??//tree.on("click",function(node,event){
???? //??? viewport.findById("tabs").add({
???? //??? ?title:node.text,
???? //??? ?closable:true,
???? //??? ?autoLoad:{url: node.attributes.url, scripts:true}
???? //??? }).show();
??//});
?});

</script>
?<style type="text/css">
??html, body {
???????? font:normal 12px verdana;
???????? margin:0;
???????? padding:0;
???????? border:0 none;
???????? overflow:hidden;
???????? height:100%;
???? }
??p {
????? margin:5px;
??}
???? .settings {
???????? background-image:url(../shared/icons/fam/folder_wrench.png);
???? }
???? .nav {
???????? background-image:url(../shared/icons/fam/folder_go.png);
???? }
??? </style>
</head>
<body>
?
?? <div id="north">
???? <p>EXT2.2 Test</p>
?? </div>
?? <div id="west">
?? ?<div id="tree"></div>
?? </div>
?? <div id="center1">
?? ?<iframe name="content" width="800" height="500" ></iframe>
?? </div>
?? <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
?? </div>
?? <div id="south" align="right">
???? <p>By Roger</p>
?? </div>
?
?
</body>
</html>

浮动窗口js代码：

/*
?* Ext JS Library 2.2
?* Copyright(c) 2006-2008, Ext JS, LLC.
?* licensing@extjs.com
?*
?* http://extjs.com/license
?*/

Ext.onReady(function(){
??? var win;
??? var button = Ext.get('show-btn');

??? button.on('click', function(){
??????? // create the window on the first click and reuse on subsequent clicks
??????? if(!win){
??????????? win = new Ext.Window({
??????????????? applyTo???? : 'hello-win',
??????????????? layout????? : 'fit',
??????????????? width?????? : 500,
??????????????? height????? : 300,
??????????????? closeAction :'hide',
??????????????? plain?????? : true,
??????????????? items?????? : new Ext.TabPanel({
??????????????????? applyTo??????? : 'hello-tabs',
??????????????????? autoTabs?????? : true,
??????????????????? activeTab????? : 0,
??????????????????? deferredRender : false,
??????????????????? border???????? : false
??????????????? }),

??????????????? buttons: [{
??????????????????? text???? : 'Submit',
??????????????????? disabled : true
??????????????? },{
??????????????????? text???? : 'Close',
??????????????????? handler? : function(){
??????????????????????? win.hide();
??????????????????? }
??????????????? }]
??????????? });
??????? }
??????? win.show(button);
??? });
});

googlemap代码：

/*
?* Ext JS Library 2.2
?* Copyright(c) 2006-2008, Ext JS, LLC.
?* licensing@extjs.com
?*
?* http://extjs.com/license
?*/

Ext.onReady(function(){

??? var mapwin;
??? var button = Ext.get('show-btn');

??? button.on('click', function(){
??????? // create the window on the first click and reuse on subsequent clicks
??????? if(!mapwin){

??????????? 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();
???????
??? });
???
?});

/*
?* 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);

拖拽效果代码：

/*
?* Ext JS Library 2.2
?* Copyright(c) 2006-2008, Ext JS, LLC.
?* licensing@extjs.com
?*
?* http://extjs.com/license
?*/

/*
?* Ext JS Library 2.1
?* Copyright(c) 2006-2008, Ext JS, LLC.
?* licensing@extjs.com
?*
?* http://extjs.com/license
?*/

Ext.onReady(function(){
?
??? var myData = {
??records : [
???{ name : "Rec 0", column1 : "0", column2 : "0" },
???{ name : "Rec 1", column1 : "1", column2 : "1" },
???{ name : "Rec 2", column1 : "2", column2 : "2" },
???{ name : "Rec 3", column1 : "3", column2 : "3" },
???{ name : "Rec 4", column1 : "4", column2 : "4" },
???{ name : "Rec 5", column1 : "5", column2 : "5" },
???{ name : "Rec 6", column1 : "6", column2 : "6" },
???{ name : "Rec 7", column1 : "7", column2 : "7" },
???{ name : "Rec 8", column1 : "8", column2 : "8" },
???{ name : "Rec 9", column1 : "9", column2 : "9" }
??]
?};

?// Generic fields array to use in both store defs.
?var fields = [
??? {name: 'name', mapping : 'name'},
??? {name: 'column1', mapping : 'column1'},
??? {name: 'column2', mapping : 'column2'}
?];
?
??? // create the data store
??? var firstGridStore = new Ext.data.JsonStore({
??????? fields : fields,
??data?? : myData,
??root?? : 'records'
??? });
?

?// Column Model shortcut array
?var cols = [
??{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
??{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
??{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
?];
???
?// declare the source Grid
??? var firstGrid = new Ext.grid.GridPanel({
??ddGroup????????? : 'secondGridDDGroup',
??????? store??????????? : firstGridStore,
??????? columns????????? : cols,
??enableDragDrop?? : true,
??????? stripeRows?????? : true,
??????? autoExpandColumn : 'name',
??????? width??????????? : 325,
??region?????????? : 'west',
??????? title??????????? : 'First Grid'
??? });

??? var secondGridStore = new Ext.data.JsonStore({
??????? fields : fields,
??root?? : 'records'
??? });
?
??? // create the destination Grid
??? var secondGrid = new Ext.grid.GridPanel({
??ddGroup????????? : 'firstGridDDGroup',
??????? store??????????? : secondGridStore,
??????? columns????????? : cols,
??enableDragDrop?? : true,
??????? stripeRows?????? : true,
??????? autoExpandColumn : 'name',
??????? width??????????? : 325,
??region?????????? : 'center',
??????? title??????????? : 'Second Grid'
??? });

?
?//Simple 'border layout' panel to house both grids
?var displayPanel = new Ext.Panel({
??width??? : 650,
??height?? : 300,
??layout?? : 'border',
??renderTo : 'panel',
??items??? : [
???firstGrid,
???secondGrid
??],
??bbar??? : [
???'->', // Fill
???{
????text??? : 'Reset both grids',
????handler : function() {
?????//refresh source grid
?????firstGridStore.loadData(myData);
?????
?????//purge destination grid
?????secondGridStore.removeAll();
????}
???}
??]
?});

?// used to add records to the destination stores
?var blankRecord =? Ext.data.Record.create(fields);

?/****
?* Setup Drop Targets
?***/
?// This will make sure we only drop to the view container
?var firstGridDropTargetEl =? firstGrid.getView().el.dom.childNodes[0].childNodes[1];
?var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
??ddGroup??? : 'firstGridDDGroup',
??copy?????? : true,
??notifyDrop : function(ddSource, e, data){
???
???// Generic function to add records.
???function addRow(record, index, allItems) {
????
????// Search for duplicates
????var foundItem = firstGridStore.find('name', record.data.name);
????// if not found
????if (foundItem? == -1) {
?????firstGridStore.add(record);
?????
?????// Call a sort dynamically
?????firstGridStore.sort('name', 'ASC');
?????
?????//Remove Record from the source
?????ddSource.grid.store.remove(record);
????}
???}

???// Loop through the selections
???Ext.each(ddSource.dragData.selections ,addRow);
???return(true);
??}
?}); ?

?
?// This will make sure we only drop to the view container
?var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
?
?var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
??ddGroup??? : 'secondGridDDGroup',
??copy?????? : false,
??notifyDrop : function(ddSource, e, data){
???
???// Generic function to add records.
???function addRow(record, index, allItems) {
????
????// Search for duplicates
????var foundItem = secondGridStore.find('name', record.data.name);
????// if not found
????if (foundItem? == -1) {
?????secondGridStore.add(record);
?????// Call a sort dynamically
?????secondGridStore.sort('name', 'ASC');
???
?????//Remove Record from the source
?????ddSource.grid.store.remove(record);
????}
???}
???// Loop through the selections
???Ext.each(ddSource.dragData.selections ,addRow);
???return(true);
??}
?});
});

热点排行