PDA

View Full Version : TabPanel interaction



mescalito2
17 Feb 2011, 4:59 AM
Hi there! I have a tab panel of three elements. The first tab is form and the second tab is a google map gmap. I want to change the location of the map with information the user insert in the form, but I have no idea how to make them interact each other :((

Please help me

Here is my code:


var panel, zipcode, city, state;

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {



//+++++++++++ Form +++++++++++
var viewport = new Ext.form.FormPanel({
title: 'Form',
fullscreen: true,
scroll: 'vertical',
dockedItems:[{
xtype: 'toolbar',
title: 'Login Form',
ui: 'light'
}],
items: [{
xtype: 'fieldset',
id: 'loginFormSet',
title: '',
items: [
{
xtype: 'emailfield',
placeHolder: 'Zip Code',
name: 'zipcode',
id: 'zipcode'
}, {
xtype: 'textfield',
placeHolder: 'City',
name: 'city',
id: 'city'
}, {
xtype: 'textfield',
placeHolder: 'State',
name: 'state',
id: 'state'
}, {
xtype: 'checkboxfield',
id: 'RememberMe',
name: 'RememberMe',
label: 'Save login?',
labelWidth: '40%'
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {
doLogin();
}
}
]
}]
});

var doLogin = function()
{
this;
if (viewport.getValues().zipcode){
zipcode = viewport.getValues().zipcode;
//map();
panel.setActiveItem(1);

} else if (viewport.getValues().state && viewport.getValues().city){
panel.setActiveItem(1);
} else {
Ext.Msg.alert('Alert', 'You must enter a zip code OR a city and state' ,Ext.emptyFn);
}
}

//=========== Forecast =============
var forecastTplate = new Ext.Component({
title: 'Forecast',
cls: 'card1 demo-data',
scroll: 'vertical',
tpl: [
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{date}</div>',
'<tpl for="weatherIconUrl"><img src="{value}"/></tpl>',
'<span class="temp">{tempMaxF}&deg;<span class="temp_low">{tempMinF}&deg;</span></span>',
'</div>',
'</tpl>',
'</div>'
]
});

var refresh = function(position) {
var coords = position || map.geo.coords;
if (coords) {
map.update(coords);

Ext.util.JSONP.request({
url: 'http://www.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: '23f6a0ab24185952101705',
q: '94301', // Palo Alto
format: 'json',
num_of_days: 5
},

callback: function(result) {
var weather = result.data.weather;

if (weather) {
forecastTplate.update(weather);


/*panel.update(weatherTpl.applyTemplate(weather));
panel.scroller.scrollTo({
x: 0,
y: 0
});*/
} else {
forecastTplate.getContentTarget().update('No Results Available');
}
}
});
}
};
// &&&&&&&&&&&&&&&& MAP &&&&&&&&&&&
var map = new Ext.Map({
title: 'Map',
id: 'MapN',
//useCurrentLocation: true,
mapOptions: {
zoom: 11
},
listeners: {
maprender: function(comp, map) {
geocoder = new google.maps.Geocoder();
console.log(viewport.getValues().zipcode+"------------");
var geocoderRequest = {
address: 'chicago'
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
refresh(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
title : 'Sencha HQ',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
});
}
}
});

panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [viewport , map, forecastTplate]
});

var tabBar = panel.getTabBar();
tabBar.addDocked({
cls: 'refreshBtn',
xtype: 'button',
ui: 'plain',
iconMask: true,
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});
panel.doComponentLayout();
}
});