ExtJS Google Map API

来了上海后,博客变成周记本了,O(∩_∩)O哈哈~。那个desktop我已经搞定了,看起来貌似很难,然而官方是有desktop的example的,打开它的源码,只要看明白了也就觉得不难了。
要想将自己的window放进desktop中,那么这个window就必须继承自Ext.app.Module(记得要把example里面的App.js、Desktop.js、Module.js、StartMenu.js及TaskBar.js导入,当然也别忘了样式文件。)。例如:

MyDesktop.ChannelSearchWin = Ext.extend(Ext.app.Module, {
        init : function(){
        this.launcher = {
	   iconCls:'icon-grid',
            text: '渠道商查询',
            handler : this.createWindow,
            scope: this,
            windowId:'channel-search-win'
        }
    },
    id:'channel-search-win',
    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('channel-search-win');
        if(!win){
            win = desktop.createWindow(new NeekeChannelSearchWin().initialConfig);
        }
        win.show();
    }
});

接着创建桌面,这个桌面像一个最外围的容器,里面存放所有的window。

MyDesktop = new Ext.app.App({
	init :function(){
		Ext.QuickTips.init();
	},
  //初始化所有桌面窗体
	getModules : function(){
		return [
 
			new MyDesktop.ChannelSearchWin()]
	},
 
    //开始菜单
    getStartConfig : function(){
        return {
            title: 'Welcome Administrator',
            iconCls: 'user',
            toolItems: [{
                text:'退出系统',
                iconCls:'logout',
				handler: function(){
 
					window.location = 'index.cfm';
				},
                scope:this
            }]
        };
    }
});

这就是最简单的方式了,如果要想实现其他功能或效果那就得自己动手修改那几个核心文件了。
desktop完工之后,又开始搞Google Map API与ExtJS的整合,要做出如下图所示效果,

我要将物流单经过的城市都在地图上标记出来,并按照时间顺序编号连线,反之则用红色,标记点被点击时还要局部放大该点显示在一个小地图中,如果最终状态为“客户已签收”,则终点为收件点并与其他点用蓝色线连接。自从上班后,我接到的任务几乎都是我之前从未做过的。先花了几个小时看了看Google Map API,大概了解了一下基础知识。接着又去ExtJS官方网站找了找相关应用,在其Blog里被我找到了好东西Ext.ux.GMapPanel。把Google Map API和Ext.ux.GMapPanel源码对应着看,很快就能发现其实这个Ext.ux.GMapPanel写的非常简单。写了一个月左右的ExtJS了,越来越觉得这个东西写起来非常的惬意。


除非另有声明,本站遵循【署名-非商业性使用-相同方式共享 3.0 共享协议】授权。

转载原创文章请注明,转载自:Neeke[http://www.ineeke.com]

本文链接: http://www.ineeke.com/archives/extjs-google-map-api/

2009年6月8日 | 归档于 ExtJS | 8 条评论
  1. 2010年8月10日 11:52 | #1

    大哥,我发现你全才了,,哈哈
    coolite我玩过。。也是衍生的哈

  2. wei
    2009年6月23日 09:35 | #3

    难道说blog主是邵阳人。》?
    这也可以。?

  3. 2009年6月10日 00:12 | #5

    什么是 ExtJS Google Map API ?你好专业

    • 2009年6月14日 16:27 | #6

      ExtJS和Google Map没有关系,被我的标题误导啦,O(∩_∩)O哈哈~

  4. 2009年6月9日 12:11 | #7

    有潜力,要学习的太多了。

  5. 2009年6月8日 22:35 | #8

    看起来不错,支持下。

发表评论

XHTML: 您可以使用这些标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
n:-zy n:-zr n:-zan n:-xf n:-wx n:-tz n:-tt n:-ts n:-sy n:-st n:-ss n:-sk n:-qd n:-pz n:-lh n:-kun n:-ku n:-hx n:-hd n:-gt n:-gg n:-bz

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!