PDA

View Full Version : Carousel only slide on Title... Create Back Button in TabPanel for Nesteslist



Monk1988
26 Jul 2011, 12:43 PM
Hallo,

srry, for my bad English...

I have 2 Problems:

I have two "Nestedlists" in a "Carousel". In Chrome its very well, but on my Android Phone it slides only on the "Titlebar" How can i fix that?

My Code:

Index.js

Ext.setup({
icon: '../img/icon_57.png',
//tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: '../img/startup.png',
glossOnIcon: false,
onReady: function(){


new Ext.Carousel({
fullscreen: true,
style: "background-color:red;",
items: [NewsNestedList, DatesNestedList ]
});


}
});

news.js


Ext.regModel('NewsList', {
idProperty: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'title', type: 'string'},
{name: 'customtitle', type: 'string'},
{name: 'description', type: 'string'}
]
});


var newsstore = new Ext.data.TreeStore({
model: 'NewsList',
proxy: {
type: 'ajax',
url: 'api.php?load=news',
reader: {
type: 'tree',
root: 'content'
}
}
});


var NewsNestedList = new Ext.NestedList({
fullscreen: true,
title: 'Neuigkeiten',

displayField: 'customtitle',
getDetailCard: function(record, parentRecord) {
return new Ext.Panel({
value: "Lade Daten...",
modal: true,
styleHtmlContent: true,
scroll: 'vertical'
});
},
store: newsstore,
});


NewsNestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {

var ds = subList.getStore(),
r = ds.getAt(subIdx);

id = (r.get('id') != '') ? r.get('id') : 0;

Ext.Ajax.request({
url: 'api.php?load=news&id=' + id,
success: function(response) {
data = $.parseJSON(response.responseText);
detailCard.update(data.content.description);
},
failure: function() {
detailCard.setValue("Loading failed :(");
}
});
});


Because of this Problem, i changed the Index.js to this:


Ext.setup({
icon: '../img/icon_57.png',
//tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: '../img/startup.png',
glossOnIcon: false,
onReady: function(){


new Ext.TabPanel({
id: "TopPanel",
fullscreen: true,
style: "background-color:red;",
items: [NewsNestedList, DatesNestedList ]
});


}
});

And added "useToolbar: false" to the NestedList Object.
But how can i add a Back Button to the "TabPanel", to go back from the DetailCard to the Treeview?

I need only one Solution of that 2 Problems.

With Friendly Greets
Monk1988 :)