1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    52
    Vote Rating
    0
    chris24300 is on a distinguished road

      0  

    Default Dataview stacking images instead of wrapping...?

    Dataview stacking images instead of wrapping...?


    Hi, so I'm trying to follow the dataview example and everything is working except that the images are stacked on top of one another instead of in the 'table' style layout.. I copied the CSS from the example and included it (I can see it from the looking at page source) but the images still stack.

    PHP Code:
    this.myImageStore = new Ext.data.ArrayStore({
                
    fields: [
                    {
    name'url'},
                    {
    name'filename'},
                    {
    name'filetype'}
                ]
            });

    var 
    tpl = new Ext.XTemplate(
                    
    '<tpl for=".">',
                        
    '<div class="thumb-wrap" id="{filename}">',
                        
    '<div class="thumb"><img src="{url}" title="{filename}" width="100" height="100"></div>',
                    
    '</tpl>',
                    
    '<div class="x-clear"></div>'
                
    );
                
            
    this.myImageView = new Ext.DataView({
                
    multiSelectfalse,
                
    style'overflow:auto',
                
    tpltpl,
                
    autoHeighttrue,
                
    autoScrolltrue,
                
    itemSelector:'div.thumb-wrap',
                
    emptyText'No attachments found',
                
    storethis.myImageStore,
                
    listeners: {
                    
    click: {
                        
    fnthis.showLargerImage,
                        
    scopethis
                    
    }
                } 
    // listeners
            
    }); 
    I'm not sure why it doesn't reference the css for the formatting, any help is appreciated. Thanks!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    In the example, there is an id: 'images-view' that is used to obtain the 'images-view' classes in the CSS
    you are missing this.

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    52
    Vote Rating
    0
    chris24300 is on a distinguished road

      0  

    Default


    I think you're referring to the itemSelector? I don't see an ID or cls option set anywhere

    Copied right from organizer.js
    PHP Code:
    var view = new Ext.DataView({         itemSelector'div.thumb-wrap',         style:'overflow:auto',         multiSelecttrue,         plugins: new Ext.DataView.DragSelector({dragSafe:true}),         store: new Ext.data.JsonStore({             url'../view/get-images.php',             autoLoadtrue,             root'images',             id:'name',             fields:[                 'name''url',                 {name'shortName'mapping'name'convertshortName}             ]         }),         tpl: new Ext.XTemplate(             '<tpl for=".">',             '<div class="thumb-wrap" id="{name}">',             '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>',             '<span>{shortName}</span></div>',             '</tpl>'         )     }); 
    The images panel that has the dataview as an item has an id 'images' but I don't think that's the id you're talking about.

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    52
    Vote Rating
    0
    chris24300 is on a distinguished road

      0  

    Default


    I tried adding in the class="thumb-img" in the template but none of the names seem to map correctly. I had to set the width and height or else they would show true size (~3600x1600)...

Thread Participants: 1

Tags for this Thread