View Full Version : Include HTML-File and other things

7 Jul 2011, 2:02 AM

I just started yesterday with Sencha Touch and already have some problems ^^

This is my code:

var receptionC = new Ext.Carousel({
iconCls: 'team',
cls: 'card5',
title: 'Rezeption',
items: [{
html: "<h1>Karl Marx Rezeption</h1>"
}, {
html: "<h1>Karl Marx Kritiker</h1>"
}, {
html: "<h1>Karl Marx Diskussionen</h1>"
}, {
html: "<h1>Karl Marx Andenken DDR</h1>"
}, {
html: "<h1>Karl Marx Andenken Bundesrepublik</h1>"
}, {
html: "<h1>Karl Marx Andenken International</h1>"

(Nevermind the Karl Marx-stuff, it's a university project about SEO and yeah, it's german ^^)

This Carousel is embedded into a tabPanel.

First question: is there a way to include html-files or something like that within the "html:"-tag? I have loads of text and it's pretty ugly to be forced to put it into one line.

Second Question: if it isn't possible, every time I try to use a CSS-class within Carousel, the hole application stops working and I can't figure out why. Within my tabPanel everything works fine, but not within the Carousel. Do I have to "re-declare" the css-file or something like that?

Last Question: is it possible to to put a navigation into a Carousel? One page has seven items and that isn't pretty if you have to swipe through them all. If possible, how do I make it?

I hope, I could make myself understandable - I'm from germany, so my english isn't the finest ^^

Thanks in advance :)

Greetings :)

Hanni Sullivan
7 Jul 2011, 4:08 AM
Hurray for Marxism. ;)

I would advise you to put your html (which I assume is static content) into Templates (http://dev.sencha.com/deploy/touch/docs/?class=Ext.Template). Each template could have a separate file. This would offer a relatively easy way of organizing your content.

Regarding your seven items and the carousel. Why a carousel at all? I would go with a nested list (inside a CardLayout (http://dev.sencha.com/deploy/touch/docs/?class=Ext.layout.CardLayout)) which shows your seven topics. On each click a card showing the content would slide in. Just like in the KitchenSink (http://dev.sencha.com/deploy/touch/examples/kitchensink/) example.

7 Jul 2011, 1:45 PM
Templates did the job for me, so thanks for that ^^

I tried to use the NestedList, but I can't even seem to get anything working with that.
Is there a very, very easy example how to build a NestedList? I couldn't get the examples in the kitchen sink or the ones that google "provided" me with.

7 Jul 2011, 8:09 PM
Hi, an example that may help you is in Sencha Touch download, the Oreilly App has an About index page that utilizes a nested list that imports the html from .html pages. HTH Paul