PDA

View Full Version : How do I display a seamless image composed of multiple images added to table layout?



dangw
16 Mar 2012, 6:26 AM
Example below:


{
xtype: 'container',
width: 128,
height: 128,
layout: {
type: 'table',
columns: 8
},
items: [{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col0row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col1row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col2row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col3row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col4row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col5row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col6row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col7row0.png'
},{
xtype: 'image'
width: 16,
height: 16,
src: '/images/col1row1.png'
},{
//etc.
}]
}


There is a 2px gap at the bottom of every row. I tried setting heights, margins, and padding, but nothing worked.

mitchellsimoens
16 Mar 2012, 11:50 AM
How about cellspacing or cellpadding?

dangw
16 Mar 2012, 12:20 PM
Thanks for the advice, but it still has the 2px gap on every row. :(

I tried the layout config below:


layout: {
type: 'table',
columns: 8,
tableAttrs: {
cellpadding: 0,
cellspacing: 0
}
}

dangw
19 Mar 2012, 8:56 AM
I found out what caused the 2px gap on every row. My page doctype was set to HTML 5: <!DOCTYPE html>.

The gap does not happen if using HTML 4 doctypes.