Results 1 to 2 of 2

Thread: customized dataview component, or something else

  1. #1
    Sencha User
    Join Date
    Jul 2007
    Location
    Hungary
    Posts
    58

    Default customized dataview component, or something else

    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:

    PHP Code:
    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,
                
    height200,
                
    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,
                    
    multiSelecttrue,
                    
    overClass:'x-view-over',
                    
    itemSelector:'div.thumb-wrap',
                    
    emptyText'No images to display',

                    
    prepareData: function(data){
                        
    data.shortName Ext.util.Format.ellipsis(data.name15);
                        
    data.sizeString Ext.util.Format.fileSize(data.size);
                        return 
    data;
                    }
                })
            }); 
    thanks Sandor

  2. #2
    Sencha User
    Join Date
    Jul 2007
    Location
    Hungary
    Posts
    58

    Default temporary solution

    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.

    PHP Code:
    var xpanel = new Ext.Panel({
                
    paneltrue
                
    ,y220
                
    ,x10
                
    ,width200
                
    ,height150
                
    ,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);
                        }
                        ,
    scopethis
                    
    }
                }
                ,
    tbar: new Ext.Toolbar({
                    
    hiddentrue
                    
    ,items: [
                        {
    text'Upload'}
                        ,{
    text'Show'}
                        ,{
    text'Delete'}
                    ]
                })
                ,
    scopethis
            
    }) 
    css:
    Code:
    #images-view2 x-toolbar {
      position: absolute;
    z-index: 10002;
    opacity: 0.8;
    }
    What do the experts think about this?

    r. Sandor

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •