PDA

View Full Version : Dynamic HTML Insertion Into a Tab



bakerdal
25 May 2011, 7:43 PM
I am preloading a js variable with an HTML fragment.

I need to dynamically select a tab (1 of 4) insert and HTML fragment (with punctuation) into one of my tabs.

Fragment of static declaration..

onReady: function () {
var mytab = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Home',
html: '',
id: 'hometab',
cls: 'card1'
}, {
title: 'About Us',
html: '',
id: 'abouttab',
cls: 'mytext'
}, {

etc......

I tried putting the js variable into the html: declaration and using escape/unescape etc.. to deal with the punctuation that is in actual HTML... I get inconsistent results...

I did some searches in Google/Forums but I did not see an specific example of this off hand. I have 4 other projects going and I just can't burn up a ton of time sifting through all the info at this point.

js variable... select specific tab... insert variable(html)...

Any suggestions... Thanks...

bakerdal
26 May 2011, 4:10 PM
Seeing how no one answered my question, I will post the answer for the next poor soul who asks this question.

Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function () {
hometemplate = new Ext.Template("");
abouttemplate = new Ext.Template("");
maptemplate = new Ext.Template("");
offerstemplate = new Ext.Template("");
var mytab = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Home',
html: '',
id: 'hometab',
cls: 'card1',
tpl: hometemplate,
scroll: 'both'
}, {
title: 'About Us',
html: '',
id: 'abouttab',
cls: 'mytext',
tpl: abouttemplate,
scroll: 'both'
}, {
title: 'Map',
html: '',
id: 'maptab',
cls: 'card3',
tpl: maptemplate,
scroll: 'both'
}, {
title: 'Offers',
html: '',
id: 'offerstab',
cls: 'card4',
tpl: offerstemplate,
scroll: 'both'
}]
});
var tab1 = mytab.items.items[0]
var tab2 = mytab.items.items[1]
var tab3 = mytab.items.items[2]
var tab4 = mytab.items.items[3]
tab1.update(vhome);
tab2.update(vaboutus);
tab3.update(vmap);
tab4.update(voffers);
}
});

Whatever you set the js variables: vhome, vaboutus, vmap, voffers to will be injected and displayed...
?
The javascript variables vhome, vaboutus, vmap, and voffers are not shown because they are constructed dynamically and injected into the page using server side code at load. This code takes care of the dynamic HTML insertion. Had to watch serveral videos, and read about ten articles to put this together. Great support in this forum... NOT...

BTW I also found an undocumented behaviour with the Sencha Touch product that will prevent injected HTML from rendering at all. I have resolved it with a fix on my end. If anyone runs into a problem where your app errors out inconsistently based on the HTML you inject I will be happy to help you for free...

JRS
22 Jul 2011, 11:37 AM
bakerdal,

Thanks for posting the solution. I've been searching quite a bit on how to do this - Sencha should really add this to their documentation or tutorials.

Thanks
JRS

javismiles
24 Jul 2011, 9:27 AM
i am new to sencha since a few days ago,
i have noticed, as you have indicated that responses in this forum to requests for help are very very few, to say the least

is there any other better Sencha forum than this one around? where sencha experts help people more actively?

thanks very much
jav

JRS
25 Jul 2011, 7:25 AM
Hi Javismiles,

Vimeo has some videos from sencha conferences that are quite good. Also google searches will give you some sites with sample codes and tutorials.

It appears most people come from an Extjs background and seem to be able to follow sencha resources - I am finding very difficult to get up to speed with Sencha documentation.

Sencha has premium support perhaps all the help is going into that forum.


Good luck
JRS