PDA

View Full Version : [OPEN-297] the default renderTpl for Components/Containers is missing (null)



orangechicken
13 Sep 2010, 2:13 PM
In 0.93, Component declared a renderTpl (a div with baseCls, etc) but now in 0.94 the template has been removed (breaking lots of our code wherever we use basic Components and Containers). Can the renderTpl that now appears in Ext.lib.Panel be moved back up to Component?

Jamie Avins
13 Sep 2010, 3:53 PM
Thank you for the report.

TommyMaintz
15 Sep 2010, 4:13 AM
The reason for this is that in 0.94 renderTpl only applies to the inner structure of the component. The outer "el" of any component is created seperately. Could you provide some example code that broke because of this change so that I can help you determine how to reimplement that using the new structure?

orangechicken
15 Sep 2010, 10:35 AM
Sure. Not exact copy and paste, but the concept is this:


{ cls: 'my-container', items: [{ xtype: 'component', html: '<h1>A header?</h1>', cls: 'header' }, { xtype: 'list', data: [...] }] }

Obviously this is a little contrived. The purpose is to get the simplest component possible in the items. In 0.93, the "xtype: 'component'" part would render something like
<div class='header'><h1>A header?</h1></div>

In 0.94, it doesn't render.

ueilat
16 Sep 2010, 12:43 PM
same issue
http://www.sencha.com/forum/showthread.php?109692-Argh.-Can-t-get-0.94-working.-Reverting-to-0.93...&p=513473#post513473
in addiction container also lost Id Property

TommyMaintz
21 Sep 2010, 9:10 AM
I am not able to reproduce this with the latest source code in git. Can you confirm if the following code renders correctly with 0.95?



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var panel = new Ext.Panel({
cls: 'my-container',
fullscreen: true,
items: [{
xtype: 'component',
html: '<h1>A header?</h1>',
cls: 'header'
}]
});
}
});

ueilat
21 Sep 2010, 1:54 PM
I answered in the previous linked post. It's waiting the moderator approval.
thanks in advance

ueilat
23 Sep 2010, 11:25 AM
I post also here because I cannot see my post in the other message.
Here my codes, prototype of my development site.
As you can test in 0.93 it works, in 0.94 doesn't update and doesn't create id associated to same element (checked in safari developer tool)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fiorentina.it</title>

<!-- Ext Touch CSS -->
<script>
function loggo(cosa) {
console.log(cosa);
};
percorsobase='http://www.fiorentina.it/iphone/me2/';

</script>

<link rel="stylesheet" href="sencha-touch-beta-0.95/resources/css/ext-touch.css" type="text/css">





<!-- Ext Touch JS -->



<script type="text/javascript" src="sencha-touch-beta-0.95/ext-touch-debug.js"> </script>



<!-- Application JS -->
<script>
var blocchi=new Array();
var blocchimax=10;
for (var i=0;i<=blocchimax;i++) {
blocchi[i]=null;
};
var barrasencha=42;


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {



var modale=function(testo) {
if (testo!="") {
Ext.getBody().mask(false, '<div class="modale">'+ testo +'&hellip;</div>');
} else {
Ext.getBody().unmask();
}
};


var chiama=function(tipopaginax,parametrix) {
//loggo('chiamando');
modale('carico');
generapagina(tipopaginax,1,parametrix)
};


var generapagina=function(tipopagina,tiporigen,parametri){





blocchi[1]=new Ext.Container({
cls: 'titolihome',
html: 'News',
height: 20,
monitorOrientation : false
});
ct.add(blocchi[1]);
blocchi[2]=new Ext.Container({
cls: 'listahome',
id: 'listahome1',
tpl: '<tpl for="."><div class="lista" onclick="javascript:lancialista({idnotizia},2,this)"><div class=testo1><b>{datanotizia}</b> {titolo}</div></div></tpl>',
monitorOrientation : false
});
blocchi[6]=new Ext.Container({
height: (480-barrasencha-20-20)/2,
items: blocchi[2],
monitorOrientation : false
});
ct.add(blocchi[6]);
blocchi[3]=new Ext.Container({
cls: 'titolihome',
html: 'In primo piano',
height: 20,
monitorOrientation : false,
});
ct.add(blocchi[3]);
blocchi[4]=new Ext.Container({
cls: 'listahome',
id: 'listahome2',
tpl: '<tpl for="."><div class="lista" onclick="javascript:lancialista({idnotizia},2,this)"><div class=testo1><tpl if="foto"><img align=right src="{foto}"></tpl><b class=titoletti>{titolo}</b><br/>{descrizione}</div></div></tpl>',
monitorOrientation : false
});
blocchi[5]=new Ext.Container({
height: (480-barrasencha-20-20)/2,
items: blocchi[4],
monitorOrientation : false
});
ct.add(blocchi[5]);
barratop.insert(0,{ xtype: 'button', text: '?', ui: 'normal', handler: alert});
// barratop.insert(0,{ iconCls: 'info', ui: 'mask'});
barratop.insert(1, {xtype: 'spacer'});

barratop.insert(3, {xtype: 'spacer'});
barratop.insert(4,{ui: 'mask', iconCls: 'credit', handler: alert});
barratop.doLayout();
ct.doLayout();
//document.getElementById('selettore').setActive(0);
// scrollaPrivato(document.getElementById('listahome1'),document.getElementById('listahome1').parentNode,false,true,1);
// scrollaPrivato(document.getElementById('listahome2'),document.getElementById('listahome2').parentNode,false,true,1);
//alert(document.getElementById(blocchi[4].getEl().id).style.top);


blocchi[2].update([{
datanotizia: 'Item 1',
titolo: '1'
}, {
datanotizia: 'Item 2',
titolo: '2'
}, {
datanotizia: 'Item 2',
titolo: '3'
}]);
blocchi[2].doLayout();
// blocchi[3].add(memoria[genpaginap1].dati["altrenews"]);
// blocchi[3].doLayout();
blocchi[4].update([{
datanotizia: 'Item 1',
titolo: '1'
}, {
datanotizia: 'Item 2',
titolo: '2'
}, {
datanotizia: 'Item 2',
titolo: '3'
}]);
blocchi[4].doLayout();


modale('');

}
//**********************************+'





modale('carico');
//GESTISCO VARIABILI PERMANENTI
//localStorage.setItem("fontsize", 1);
//localStorage.clear();

document.body.innerHTML='';


//loggo('configurato');


barratop = new Ext.Toolbar({
// dock this toolbar at the top
ui: 'dark',
dock: 'bottom',
cls: 'barratop',
monitorOrientation: false /*,
items: [ {xtype: 'spacer',
id:'fisso1'} ,
{ html: '<img src="images/logo.png">',
xtype:'container',
centered:true,
id: 'fisso2'
},
{xtype: 'spacer',
id:'fisso3'}
] */
});


//QUESTO E' IL CONTENITORE PRINCIPALE
ct = new Ext.Panel({
fullscreen: true,
cls: 'sfondo',
dockedItems: barratop,
monitorOrientation: false

// onOrientationChange : function(orientation, w, h) {
// //loggo('ruoto ' + this.id+ ' - ' + orientation + ' ' + w + 'x' + h);
// }


});


//loggo('chiamo');

lanciatoInizio=true;
chiama(1,'');



//NKAlert(NKGetLibraryVersion());


}
});
</script>

</head>
<body> <h1>Application starting....</h1></body>
</html>