Как установить высоту строки Sencha Touch List - PullRequest
Новая
       4

Как установить высоту строки Sencha Touch List

6 голосов
/ 01 июня 2011

Как установить высоту строки в объекте сенсорного списка Sencha?

Я использую HTML для форматирования строки, строки становятся выше с несколькими строками, но как мне установить высоту строки?

Спасибо, Gerry

Ответы [ 4 ]

10 голосов
/ 01 июня 2011

Чтобы изменить высоту элементов списка по умолчанию, у вас есть два способа сделать это:

  • Создайте свою собственную тему Sencha с помощью SASS (официальный способ Sencha сделать это).
  • Переопределить тему касания Sencha CSS.

В первом случае вам нужно всего лишь отредактировать значение переменной $ global-row-height, как, например, 

$global-row-height: 100px;

Если вы хотите переопределить класс CSS напрямую с помощью дополнительного файла CSS, вы можете сделать это, добавив новое правило так: 

.x-list .x-list-item {
   min-height: 100px;
}

Если вы хотите установить высоту списка, вы должны установить класс css следующим образом: 

.myList .x-list-item {
   min-height: 100px;
}

и добавьте параметр конфигурации cls в определение списка следующим образом 

var list = new Ext.List({
   cls: 'myList',
   ...
   ...
});

Вы также можете использовать свойство конфигурации списка itemHeight , например: 

var list = new Ext.List({
       itemHeight: 25,  //to set row height to 25 pixels
       ...
       ...
    });

Однако я всегда предлагаю изучать SASS. Это действительно легко и действительно стоит изучить.

Надеюсь, это поможет.

6 голосов
/ 03 декабря 2012

Начиная с Sencha Touch 2.1 , вы можете использовать свойство списка конфигурации itemHeight ( подробнее здесь ).Просто для информации, это также возможно в объекте NestedList с помощью свойства listConfig.

2 голосов
/ 14 июня 2013

Используйте приведенный ниже код для изменения высоты элемента списка в Sencha Touch. 

<code>
{ 
     xtype: 'list', 
     id: 'myList', 
     //Below two properties to change the default height
     //default = 47 chaged to 30 below
     variableHeights: true, 
     itemHeight: 30 , 
     itemTpl: '{title}', 
          data: [ 
               { title: 'Item 1' }, 
               { title: 'Item 2' }, 
               { title: 'Item 3' }, 
               { title: 'Item 4' } 
         ] 
}
0 голосов
/ 24 ноября 2014

Если кто-то все еще ищет ответ в Sencha Touch 2.4.1, вот он: 

listeners: [
    {
        event: 'painted',
        order: 'before',
        fn   : function() {                 
            // Set the height based on the number of items in the list!
            var itemCount = this.itemsCount,
                itemHeight = this.getViewItems()[0].element.getHeight(), // Works!
                heightOfList = itemCount * itemHeight;
            this.setHeight(heightOfList);
        }
    }
]

Я добавляю слушателя для нарисованного метода внутри моего ListView .Я не уверен, имеет ли это значение, если вы добавите слушателя в положение до или после , но до имело для меня больше смысла.

Я просто беру количество элементов в списке и умножаю его на фактическую высоту элемента элемента списка.Я предполагаю, что все элементы списка имеют одинаковую высоту в окончательном списке (это всегда будет иметь место для моего списка).

Я пробовал такой же подход с

itemHeight = this.getInnerItems () [0] .element.getHeight () // НЕ работает

, но это не сработает, потому что элементы будут иметь высоту 0px в этих точках.

Приведенный выше код работает!

...