css - 在 sencha touch 中使用 hbox 和 vbox 的布局

Question

我是煎茶触摸的新手。我需要一个图标应该水平排列的布局。我尝试了三个图标，但只显示第一个图标。其他图标都躲在后面。任何人都可以帮我解决错误吗

这是我的代码：

 {                      
    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'
    },                   
    ]
},

Answer 1

您应该使用hboxwithflex和 for 图像组件url应该给予src配置。

    {                      
        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'
            }                   
         ]
   }

更新

    {                      
       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'
            }                   
          ]
   }

Answer 2

我建议您创建一个启用内联配置的 Ext.List：

    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'}
        ]
    });

希望能帮助到你-