floating windows, drag and drop and google maps

最新推荐文章于 2022-09-02 14:49:39 发布

liliugen

最新推荐文章于 2022-09-02 14:49:39 发布

阅读量149

点赞数

分类专栏： AJAX 文章标签： Windows Google EXT CSS JavaScript ViewUI

AJAX 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

树形结构代码：

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

liliugen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
floating windows, drag and drop and google maps

树形结构代码：&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;Ext2.2 Demo&lt;/title&gt; &lt;link rel="stylesheet" type=&qu
复制链接

扫一扫