样式sencha触摸项目列表

Question

我正在寻找如何样式清单从Sencha返回结果样本。

我是否需要100行自定义CSS，还是有一些预定义的样式需要应用，以使我的应用看起来像本机设备一样？

Answer 1

默认样式应该看起来不错：至少与Touch用户界面的其余部分保持一致。

只需提供一个itemTpl：属性和列表绑定到店：你应该看到的项目出现在列表中，如：

当然，你可以详细阐述itemTpl就像你喜欢。还有一些“标准”UI行为，例如披露按钮和索引栏。看到这个屏幕录像的例子：http://vimeo.com/19245335

最后，当然，它只是HTML & CSS，所以你可以完全疯狂的样式，如果你想。检查：http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/

Answer 2

在Sencha Touch的默认下载中，在演示中有一个名为Kitchen Sink的文件夹。本演示中有一个基本的css文件，您可以将其用作起点。

此外，你可以给列表或nestedlist类与CLS：“yourClass”，然后在你的项目源，检查嵌套的div和他们班...

另一种选择是使用风格：'背景颜色：黑色;颜色：白色;'在组件内部获得基本的样式。

最好的办法是检查厨房水槽特殊的css文件，因为它是以正确的方式缩进并且对初学者非常清楚。

Answer 3

使用此使其垂直居中对齐总是：

.x-list .x-list-item{ 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
}