Adding tabs to my sencha touch app

Question

I have written following app.js class to get 3 tabs in my app using sencha touch. Code of app.js as follows:

new Ext.Application({  
             launch: function() {  

          new Ext.TabPanel({  
                sortable: true, // Tap and hold to sort  
                items: [{  
                title: 'Tab 1',  
                html: 'The tabs above are also sortable.(tap and hold)',  
                cls: 'card card5'  
            },  
            {
                title: 'Tab 2',  
                html: 'Tab 2',  
                cls: 'card card4'  
            },    
            {
                title: 'Tab 3',  
                html: 'Tab 3',  
                cls: 'card card3'  
            }]  
      });  
 }  
});

Do I have to create card card1 etc? in css or index.html?

Answer 1

You don't need to create nothing. These are just a config options.

The Sencha code will generate HTML for ya, with the classnames that apear in your code. You don't have to do nothing, that's the magic.

Sencha is a framework that populate HTML for ya. You define objects, and Sencha, in his turn, will generate HTML with all the properties that you will define in your JS files: Height, Width, Class, ID, Etc.

It doesn't generate CSS for ya. This part you will have to provide by yourself.

Hope that clear things a little more.

Shlomi.