Extjs перемещает компоненты панели инструментов на следующую строку, когда они перемещаются из экранов

Question

2. Я использую панель инструментов, которая содержит 6 компонентов, которые отображаются горизонтально на панели инструментов. Когда я использую свое приложение на небольших экранах (мобильных), правосторонние от 2 до 3 компонентов панели инструментов выходят из экрана или браузера. Как я могу заставить эти компоненты перемещаться на следующую строку той же панели инструментов, когда я получаю доступ к моему приложению на меньших экранах.

Answer 1

То, что вы хотите, невозможно с помощью панели инструментов. На панели инструментов box всегда есть все элементы, выровненные в одном направлении (верхняя и нижняя панели инструментов по горизонтали, левой и правой панелям инструментов вертикально), и не поддерживается применение другого макета к панели инструментов.

Вы можете, однако, оснастить панель инструментов стрелками, которые позволяют прокручивать, или с помощью меню, которое принимает все элементы, которые не подходят на экране. Требуемая конфигурация - overflowHandler:'scroller' or overflowHandler:'menu', соответственно.

Answer 2

Один обходной путь для этого, только, если вы знали, сколько элементов панели инструментов вы могли бы поместить в строку, состоит в том, чтобы создать две панели инструментов с этим множеством элементов и заставить их сидеть рядом друг с другом в макете hbox. Затем используйте responsiveConfig, чтобы переключиться на макет vbox с более узкой шириной, которая сдвинет вторую панель инструментов под другим.

Вот быстрый Fiddle пример: https://fiddle.sencha.com/#fiddle/1cot