Extjs 6 responsiveConfig не может найти сеттеры для элементов конфигурации макета

У меня есть базовый макет, в который я пытаюсь добавить адаптивные конфигурации .

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

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

Скрипка, на которую я ссылался выше, является моей попыткой прототипирования этой концепции.

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

введите здесь описание изображения

Ext.layout.container.Box определенно имеет метод setPack.

Я как-то неправильно настроен?


responsive-design extjs extjs6-classic extjs5 extjs6
person Chris Schmitz    schedule 22.07.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

Я добавил реализацию адаптивного блока, а также переключение региона в свою скрипку.

Вот необходимые адаптивные разделы:

plugins: 'responsive',
responsiveConfig:{
    wide:{
        layout:{
            type: 'box',
            vertical: true,
            pack:'start'
        },
        region: 'west'
    },
    tall:{
        layout:{
            type: 'box',
            vertical: false,
            pack: 'center'
        },
        region: 'north'
    }

Я думаю, что важно знать здесь (и что меня сбило с толку), это то, что вы должны включить type: 'box' в конфигурацию layout для свойства responsiveConfig, потому что responsiveConfig не запускает каждый отдельный сеттер для макета (type, vertical и pack ), он запускает общий метод установки layout. Если вы не включаете конфигурацию type в объект, который вы даете конфигурации макета, он использует тип по умолчанию, который является "авто".

Вот почему на скриншоте я включил в исходный пост сообщения об ошибках в консоли javascript, где речь идет о Ext.layout.container.Auto, а не Ext.layout.container.Box. Сообщение об ошибке было правильным, Ext.layout.container.Auto не имеет метода setPack.

person Chris Schmitz    schedule 23.07.2015
comment
Это просто здорово! Спасибо, что поделились этим. - person Tarabass; 23.07.2015
comment
Без проблем. Это была такая заноза в заднице, отсеивать и грокать, что было бы преступлением не объяснить это как можно лучше! - person Chris Schmitz; 23.07.2015
comment
Можете ли вы не принять другой ответ и принять свой собственный? Правильное решение должно быть выделено :) - person Elias Medeiros; 23.07.2015
comment
Я могу, но мне нужно подождать два дня, так как я отправил ответ - person Chris Schmitz; 23.07.2015

arrow_upward
1
arrow_downward

Изменение макетов во время выполнения в настоящее время не поддерживается. Здесь есть запрос на эту функцию: https://www.sencha.com/forum/showthread.php?294082

Попробуйте обходной путь: https://fiddle.sencha.com/#fiddle/dqj

person Tarabass    schedule 22.07.2015
comment
Круто, спасибо за внимание: запрос функции и обходной путь. В моем случае это не сработает, потому что ряд навигационных кнопок не будут элементами вкладок, и внешний вид должен быть согласованным, поэтому панель вкладок не подходит: / - person Chris Schmitz; 22.07.2015

arrow_upward
0
arrow_downward

Ошибка жалуется на то, что макет auto не имеет установщика для pack. Это говорит мне, что макет действительно устанавливается во время выполнения в соответствии со значением, указанным в конфигурации адаптивного макета. Поскольку не определено ни одного, только vertical и pack, конфиг, тип макета интерпретируется как auto. Небольшие изменения в вашей скрипте, определяющие тип макета, как показано ниже:

responsiveConfig:{
    wide:{
        layout:{
            type : 'vbox',
            pack:'start'
        },
        bodyStyle:{'background-color': 'orange'}
    },
    tall:{
        layout:{
            type : 'hbox',
            pack: 'center'
        },
        bodyStyle:{'background-color': 'purple'}
    }
},

И ваша ошибка исчезла.

person Elias Medeiros    schedule 22.07.2015
comment
Он подавляет ошибку, но не обеспечивает функциональность; кнопки не переключают тип группировки. Документация по sencha на Ext.Panel указывает, что тип макета нельзя изменить во время выполнения. Вот почему я пытался использовать этот подход с изменением вертикального свойства, поскольку его можно установить во время выполнения. - person Chris Schmitz; 22.07.2015