Разработайте сенсорный список элементов Sencha

Question

Я ищу образец того, как оформить список результатов, возвращаемых Сенчей.

Нужны ли мне сотни пользовательских CSS-строк или есть несколько предопределенных стилей, которые нужно применить, чтобы приложение выглядело как нативное устройство?

Answer 1

Стиль по умолчанию должен выглядеть хорошо: по крайней мере, в соответствии с остальной частью сенсорного интерфейса.

Просто предоставьте свойство itemTpl: и свяжите список с магазином: вы должны увидеть элементы, появляющиеся в списке, например:

Вы, конечно, можете уточнить itemTpl сколько захотите. Есть также некоторые «стандартные» поведения пользовательского интерфейса, такие как кнопки раскрытия информации и указатели. Смотрите этот скринкаст для примеров: http://vimeo.com/19245335

И, наконец, конечно, это всего лишь HTML и 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, который вы можете использовать в качестве отправной точки.

Кроме того, вы можете присвоить списку или nestedlist класс с помощью cls: 'yourClass', а затем в источнике вашего проекта проверить вложенные div и их классы ...

Другой вариант - использовать стиль: 'background-color: black; color: white;' внутри компонента, чтобы получить базовый стиль.

Лучше всего было бы проверить специальный CSS-файл для кухонной раковины, так как он правильно написан и очень понятен новичкам.