View Full Version : Help with image alignment

1 Feb 2011, 7:07 AM
Hi, I'm working on an image gallery using the Desktop... Everything is working great, but I can't seem to control how many images are displayed before breaking to a new line. At the moment each image spans an entire row..

My Module for the gallery is below.. after that I need to work on the onClick sliding, but that's next on my list.


MyDesktop.GalleryModule = Ext.extend(Ext.app.Module, {
id: 'gallery-win',
init : function(){
this.launcher = {
text: 'Image Gallery',
handler : this.createWindow,
scope: this,

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('gallery-win');
var root;
var myapp = src;
var album_view;
var west_panel;
var center_panel;

west_panel = new Ext.ux.tree.TreeGrid({
animate: true,
enableDD: true,
containerScroll: false,
rootVisible: false,
iconCls: 'image_sm',
region: 'west',
width: 253,
split: true,
collapsible: true,
title: 'Album Selections',
autoScroll: false,
margins: '3 0 3 3',
//header: 'Album',
dataIndex: 'name',
width: 250
viewConfig: {
loader: new Ext.tree.TreeLoader({
dataUrl: 'http://v2.swimmingturtle.com/com/albums.php'

west_panel.on('click', on_tree_click, this);

center_panel = new Ext.TabPanel({
region: 'center',
margins: '3 3 3 0',
activeTab: 0,
frame: true ,
layoutOnTabChange: true,
enableTabScroll: true,
monitorResize: true
items: [{
title: 'Images',
closable: false,
autoScroll: true
//,autoLoad: '/help/albums'

if (!win) {
win = desktop.createWindow({
id: 'gallery-win',
title: 'Image Gallery',
width: 840,
height: 480,
iconCls: 'tabs',
shim: false,
animCollapse: false,
border: false,
constrainHeader: true,
layout: 'border',
items: [west_panel, center_panel]


function on_photo_click(d, index, node, event) {

var text = node.id;
var array = text.split('/');
var photo_id = array.join('-');
var win = desktop.getWindow('slide-win');

if (!win) {
win = desktop.createWindow({
id: 'slide-win',
title: node.id,
width: 650,
height: 490,
iconCls: 'image_sm',
layout: 'fit',
html: '<img src="' + node.id + '">'



function on_tree_click(node, obj, options) {

var comp = Ext.getCmp(node.id);
var nodeName = node.attributes.name;

if (!comp) {

var datastore = new Ext.data.JsonStore({
url: 'http://v2.swimmingturtle.com/com/pictures.php?album='+nodeName,
root: 'photos',
fields: [
{name: 'filename', type: 'string'},
{name: 'title', type: 'string'},
{name: 'caption', type: 'string'},
{name: 'filepath', type: 'string'}

var template = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{filename}">',
'<div class="thumb">',
'<img src="" alt="{title}" class="thumb-img" width="160" height="120" />',
'<div class="x-clear"></div>'

var album_view = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
style: 'overflow: auto; padding: 10px;',
emptyText: 'No images to display',
multiSelect: false,
autoHeight: true,
store: datastore,
tpl: template

album_view.on('click', on_photo_click, this);

callback: function(r, o, s) {
if (s) {
title: nodeName,
id: node.id,
closable: true,
autoScroll: true,
items: [album_view]
comp = Ext.getCmp(node.id);

comp.on('bodyresize', function() {
}, this);

} else {
Ext.Msg.alert('Error', 'Unable to load ' + node.id);

} else {





1 Feb 2011, 7:15 AM
You need to change your css for .thumb-wrap and .thumb (why are you even using <div class="thumb">?).

I would recommend something like:

.thumb-wrap {float: left;}

1 Feb 2011, 7:17 AM
Please post code within [code] tags!

1 Feb 2011, 7:26 AM
Condor - Thanks! that did it. I just ripped the structure from the data-view example to display my thumbs.

jgarcia - Will do! I tried to edit my comment and wrap my code around the [code] tag but the change wasn't committing. I'll try again in a little bit.

Thanks again all!

1 Feb 2011, 7:29 AM
FYI on error when trying to save edited entry

RELPATH is not defined
chrome://firebug/content/blank.giffunction vB_AJAX_QuickEdit_Init(C){if(...QuickEditor=new vB_AJAX_QuickEditor();

I'm using FF 3.6.13

1 Feb 2011, 7:30 AM
The forum software was recently updated and the Save and Go Advanced buttons are currently broken.