PDA

View Full Version : TabPanel with many AJAX loadings



gBat
25 Mar 2011, 6:48 AM
Hi all,

I'm new at using Sencha Touch and Ext.js so I'm a bit lost.

I have to build a big application with 5 distincts parts. Each part is supposed to make several requests to retrieve JSON data, and build itself with these data (nested list, carousels for leaf item view, map views, videos views, etc...). I would like to use a TabPanel layout with docked items in order to control the navigation between each part.

I managed to build the first part of my app, with differents views and elements and it works fine. The problem is about switching from this part to another. In fact, my first part creates a NestedList from JSON data, and my second one create another different list. My problem is to "render" and hide theses objects when I need it, that's to say when I switch from a part to another. In fact, I managed to construct the different parts, but I can't make the second one visible.

Here is a my index.js :




var weatherTab;
var tvTab;
var tabpanel;
var mainPanel;


Ext.setup({
icon: PREFIX + 'img/icon.png',
tabletStartupScreen: PREFIX + 'img/startup.jpg',
phoneStartupScreen: PREFIX + 'img/startup.jpg',
glossOnIcon: false,


onReady : function() {


// --- Weather Part
weatherTab = new Ext.Tab({
id : "weather",
title: 'weather',
iconCls: 'info',
cls: 'card1',
scroll : false
});

// --- Videos Part
tvTab =new Ext.Tab({
id : "tv",
title: 'tv',
iconCls: 'compass1',
cls: 'info',
scroll:true
});

// --- Functions that create elements for each parts from JSON
weatherTab.addListener('activate',weatherPart);
tvTab.addListener('activate',tvPart);

// --- Tabs
tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'dark',
cardSwitchAnimation: 'fade',
defaults: {
scroll: false
},
items :[tvTab,weatherTab]
})
},
})

weatherPart and tvPart functions are like this :


var regionsNestedList;
var mapButton;
var carouselSpot;
var spotDetailView;
var spotMap;

function weatherPart(e){

// --- Loading
Ext.getBody().mask('Loading...', 'x-mask-loading', false);


// --- Récupération de la liste de régions/pays/départements/villes/spots
Ext.Ajax.request({

url: '/index.php/sencha/getWeatherRegions/',
method : "POST",
success: function(response, opts) {

// formattage de la réponse en objet
var data = eval('('+response.responseText+')');
data.id = "root";

// Model de données
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});

// Data provider
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});


// -- Retourne la "vue" à utiliser en fin de liste
var spotView = function (){

var spotPanel =new Ext.Panel({
layout: {
type: 'fit',
align: 'fit'
},
scroll:false,
defaults: {
flex: 1
}
});

return spotPanel;
}

regionsNestedList = new Ext.NestedList({
fullscreen: true,
title: 'Select Spots',
displayField: 'text',
getDetailCard: spotView,
store: store,
onItemDisclosure:true
});
regionsNestedList.toolbar.add({xtype: 'spacer'});

// -- Selection d'un element de fin de liste
regionsNestedList.on('leafitemtap', getSpotForecast );

regionsNestedList.on('beforecardswitch', onBeforecardswitch );


// --- Ajout du contenu dans la rubrique courrante


Ext.getBody().unmask();
}
});


}


// -- Appel lors d'un tap sur le back button, on remove le mapButton de la toolbar
function onBeforecardswitch(t, newCard, oldCard, index, animated ){

if(mapButton != undefined && mapButton.rendered != undefined && mapButton.rendered){
regionsNestedList.toolbar.remove(mapButton,true);
// mapButton.destroy();
regionsNestedList.toolbar.doLayout();
}

}

function onMapButtonClicked(){

console.log(spotDetailView)
if (spotDetailView.items.items[0].hidden) {
spotDetailView.setActiveItem(0);
mapButton.setIconClass('compass1');
} else {
spotDetailView.setActiveItem(1);
mapButton.setIconClass('delete');
}




}


function spotMap(){

return new Ext.Map({
mapOptions : {
center : new google.maps.LatLng(37.381592, -122.135672), //nearby San Fran
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
});


}


function getSpotForecast(subList, subIdx, el, e, detailCard) {

Ext.getBody().mask('Loading...', 'x-mask-loading', false);

Ext.Ajax.request({
url: '/index.php/sencha/spot/',
method : 'POST',
success: function(response) {


var days = eval('('+response.responseText+')');

items = [];
var spotTpl = Ext.XTemplate.from('day');

for (var i=0; i < days.length; i++) {

var dayPanel = new Ext.Panel({
fullscreen: false,
scroll: false,
tpl : spotTpl
});
dayPanel.update(days[i]);

items.push(dayPanel);


};


// --- Creation de la fiche spot = Carousel de forecast + MAP

// container
spotDetailView = new Ext.TabPanel({
layout: {
type: 'vbox',
align: 'stretch',
pack:'start'
},
cardSwitchAnimation:'pop',
scroll:false,
defaults: {
flex: 1
}
});

// carousel des forecasts
carouselSpot = new Ext.Carousel({
xtype: 'carousel',
items: items,
layout:'fit'
});

spotDetailView.tabBar.hide();// = true;
spotDetailView.add(carouselSpot);
spotDetailView.add(spotMap());



mapButton = new Ext.Button({
iconMask: true,
iconCls: 'compass1',
handler: onMapButtonClicked
});


regionsNestedList.toolbar.add(mapButton);
regionsNestedList.toolbar.doLayout();






detailCard.add(spotDetailView);
detailCard.doLayout();

Ext.getBody().unmask();

},
failure: function() {

detailCard.update("Loading failed.");

Ext.getBody().unmask();
}
});

}



I'm a bit stuck. I 'm looking for the right way to display each part when I want.
Thanks for reading.

Bat

gBat
27 Mar 2011, 11:56 PM
No one? :-/

JeffWithG
15 Apr 2011, 3:38 PM
Did you ever get it figured out? I'm new too, I'm needing to hide/show tab buttons depending on the current card. Not sure how to do this.