Sencha Touch - Как включить Infinite Scroll

Question

В окне «Документы для Sencha Touch» есть вид в виджетах «Список», который позволяет установить «бесконечный», который позволяет бесконечно прокручивать.

Docs: https://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List-cfg-infinite

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

Важное примечание. Это для автономного мобильного приложения. Как в скрипке. В хранилище уже содержатся все данные.

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

{ 
    xtype: 'list', 
    store: 'contactStore', 
    flex: 1, 
    itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>', 

    infinite: true /* Setting this to true hides the list */ 
} 

Что мне не хватает? Я включил jsFiddle.

http://jsfiddle.net/AnthonyV/bba58zfr/

Answer 1

Проблема здесь не в том, что данные загружаются, как и другие ответы. Вы сказали, что данные загружаются в магазин точно так же, как если у вас нет infinite, установленного на true, вы можете просмотреть данные.

Во-первых, давайте обсудим, что делает infinite config.Как объяснил Ананд Гупта, конфигурация infinite будет отображать только количество элементов списка, которые могут поместиться на экране (плюс некоторые в качестве буфера для прокрутки). Если у вас нет значения true, тогда список отобразит все элементы и не будет управлять видимым диапазоном. Со всеми отображаемыми элементами список может поддерживать автоматическое определение размера. Однако, когда infinite установлен в true, список должен знать, какой размер он имеет, чтобы рассчитать количество видимых строк, которые он может отобразить.

Здесь возникает проблема, список не имеет полного размера, установленного для него. У вас есть список вложенных в контейнер и контейнер использует VBOX расположение:

config: { 
    title: 'Big List Issue', 
    fullscreen: true, 
    items: [{ 
     xtype: 'container', 
     layout: 'vbox', 
     title: 'Big List', 
     items: [{ 
      xtype: 'list', 
      store: 'contactStore', 
      id: 'simpleList', 
      flex: 1, 
      itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>', 
      striped: true, 
      infinite: false 
     }] 
    }] 
} 

Это технически overnesting. Overnesting - это когда вы вложили компонент в контейнер, который не нужно вставлять в контейнер. Это безгнездная версия коды, который должен работать, как вы хотите:

config: { 
    title: 'Big List Issue', 
    fullscreen: true, 
    items: [{ 
     xtype: 'list', 
     title: 'Big List', 
     store: 'contactStore', 
     id: 'simpleList', 
     itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>', 
     striped: true, 
     infinite: true, 
     variableHeights: true 
    }] 
} 

То, что я здесь, это удалить контейнер и имел список в качестве прямого потомка вашего зрения MyApp.view.MyIssue навигации. Навигационное представление использует макет карты, который даст каждому прямому ребенку 100% высоту и ширину и, следовательно, позволяет рассчитать количество строк, которые он может отобразить, с infinite, установленным на true. Вот скриншот Sencha, чтобы показать этот незатушенный список в действии: https://fiddle.sencha.com/#fiddle/11v1

Другой способ, если вы действительно хотите, чтобы список был вложен в этот контейнер (чем больше гнезд вы, тем больше DOM с тех пор, как у вас создано больше компонентов и тем больше DOM, тем медленнее ваше приложение может реагировать), то вы можете дать компоновкам VBOX контейнера в align конфигурации:

config: { 
    title: 'Big List Issue', 
    fullscreen: true, 
    items: [{ 
     xtype: 'container', 
     layout: { 
      type: 'vbox', 
      align: 'stretch' 
     }, 
     title: 'Big List', 
     items: [{ 
      xtype: 'list', 
      store: 'contactStore', 
      id: 'simpleList', 
      flex: 1, 
      itemTpl: '<table><tr><td class="contact"><strong>{firstname}</strong> {lastname}</td></tr><tr><td>{companyname}</td></tr><tr><td>{address}, {city}, {province}, {postal}</td></tr><tr><td>{phone1}, {phone2}, {email}</td></tr><tr><td>{web}</td></tr></table>', 
      striped: true, 
      infinite: true 
     }] 
    }] 
} 

в безгнездном примере списка, я также использую variableHeights конфигурации в списке. Это позволяет правильно отображать элементы списка. Запустите скрипку, чтобы прочесть ее, чтобы увидеть разницу, которую она делает.

Answer 2

Прежде всего, необходимо понять, что infinite: true помогает в улучшении производительности списка. Это помогает отображать только тот фрагмент данных списка, который является текущей страницей, остальные не отображаются. Так,

1. Для пагинации, вы BACKEND должны поддерживать, что, как он должен иметь параметр как limit, start, pageSize и т.д.

2. Для реализации пагинации, ваш store должен иметь эти конфиги как pageSize, buffered и т.д. .

Следовательно, если ваша внутренняя поддержка и вы внедрили pagination. Тогда вы можете наслаждаться преимуществами infinite: true и получать экстремальные характеристики сенсорного списка sencha.

Answer 3

Вы можете пойти с этим. Добавьте этот плагин, он автоматически обрабатывает бесконечную прокрутку.

http://docs.sencha.com/touch/2.4/2.4.0-apidocs/#!/api/Ext.plugin.ListPaging

для автономного

Вы можете реализовать идею. Создайте 2 магазина, полностью загруженный, а второй загрузится только с некоторым размером страницы. 10. Вы будете использовать второй магазин в своей сетке и внедрить плагин подкачки списка, а также передать второй магазин. Вы можете помочь с этим примером скрипки. (Этот пример в Ext, 5, но логика будет такой же)

https://fiddle.sencha.com/#fiddle/pim

Пожалуйста, попробуйте это и дайте нам знать.