煎茶触摸中心列表，这可能吗？

Question

[已解决] 感谢 Vadym - Sencha 拥有自己的保证金属性，这有所帮助。

我有一个宽度为“320px”的 Ext.dataview.List。 我现在需要做的是使这些固定的 320px - 这个列表 - 位于任何分辨率的屏幕的中心。

因为名声不能给你看图，所以我会用另一种方式重复它并做一个小草图。

我需要将列表放置在屏幕中央。

I have it like this now - docked at the left side:
_________________________________________
||list item 1              |             |
||list item 2              |             |
||list item 3              |             |
||list item 4              |             |


What I want to accomplish is this - centered in the middle:
_________________________________________
|      |list item 1             |       |
|      |list item 2             |       |
|      |list item 3             |       |
|      |list item 4             |       |

我找到了一个我认为可以完成工作的列表的配置值 - 居中 - 但是当我将此值设置为 true 时，该列表完全消失。

我的代码是这样的：

Ext.define('GeoFun.view.Ukoly', {
    extend: 'Ext.dataview.List',
    xtype: 'ukolylist',
    initialize: function () {
        this.callParent(arguments);
    },
    config: {
        ui: 'round',
        width: '320px',
        //centered: true, -- doesn't work  
        itemTpl:  Ext.create(
            'Ext.XTemplate',  
            '<div class="listItemContainer">',
            '    I need this list to be in center of the screen.',
            '</div>')
    
    }
});

提前致谢。

Answer 1

我不确定 Sencha 是否有任何属性可以完成这项工作。 所以你应该用css来做。 定义下一个 css 规则：

.listcontainer {
    margin: 0 auto;
}

或者，至少，使用内联样式

Answer 2

Sencha 有自己的保证金属性，这有帮助。

Ext.define('GeoFun.view.Ukoly', {
    extend: 'Ext.dataview.List',
    xtype: 'ukolylist',
    initialize: function () {
        this.callParent(arguments);
    },
    config: {
        ui: 'round',
        width: '320px',

        margin: 0 auto; //<-- solution

        itemTpl:  Ext.create(
            'Ext.XTemplate',  
            '<div class="listItemContainer">',
            '    I need this list to be in center of the screen.',
            '</div>')

    }
});