í'm trying to build a image gallery using Sencha Touch. I create a container object with hbox layout and width equal to window.innerWidth. Then, i add three containers inside it. Each one using vbox layout and with width equal to window.innerWidth / 3.
I add images in it with width equal to the column width and height setted on CSS to 'auto'.
This is my code:
Ext.define('Oasis.view.ImgTest',{
extend: 'Ext.Container',
xtype:'mosaic',
config:{
cls: 'gallery',
layout: {
type: 'hbox', // This is a column-based mosaic
pack: 'center',
align: 'start'
},
columnWidth: -1,//
numCols: 3, // Number of columns
lastColumnUsed: -1, // Last column where a image were added. -1 for none.
autoInstanceColumns: false, // If true, instantiate each column on initialize method
items:[],
scrollable: {
direction: 'vertical',
directionLock : true
}
},
initialize: function(){
var me = this;
me.setColumnWidth(window.innerWidth/me.getNumCols());
Ext.Viewport.on('orientationchange', function(){
// Updates columns widths on screen orientation changes
me.setColumnWidth(window.innerWidth/me.getNumCols());
for(var c = 0; c < me.getNumCols();c++){
// Column
var column = me.getAt(c);
for(var i = 0; i < column.getItems().getCount();i++){
// Items per column
var element = column.getAt(i);
element.setWidth(me.getColumnWidth());
}
}
}, this, {buffer: 50 });
// Creates all columns and add to the mosaic
if(me.getAutoInstanceColumns())
for(var i = 0; i < me.getNumCols();i++){
me.add({
xtype:'container',
id: 'col-'+i,
cls: 'gallery',
layout: 'vbox',
flex:1
});
}
// Add images
me.insert(Ext.create('Ext.Img',{
src:'resources/images/0228_FEA_Pet_dog_WCGHS_cutt.jpg',
cls: 'mosaicitem',
mode: 'element'
}));me.insert(Ext.create('Ext.Img',{
src:'resources/images/027c076a1c-1152x864.jpg',
cls: 'mosaicitem',
mode: 'element'
}));me.insert(Ext.create('Ext.Img',{
src:'resources/images/0913_LIF_PET_DOG_CUTTY_WCG.jpg',
cls: 'mosaicitem',
mode: 'element'
}));
},
__get_next_column_index: function(){
var me = this;
var column = 0;
// If some column was used in the last iteraction (if there was one),
// calculates the next column that should be used. Else, use column 0.
if(me.getLastColumnUsed() >= 0){
column = (me.getLastColumnUsed() + 1) % me.getNumCols();
}
return column
},
insert: function(element){
var me = this;
// Se as colunas não forem instanciadas logo na initialização da classe, instancia uma a uma até que todas estejam instanciadas.
if(!me.getAutoInstanceColumns() && me.getItems().getCount() < me.getNumCols()){
var column = me.getItems().getCount();
target_column = me.add({
xtype:'container',
id: 'col-'+column,
cls: 'column',
flex:1
});
}else{
var column = me.__get_next_column_index();
var target_column = me.getAt(column);
}
// Set element width
element.setWidth(me.getColumnWidth());
target_column.add(element);
me.setLastColumnUsed(column);
},
})
This is my CSS:
.gallery {
line-height: 0;
-webkit-column-gap: 0px;
margin: 2px 2px 2px 2px;
height: 100%;
}
.mosaicitem {
height:auto !important;
border: 2px solid rgba(0,0,0,0.4);
border-radius: 5px;
padding: 2px;
background: rgba(0,0,0,0.5);
position: relative;
-webkit-animation: fadein 1s, translateZ 0.6s; /* Safari and Chrome */
-webkit-animation-delay: 0s, 0s;
-moz-animation: fadein 1s, translateZ 0.6s; /* Firefox */
-moz-animation-delay: 0s, 0s;
-ms-animation: fadein 1s, translateZ 0.6s; /* Internet Explorer */
-ms-animation-delay: 0s, 0s;
-o-animation: fadein 1s, translateZ 0.6s; /* Opera */
-o-animation-delay: 0s, 0s;
animation: fadein 1s, translateZ 0.6s;
animation-delay: 0s, 0s;
}
/* Animations */
@keyframes fadein {
from { opacity: 0 ; }
to { opacity: 1 ; }
}
@keyframes translateZ {
from { top : 100px ; }
to { top: 0px ; }
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0 ; }
to { opacity: 1 ; }
}
@-moz-keyframes translateZ {
from { top : 100px ; }
to { top: 0px ; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0 ; }
to { opacity: 1 ; }
}
@-webkit-keyframes translateZ {
from { top : 100px ; }
to { top: 0px ; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0 ; }
to { opacity: 1 ; }
}
@-ms-keyframes translateZ {
from { top : 100px ; }
to { top: 0px ; }
}
/* Opera */
@-o-keyframes fadein {
from { opacity: 0 ; }
to { opacity: 1 ; }
}
@-o-keyframes translateZ {
from { top : 100px ; }
to { top: 0px ; }
}
On devices running android 4.4.2 it works perfectly. However, on android 4.2.2 it look as if the height was set to 100% or something like that.
This is a comparison on android emulator.
What's happening here?
Your mosaicitem
class in your CSS sets the height
attribute to be auto
. That means you let the browser rezise the image. Obviously, you will have different results on different browser. I don't know exactly how the two browsers react to your setting, but it can only come from this.
Taken from Sencha's Doc about the Ext.Image
height
property:
By default, if this is not explicitly set, this Component's element will simply have its own natural size.
So I believe that this line is imposing a height with your !important tag, and overrides sencha's automatic height which should be the image's natural size.
In short, try removing this line.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With