设置Sencha触摸项目列表的样式

Question

我正在寻找一个如何为Sencha返回的结果设置列表样式的示例。

我是否需要100个自定义CSS系列，或者是否需要应用一些预定义的样式才能使我的应用看起来像本机设备？

Answer 1

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

只需提供itemTpl：属性并将列表绑定到商店：您应该看到列表中出现的项目如下：

您当然可以根据需要详细说明itemTpl。还有一些“标准”UI行为，例如披露按钮和索引栏。有关示例，请参阅此截屏视频：http://vimeo.com/19245335

最后，当然，这只是HTML＆amp; CSS，如果你愿意，你可以完全疯狂的造型。检查：http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/

Answer 2

使用此选项使其始终垂直居中对齐：

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

Answer 3

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

另外，你可以给列表或嵌套列表一个带有cls：'yourClass'的类，然后在项目的源代码中检查嵌套的div及其类......

另一种选择是使用风格：'background-color：black; color：white;'在组件内部获得基本样式。

你最好的选择是查看厨房水槽特殊的css文件，因为它以正确的方式缩进，对初学者来说非常清楚。