PDA

View Full Version : customized dataview component, or something else



carstep
25 Aug 2011, 3:38 AM
Hi,

I read through almost all forum entries here about dataview's customization but I couldn't find information that fits my needs. Maybe it's not worth to use dataview, but my first thought was to try to do it that way.

I have 5 images, 1 main and 4 thumbs, the main is a bigger (exactly 2x bigger) and the rest are 2x2 arranged thumbnails.
Each image have 3 functions available for upload/show/delete. These function should be available when I hover over the image/thumb elements just like in facebook. I made a dataview that shows the thumbs but I'm stucked to how to go further and build those over effects on the dataview elements.

Can somebody point me to the right direction? Maybe I should use customized boxcomponents on an absolute layout for this, I'm really not quiet sure.

what I coded until now is:



var _tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" width="95" height="50" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);

var ipanel = new Ext.Panel({
id:'images-view',
frame:true,
width:300,
height: 200,
collapsible:false,
items: new Ext.DataView({
store: new Ext.data.JsonStore({
storeId: 'stPhotoData',
url: 'index.php?mod=ImageHandler&op=gettumbs&nooutput=',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}]
}),
tpl: _tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',

prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
return data;
}
})
});

thanks Sandor

carstep
25 Aug 2011, 12:51 PM
I made my thoughts and came to a decision to make a panel with a toolbar and put 4+1 times on the absolute layout.
But as I read through various possibilities a floating toolbar seemed for me a good solution for the functions, but there is no animation or floating setting for the toolbar. I said ok, temporarily set CSS for the toolbars for absolute positioned and a bit opacitied would be a good solution.


var xpanel = new Ext.Panel({
panel: true
,y: 220
,x: 10
,width: 200
,height: 150
,title: ''
,id:'images-view2'
,frame:true
,items: []
,listeners: {
render: {
fn: function(c,t) {
c.el.on('mouseover',function(e) {Ext.getCmp('images-view2').getTopToolbar().show();},this);
c.el.on('mouseout',function(e){Ext.getCmp('images-view2').getTopToolbar().hide();},this);
}
,scope: this
}
}
,tbar: new Ext.Toolbar({
hidden: true
,items: [
{text: 'Upload'}
,{text: 'Show'}
,{text: 'Delete'}
]
})
,scope: this
})
css:


#images-view2 x-toolbar {
position: absolute;
z-index: 10002;
opacity: 0.8;
}


What do the experts think about this?

r. Sandor