PDA

View Full Version : Update tab content after combo selection



springrider
25 Oct 2010, 4:43 PM
Good morning
I have been googling for a while and didn' t find any suitable solution.
I am trying to mix a combobox listing list of countries with a tabpanel containing maps (using the Ext.ux.GMapPanel extension). The idea is when i select a country, i refresh my maps and add the KML of the country.

I set up everything but i don't know how to make my combobox interacting with the tabs and refresh them by updating the MapURL property of my maps using the combo value :



Ext.onReady(function(){
....
var combo = new Ext.form.ComboBox({
store: store,
displayField:CountryName',
valueField:'CountryID',
region:'north',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a project...',
selectOnFocus:true
//,applyTo: 'local-states'
});


// second tabs built from JS
var tabs = new Ext.TabPanel({
//renderTo: 'tabsMap',
activeTab: 0,
region:'center',
width:600,
height:450,
plain:true,
defaults:{autoScroll: false},
items:[{
title: 'First map',
items:new Ext.ux.GMapPanel({
id: 'map_first',
width:590,
height:450,
gmapType: 'map',
zoomLevel: 3,
setCenter: {
lat: -2,
lng: 179
},
mapURL:'http://www.....Country1a.kmz'
})//,autoLoad:'ajax1.htm'

},{
title: 'second map',
items:new Ext.ux.GMapPanel({
id: 'track_second',
width:590,
height:450,
gmapType: 'map',
zoomLevel: 3,
setCenter: {
lat: -2,
lng: 179
},
mapURL:'http://www.....Country1b.kmz'
})
}
]
});
....

Thanks in advance for your help

Sylvain

springrider
25 Oct 2010, 6:25 PM
OK, I found a solution by removing old tabs and adding new ones with the same position and name.
Not sure, it is the most effective solution but it works.

In case it is helpful to someone:


var tabs = new Ext.TabPanel({
activeTab: 0,
region:'center',
width:600,
margins: '0 0 0 0',
height:350,
plain:true,
defaults:{autoScroll: false},
defaults: {
xtype: 'gmappanel',
gmapType: 'map',
zoomLevel: 3,
setCenter: {
lat: -2,
lng: 179
}
},

items:[{
title: 'Map 1',
id: 'map1',
mapURL:'http://www...default.kmz'
},{
title: 'Map 2',
id: 'map2',
disabled:true
}
]
});
combo.on('select', function() {
tabs.remove('map1', true);
tabs.remove('map2', true);

tab0 = tabs.add({
title: 'Map 1',
id: 'map1',
mapURL:'http://www....' + combo.getValue() + '.kmz'
});
tab1 = tabs.add({
title: 'Map 2',
id: 'map1',
mapURL:'http://www....' + combo.getValue() + '.kmz'
});

tabs.setActiveTab(tab0);
tabs.doLayout(true,true);

});