Dataview stacking images instead of wrapping...?

[chris24300]

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.

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({
            multiSelect: false,
            style: 'overflow:auto',
            tpl: tpl,
            autoHeight: true,
            autoScroll: true,
            itemSelector:'div.thumb-wrap',
            emptyText: 'No attachments found',
            store: this.myImageStore,
            listeners: {
                click: {
                    fn: this.showLargerImage,
                    scope: this
                }
            } // listeners
        }); 

I'm not sure why it doesn't reference the css for the formatting, any help is appreciated. Thanks!

[scottmartin]

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.

[chris24300]

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

Copied right from organizer.js

var view = new Ext.DataView({         itemSelector: 'div.thumb-wrap',         style:'overflow:auto',         multiSelect: true,         plugins: new Ext.DataView.DragSelector({dragSafe:true}),         store: new Ext.data.JsonStore({             url: '../view/get-images.php',             autoLoad: true,             root: 'images',             id:'name',             fields:[                 'name', 'url',                 {name: 'shortName', mapping: 'name', convert: shortName}             ]         }),         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.

[chris24300]

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)...