PDA

View Full Version : inforWindow GmapPanel



macielcr7
10 Jan 2011, 3:02 PM
Hello I know the show infowindow gmapPanel ....

more'm doing an application which shows all the points ... correct the map ...

and when you click a link it uses the setCenter to place the point x in the center of the map
tbm most wanted when you clicked this link is appearing on the inforwindow

how can I do this?

my code ....



Ext.onReady(function(){

Ext.QuickTips.init();

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData=[],mkrs=[];
var menu;
var itens=[];
Ext.Ajax.request({
url : 'sql2.php'
,method : 'GET'
,scope : this
,success: function(response){
var dados, menus, gmp
dados = Ext.decode(response.responseText);

menus=dados.menu
gmp=dados.veiculos

Ext.getCmp('my_map').getMap().setCenter(new google.maps.LatLng(gmp[0].latitude, gmp[0].longitude));

Ext.each(gmp, function(v){
myData.push([ v.title, v.hora, v.ignicao, v.vel, v.ponto, v.distancia, v.online, v.panico, v.gps,v.codigo ]);

mkrs.push({
lat: v.latitude, lng: v.longitude,
marker: {
title: v.title,
id: 'm'+v.id,
infoWindow: {content: 'Descrição: '+v.title+'<br/> Modelo: '+v.modelo+'<br/>Distância: '+v.distancia }
},
sigle: true
});
},this)
//alert(dump(myData));
Ext.getCmp('panel').getStore().loadData(myData);
Ext.getCmp('my_map').addMarkers(mkrs);

Ext.each(menus, function(m){
itens.push({
text : m.text,
leaf:true,
id: m.id
});
});
//alert(dump(itens));
Ext.getCmp('vcl').setRootNode(
new Ext.tree.AsyncTreeNode({
text:'Online',
children:itens
})
);

}


});

var store = new Ext.data.ArrayStore({
fields: [
{name: 'title', type: 'string'},
{name: 'hora', type: 'time'},
{name: 'ignicao', type: 'string'},
{name: 'vel', type: 'string'},
{name: 'ponto', type: 'string'},
{name: 'distancia', type: 'string'},
{name: 'online', type: 'string'},
{name: 'panico', type: 'string'},
{name: 'gps', type: 'string'},
{name: 'codigo', type: 'string'}
]
});


store.loadData(myData);
menu={text:'Todos os veiculos', iconCls:'user', leaf:true};

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ region:'north', el: 'north', height:32 }),
{ region:'south', contentEl: 'south', split:true, height: 150, minSize: 100, maxSize: 200, collapsible: true, margins:'0 0 0 0', items:
new Ext.grid.GridPanel({
store: store, el:'topic-grid', id: 'panel',
columns: [
{header: "DESCRIÇÃO DO VEICULO", dataIndex: 'title', width: 100, sortable: true, id: 'title' },
{header: "HORÁRIO", dataIndex: 'hora', width: 100,sortable: true},
{header: "IGNIÇÃO",dataIndex: 'ignicao', width: 90,sortable: true},
{header: "VELOCIDADE",dataIndex: 'vel',width: 100,sortable: true},
{header: "PONTO MAIS PRÓXIMO",dataIndex: 'ponto',width: 380,sortable: true},
{header: "DISTÂNCIA DO PONTO",dataIndex: 'distancia',width: 310, sortable: true},
{header: "ON-LINE", dataIndex: 'online',width: 70,sortable: true},
{header: "PÂNICO",dataIndex: 'panico',width: 70,sortable: true},
{header: "GPS",dataIndex: 'gps',width: 50,sortable: true},
{id: 'codigo',header: "CÓDIGO",dataIndex: 'codigo',width: 50,sortable: true}
],
viewConfig: {
forceFit:true, enableRowBody:true, showPreview:true,
},
stripeRows: true,
autoExpandColumn: 'title',
height: 125,
width:screen.availWidth,
loadMask: true,
title: 'Array Grid',
stateful: true,
stateId: 'grid'
})
},{ region:'east', title: 'Dados', collapsible: true, split:true, width: 235, minSize: 175, maxSize: 400, layout:'fit', margins:'0 5 0 0', items:
new Ext.TabPanel({
border:false, activeTab:1, tabPosition:'bottom', items:[{ html:'<p>Dados do cliente selecionado (logado no sistema)</p>', title: 'Dados do Cliente', autoScroll:true },
new Ext.grid.PropertyGrid({
title: 'Dados do Veículo', closable: true, source: { "Tipo": "Passeio", "Marca": "Chevlolet", "Modelo": "Gol", "Cor": "Branca", "Placa": "HUV4545", "Ano Fabricação": "2008", "Ano Modelo": "2008"}})] }) },
{ 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: [
new Ext.tree.TreePanel({
title: 'Veiculos',
iconCls:'nav',
id:'vcl',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
rootVisible: false,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
text:'Online',
children:[{
text:'Listar Veículos',
expanded:true,
children: menu
}]}),
listeners: {
scope: this,
click: function(node){
var id = node.attributes.id;
id= id.split('|');
var lat = id[0];
var lng = id[1];

Ext.getCmp('my_map').getMap().setCenter(new google.maps.LatLng(lat,lng));
var a = Ext.getCmp('my_map').getCenter();
alert(a);

}
}

}),
{title:'Configurações', html:'<p>confirurações do sistema</p>',border:false, iconCls:'settings'},
{title:'Relatorios', html:'<p>Relatorios</p>', border:false, iconCls:'rel'},
{title:'Comandos',html:'<p>comandos</p>',border:false, iconCls:'coman' },
{title:'Endereços e Rotas',html:'<p>Endereços e Rotas</p>', border:false, iconCls:'end'},
{title:'Google Earth', html:'<p>Parametros para o google earth</p>', border:false, iconCls:'google' }]
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:

Gmap = new Ext.ux.GMapPanel({
contentEl:'center1', title: 'Mapa 01',closable:false,autoScroll:true, id:'my_map', zoomLevel: 14, gmapType: 'map',

mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: [],
markers: []

})
})
]
});




});