PDA

View Full Version : Ext.view.View use templates



mixo
22 Nov 2011, 2:06 AM
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
22 Nov 2011, 9:52 AM
have you tried just using refresh() on the view?

mixo
22 Nov 2011, 7:03 PM
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
23 Nov 2011, 2:36 AM
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