Question

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

这是我的代码：

 {                      
    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

您应该将hbox与flex一起使用，并将图像组件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

我建议你创建一个启用了inline配置的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'}
        ]
    });

希望有所帮助 -

在sencha touch中使用hbox和vbox进行布局

2 个答案: