Layouts using hbox and vbox in sencha touch

0
votes

I am new to sencha touch. i need a layout that icons should be arranged horizontally. i tried with three icons but only the first icons is showing. other icons are hiding behind. can any one pls help me in fixing the errors

here is my code:

 {                      
    xtype: 'panel',
    layout:'vbox',
    width:'300',
    height:'600',
    align:'center',
    items:[
    {
     xtype:'image',
     left:'40%',
     'http://myimage.com/image.png'
      style: 'background-color: #fff'
    },
    {
     xtype:'image',
     right:'40%',
     'http://myimage.com/image.png'
     style:'background-color: #fff'
    },                   
    ]
},
2
cssextjssencha-touch

2 Answers

1
votes

You should use hbox with flex and for image component url should be given to src config.

    {                      
        xtype: 'panel',
        layout:'hbox',
        align:'center',
        defaults: {
            flex : 1
        },
        items:[
           {
              xtype:'image',
              src:'http://myimage.com/image.png',
              style: 'background-color: #fff;'
           },
           {
              xtype:'image',
              src:'http://myimage.com/image.png',
              style:'background-color: #fff'
            }                   
         ]
   }

Update

    {                      
       xtype: 'panel',
       layout:'hbox',
       defaults: {
          flex : 1
       },
        items:[
           {
              xtype:'panel',
              html:'<img width="100%" src="http://myimage.com/image.png">',
              style: 'background-color: #fff;'
            },
            {
              xtype:'panel',
              html:'<img width="100%" src="http://myimage.com/image.png">',
              style:'background-color: #fff'
            }                   
          ]
   }
0
votes

I recommend you to create an Ext.List with the inline config enabled:

    Ext.create('Ext.List', {
        fullscreen: true,
        inline: true,
        itemTpl: '<img src="{img}" />',
        data: [
            {img: 'http://myimage.com/image1.png'},
            {img: 'http://myimage.com/image2.png'},
            {img: 'http://myimage.com/image3.png'}
        ]
    });

Hope it helps-