The content of tab panels - easy to define in separate script files?

[douglerner]

In the introduction at http://docs.sencha.com/touch/2-0/#!/...etting_started it explains how to create different "items" for different tabs.

The content for each tab is defined in that one script file though. That's nice for simple static examples, but if there is dynamic data, and not all of it is needed at once (a user may not click on all the tabs) is there an easy way to not load the content for each tab in one file and instead have the tab transitions go between separate script files, each loading their own content as needed?

Sorry for such a newbie question...

Thanks,

doug

[estesbubba]

With JavaScript it really doesn't matter if your components are in 1 file or 100. A good practice would be to have each tab's component in its own JavaScript file defining an xtype.

[douglerner]

Estesbubba,

What would be the syntax for replacing, say, this first object in the array of tab panels with a reference to go to a different script file instead of using the literal contents defined here?

{
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img src="images/someLogo.png" />',
'<h1>Some text goes here on this home page</h1>'
].join("")
},

Thanks for your help,

doug

[estesbubba]

change your html: to xtype:

[douglerner]

change your html: to xtype:

Hmm... Don't get how that would help yet. But I'm continuing to read the documentation.

Thanks,

doug

[douglerner]

Yes, I'm stuck. I've been reading and reading through the documentation, but don't see how changing the xtype accomplishes the goal here, of modularizing the contents of each tab panel into a separate source file.

In one document, for example, the following source is given.

Here we have both xtype and html together. So how would "changing html to xtype" help at all.

Is there a simple explanation somewhere of what xtype is?

All I really need to get going is to take the example used in the "Getting Started" example and instead of defining the content of all three tabs in one file I'd like to know how to define them in three separate files, each which only get loaded as needed.

Thanks,

doug


Ext.create('Ext.Container',{ fullscreen:true, layout:'vbox', items:[{ xtype:'panel', html:'message list', flex:1},{ xtype:'panel', html:'message preview', flex:2}]});

[MakrelJohnson]

Here's how I do it - but I'm far from a pro at this...
Note: I've yet to figure out how to access the elements in each tab until I click and show it. In case you were headed in that direction. I'm using Ext.select(td.class) but I only get Tab 0's elements until I click through all other tabs...

var MyTabPanels = Ext.create('Ext.tab.Panel', {
    height: 350,
    width: 525,
    activeTab: 0,
    items: [{
        title: 'First Tab Title',
        autoScroll: true,
        loader: {
            url: 'path/to/htmlFileWithMarkupAndScript.htm',
            contentType: 'html',
            scripts: true,
            loadMask: true,
            autoLoad: true
            listeners: {
                activate: function(tab){SomethingToDoWhenYouClickTheTab();}
            }
        }
    }

[douglerner]

Hi, Makrel.

Thanks for your note. I think my mind might not be working right or something, but after trying for several days I'm "just not getting Sencha." It's like dense framework within framework within framework.

The JavaScript syntax is fine. I see objects with properties and arrays and all that. But I just can't make heads or tails about what they are supposed to be doing, even after going through all the documentation I can find.

I stumbled across Jquery Mobile, and was able to accomplish what I was trying to do in a few hours, and it seems to work just fine, with sliding transitions, looking like an iPhone native app, etc. Maybe my mind is just oriented that way based on my age and past programming experience. I somehow feel Sencha might be more comprehensible with a better set of documentation and tutorials. I'm sure it is a fine and robust framework, but for me, for right now, "just getting it done" and working, it is easier for me in Jquery Mobile.

Thanks,

doug

[estesbubba]

Sencha products are great object oriented JavaScript frameworks. If you're coming from another object oriented language then Sencha should be enjoyable to use. I've been a Java programmer forever, and once I got past the quirks of JavaScript, have caught on pretty quick.

I would add if I'm going to learn a new language/framework, I wouldn't start with a preview release. As any developer knows, documentation usually comes last. Your best bet for learning Touch 2.0 would be to look at the guides for Ext JS 4.0 keeping in mind that the UI part will be slightly different. Stores, models, controllers, events, classes, MVC, etc. are going to be pretty much the same between the products.

If you're not understanding xtype then you haven't learned one of the core features of Sencha. Before trying to write an application you need to learn the core concepts first.

[douglerner]

Actually, I am coming from JavaScript. I've been doing server-side JavaScript almost constantly for the last 13 years using a special object-oriented database.

That is why the syntax of Sencha looks completely clear. And why I was very hopeful starting out with Sencha. I am very comfortable with JavaScript.

As I mentioned, I could immediately see the tabs were part of an array of objects in the constructor defined for the app. So syntactically I wasn't having any problems.

Perhaps the problem is, as you say, that I started with Sencha 2 instead of Sencha 1. So there simply weren't any explanations of what was going on. Yet, the documentation did say "start here". Unfortunately there just wasn't a complete explanation of what was happening. Even the URLs in the example, when turned into actual URLs, didn't go anywhere when I clicked on them.

Perhaps I will return to Sencha at some point. It certainly looks interesting. But I really needed to get started and just do something already, and despite several peoples' kind posts, including yours, I just wasn't finding the information I needed to get anything working. But I will revisit this again when I have some free time and when, hopefully, there is more tutorial documentation.

Thanks!

doug