[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:

Code:

{ 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

HTML Code:

<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/showthre...473#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?

Code:

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)

Code:

<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>

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

Thread Tools

Search Thread

Display

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

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

Similar Threads

Packages, Containers, Components and Classes??

Trying to understand how to apply layouts to components (mainly panels / containers)

[FIXED][3.1] border layout west containers fire resize event with missing param

Referencing components in containers

Components inside containers don't render