The content of tab panels - easy to define in separate script files?
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
One way (maybe not the right way)
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...
Code:
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();}
}
}
}