Question

<已解决] [已解决]感谢Vladym - Sencha有自己的保证金属性，这有助于。

我有一个Ext.dataview.List，其宽度为：'320px'。我现在需要做的是将这些固定的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>')

    }
});

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

2 个答案: