Ext.view.View use templates

[mixo]

Hello,

i have a dataview with defined tpl. This dataview shows desktop with icons and on resize icons can regrouped in two or more columns. This serves onResize event. It works ok but seems like after resize and applying template the dataview loose connection with datastore; on item click it rise error

o is undefined
return o.id;

and i find in FireBug that dataview.all.elements no more points to their DOM elements after overwrite tpl. If no resize acts all work perfect.
Can anybody help me to solve this issue and may be after tpl.overwrite() I must smth like rebind data to dataview

                    resize: function(dataview, adjWidth, adjHeight){
                        dataview.tpl.col_length = parseInt(adjHeight/110);
                        var data = [];
                        for(i in dataview.store.data.items){
                            data = data.concat(dataview.store.data.items[i].data);
                        }
                        dataview.tpl.overwrite(dataview.el.dom,data);
                    }

            var maindataview = Ext.create('Ext.view.View', {
                border: false,
                store: store,
                parent: this,

                tpl  :  new Ext.XTemplate(
                    '<tpl for=".">',
                        '<tpl if="xindex%this.col_length==1">',
                            '<tpl if="xindex &gt; 1">',
                                '</ul>',
                            '</tpl>',
                            '<ul class="app_list">',
                        '</tpl>',
                        '<li class="app" id="{name}.icon" data-qtip="{title}" data-qwidth="100">',
                            (!Ext.isIE6? '<img width="48" height="48" src="/static/img/cluster/{class_name}.png" />' :    //{[values.name.replace(/ /g, "-")]}
                             '<div style="width:48px;height:48px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'/static/img/cluster/{class_name}.png\',sizingMethod=\'scale\')"></div>'),
                            '<strong handle = {name}>{title}</strong>',
                        '<tpl if="xindex==xcount">',
                            '</ul>',
                        '</tpl>',
                    '</tpl>',
                    {
                        view_height:700,
                        col_length:5,
                        get_col_len: function(){
                            return 5;
                        }
                    }
                ),

                id: 'apps',

                itemSelector: '.app',
                overItemCls : 'app-hover',
                multiSelect : false,
                layout: 'fit',
                listeners:{
                    'itemclick': function(dataview, record, item, index){
                        mainmenu.hide();
                        strong = item.querySelector('strong');
                       sender.load_app(false,strong.attributes['handle'].value,null,null,item.id);
                    },
                    resize: function(dataview, adjWidth, adjHeight){
                        dataview.tpl.col_length = parseInt(adjHeight/110);
                        var data = [];
                        for(i in dataview.store.data.items){
                            data = data.concat(dataview.store.data.items[i].data);
                        }
                        dataview.tpl.overwrite(dataview.el.dom,data);
                    }
                    }
                });

[mitchellsimoens]

have you tried just using refresh() on the view?

[mixo]

mitchellsimoens

have you tried just using refresh() on the view?

thanks a lot Mitchell! It really do the job, but one more thing. Then i add listener like this,

                    resize: function(dataview, adjWidth, adjHeight){
                        dataview.refresh();
                    }

it rise error on init

too much recursion

How I can correctly handle the situation on init my components? Look's like it fire resize on init and then refresh() fires resize again

[mixo]

well my solution look's like hack) maybe anybody have a better idea?

                    resize: function(dataview, adjWidth, adjHeight){

                        dataview.tpl.col_length = parseInt(adjHeight/110);

                        if(dataview.all.elements.length>0){
                            dataview.refresh();
                        }
                    }

dataview.tpl.col_length - is a tpl parameter, need refresh after resize