Question

我有一个使用数据视图的水平列表，我试图显示图像列表。我想在垂直中心显示它对齐。但是，它总是与顶部对齐。

以下是我的观点：

Ext.define('horizList.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.Video',
    'Ext.List'
],
config: {
    tabBarPosition: 'bottom',

    items: [

        {
            title: 'Get Started',
            iconCls: 'action',

            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Getting Started'
                },
                {
                    xtype: 'container',
                    flex:1.5,
                    layout: {
                        type: 'vbox',
                        pack: 'center'
                    },
                    items:[{
                           xtype:'dataview',
                           //flex          : 1,
                           //defaultType   : 'myapp-dataitem',
                           height: 400,
                           scrollable: {
                                direction: 'horizontal',
                                directionLock: true
                           },
                           inline        : {
                                wrap : false
                           },

                           //layout:'hbox',
                           itemId:'foodCatalogWrapper',
                           store: 'foodCatalogStore',
                           itemTpl:new Ext.XTemplate('<img src="{[this.image(values)]}" />',
                                               {
                                                     image: function(value){
                                                        var imgUrl = baseUrl + value.IMAGE;
                                                        return imgUrl;
                                                     }
                                               })
                           }]
                  }]
         }]
     }
});

数据视图的CSS是：

.x-dataview {
  background-color: transparent;
  border:5px solid #0000FF !important;
  .x-dataview-item {
    padding: 1px 0;
    text-align: center;
    vertical-align: middle;
    border:5px solid #FFFF00 !important;
    color: #000;
    img {
        margin: 10px 1px;
    }
  }
}

.x-dataview .x-dataview-item.x-item-selected {
    border:5px solid #FFFFFF !important;
}

我无法附上截图，因为我没有足够的声望点。

需要做什么来显示垂直对齐的项目。提前谢谢。

Answer 1

我解决了这个问题。原因是某种程度上宽度被视为100％。一旦我删除它，它就有用了。

Sencha Touch：在Dataview中心垂直对齐项目

1 个答案: