Items not rendered after build

[sasklacz]

I have a really simple app : http://www.senchafiddle.com/#AREBJ . It consists of a view, which displays some links. After clicking each of them, a popup with target value appears. Everything works fine before building the app, but after building the links are not displayed at all. For showing links I'm using the DataView component. Previously I've tried tackling it with Ext.Component, but dunno why events were not fired when any of the items was tapped on. Here's the second version of IconsScreen view which I'd prefer to use, but without events it's useless :

Ext.define('ShopGun.view.IconsScreen', {
    extend: 'Ext.Component',
    xtype: 'icons-screen',
    require: [
        'ShopGun.store.MainMenu'
    ],
    config: {
        tpl: new Ext.XTemplate('<ul class="menu-icons-list">',
            '<tpl for=".">',
                '<li class="icon">',
                    '<a target="{url}" style="background: url({icon})">',
                    '</a>',
                    '<span class="icon-text">{name}</span>',
                '</li>',
            '</tpl>',
        '</ul>'
        ),
        store : Ext.create('ShopGun.store.MainMenu'),
        data : [],
        listeners : {
            painted : function(){
                console.log('painted');
                this.onIconTap();
            }
        }
    },


    initialize : function() {
        var storeData = this.getStore().getRange(),
            tplData   = [];


        Ext.Array.each(storeData, function(item){
            tplData.push(item.getData());
        });


        this.setData(tplData);
  
        this.element.on({
            scope    : this,
            delegate : 'a',
            tap      : 'onIconTap'
        });


        this.callParent();
    },


    onIconTap : function(e, t) {
        this.fireEvent('icontap', e, t);
    }
});

I'm also attaching a buildable version. Sorry for hosting on MEGA but it's too big to attach via forum : https://mega.co.nz/#!kEZiCTQT!ckFxSQ...9MVy8hynjdPHQ8

[mitchellsimoens]

Two things I first see that I don't like is your creating instances as configs. For instance, the tpl should just be a string or array:

tpl       : ''.conat(
    '<ul class="menu-icons-list">',
        '<tpl for=".">',
            '<li class="icon">',
                '<a target="{url}" style="background: url({icon})">',
                '</a>',
                '<span class="icon-text">{name}</span>',
            '</li>',
        '</tpl>',
    '</ul>'
),

[sasklacz]

Unfortunately this doesn't solve the problem, and events are still not fired in the built version :/ Moreover moving tpl from config to class properties ends in the icons not renederd at all.

[sasklacz]

I've found that assigning a normal js event handler works without any problems. Also I've thought that maybe delegation is the issue here, but no. Assigning any handler to 'this.element' doesn't work. I've tried with different components, List, dataView, Carousel, Component and nothing works after building. Something's seriously wrong here but I cannot see what. What is this builder of yours doing that no Ext event handler works ?

    initialize : function() {
        (...)


        this.callParent();


        this.element.on({
            scope    : this,
            tap      : 'onIconTap'
        });


        var z = this.element.select('.icon a').elements[0].addEventListener('click', function(){
            me.onIconTap();
        });
    },


    onIconTap : function(e, t) {
        console.log('ICONTAP');
    }

[sasklacz]

After even more debugging I've found, that elements in dom have completely different id numbers which means they're added in a different order. The icons element that in a non-build version is added the last (as it should) in the build version has id #1. Any ideas what can cause this ?