8

í'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. enter image description here

What's happening here?

4
  • 1
    Do you really want to find out what's wrong in your code, or would it be fine to suggest another approach to achieve the same result? Commented Jun 11, 2014 at 12:13
  • First thing that I notice in your code is that you are misusing layouts. When you use layout on a container its childs are automatically sized (width if parent has hbox or height if parent has vbox) so you don't really need to do those calculation. Commented Jun 11, 2014 at 12:16
  • Another approach to achieve the same result would be great =) Commented Jun 11, 2014 at 15:50
  • Can you put it to a sencha fiddle fiddle.sencha.com
    – Nathan Do
    Commented Jun 13, 2014 at 9:05

1 Answer 1

5
+50

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.