extJs gmappanel在extJs门户中 [英] extJs gmappanel inside extJs portal

问题描述

我想在extJs门户中使用extJS Gmappanel。以下是extJS门户的示例。在googleportlet里面，我需要有google地图。

我们如何在extJs门户中创建extjs gmappanel？

  Ext.define（'Ext.app.Portal'，{
 extends：'Ext.container.Viewport'，
 use：['Ext。 app.PortalPanel'，'Ext.app.PortalColumn'，'Ext.app.GridPortlet'，'Ext.app.ChartPortlet']，
 getTools：function（）{
 return [{
 xtype：'tool'，
 type：'gear'，
 handler：function（e，target，panelHeader，tool）{
 var portlet = panelHeader.ownerCt; 
 portlet .setLoading（'Working ...'）; 
 Ext.defer（function（）{
 portlet.setLoading（false）; 
}，2000）; 
} 
 $] 
 $ b initComponent：function（）{
 var content ='< div class =portlet-content>'+ Ext.example .shortBogusMarkup +'< / div>'; 
 Ext.apply（this，{
 id：'app-viewport' ，
 layout：{
 type：'border'，
 padding：'0 5 5 5'
}，
 items：[{
 id： 'app-header'，
 xtype：'box'，
 region：'north'，
 height：70，
 html：'Dimestore Reports'
} {
 xtype：'container'，
 region：'center'，
 layout：'border'，
 items：[
 {
 id：' app-portal'，
 xtype：'portalpanel'，
 region：'center'，
 items：[
 
 {
 id：'col- 1'，
项目：[
 {
 id：'portlet-1'，
标题：'google'，
工具：this.getTools（），
项目：{}，/ /我想要ExtJs Form在这里。 
 listeners：{
'close'：Ext.bind（this.onPortletClose，this）
} 
}，
 {
 id：'portlet- 2'，
标题：'grid'，
工具：this.getTools（），
 html：content，
 listeners：{
'close'绑定（this.onPortletClose，this）
} 
} 
] 
}] 
}] 
}] 
}）; 
 this.callParent（arguments）; 
}，
 onPortletClose：function（portlet）{
 this.showMsg（''+ portlet.title +'已删除） 
}，
 showMsg：function（msg）{
 var el = Ext.get（'app-msg'），
 msgId = Ext.id（）; 
 this.msgId = msgId; 
 el.update（msg）.show（）; 
 Ext.defer（this.clearMsg，3000，this，[msgId]）; 
}，
 clearMsg：function（msgId）{
 if（msgId === this.msgId）{
 Ext.get（'app-msg'）。hide ; 
} 
} 
  

}）;

请帮助

谢谢

解决方案

我得到了答案

我只是将gmap放在库中的Ext.ux.GMapPanel创建一个Gmappanel

  Ext.create（'Ext.ux.GMapPanel'，{
 autoShow：true，
 layout：'fit'，
 closeAction：'hide'，
 height：300，
 border：false，
 items：{
 xtype：'gmappanel' ，
中心：{
 geoCodeAddr：'pune，maharashtra'，
标记：{title：'Pune'} 
}，
 
} 
 $）
}] 
}] 
 
}）
  

使用上面的代码

谢谢

I wanted extJS Gmappanel inside the extJs portal. Below is the sample extJS portal. Inside "google" portlet, I need to have google map.

How can we create extJs gmappanel inside the extJs portal?

Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
getTools: function(){
    return [{
        xtype: 'tool',
        type: 'gear',
        handler: function(e, target, panelHeader, tool){
            var portlet = panelHeader.ownerCt;
            portlet.setLoading('Working...');
            Ext.defer(function() {
                portlet.setLoading(false);
            }, 2000);
        }
    }];
},

initComponent: function(){
    var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
    Ext.apply(this, {
        id: 'app-viewport',
        layout: {
            type: 'border',
            padding: '0 5 5 5' 
        },
        items: [{
            id: 'app-header',
            xtype: 'box',
            region: 'north',
            height: 70,
            html: 'Dimestore Reports'
        },{
            xtype: 'container',
            region: 'center',
            layout: 'border',
            items: [
            {
                id: 'app-portal',
                xtype: 'portalpanel',
                region: 'center',
                items: [

                {
                    id: 'col-1',
                    items: [
                    {
                        id: 'portlet-1',
                        title: 'google',
                        tools: this.getTools(),
                        items: {}, //I want ExtJs Form here.
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    },
                    {
                        id: 'portlet-2',
                        title: 'grid',
                        tools: this.getTools(),                         
                        html: content,
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }
                    ]
                }]
            }]
        }]
    });
    this.callParent(arguments);
},
onPortletClose: function(portlet) {
    this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg){
    var el = Ext.get('app-msg'),
    msgId = Ext.id();
    this.msgId = msgId;
    el.update(msg).show();
    Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
    if (msgId === this.msgId) {
        Ext.get('app-msg').hide();
    }
}

});

please help

thanks

解决方案

I got the answer

I just put the gmap in 'Ext.ux.GMapPanel' in library & create a Gmappanel

Ext.create('Ext.ux.GMapPanel', {
                    autoShow: true,
                    layout: 'fit',                        
                    closeAction: 'hide',                       
                    height:300,
                    border: false,
                    items: {
                        xtype: 'gmappanel',
                        center: {
                            geoCodeAddr: 'pune,maharashtra',
                            marker: {title: 'Pune'}
                        },

                    }
                })
            }]
        }]

    })

using above code

thanks

这篇关于extJs gmappanel在extJs门户中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！