Ext.layout.CardLayout требует полноэкранного режима? - PullRequest
Новая
       1

Ext.layout.CardLayout требует полноэкранного режима?

4 голосов
/ 02 января 2011

Я программирую приложение Sencha Touch с умеренно сложной композицией Ext.TabBar с Ext.Panel внутри него.

Но мой Ext.Panel с использованием Ext.layout.CardLayout наталкивается на загадочную проблемукогда для него не установлено свойство fullscreen: true: оно выдает TypeError: Object card has no method 'setActiveItem', когда я пытаюсь вызвать .setActiveItem() метод panel, чего не было в моей версии для проверки концепции, у которой была fullscreen: true

Я могу воспроизвести проблему на консоли Chrome на странице с загруженной библиотекой Sencha Touch следующим образом: 

> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]})
undefined
> p1.setActiveItem(0)
TypeError: Object card has no method 'setActiveItem'

И это не происходит со свойством .fullscreen:

> var p2 = new Ext.Panel({fullscreen: true,
                          layout:'card',
                          items:[{html:'a'},{html:'b'}]})
undefined
> p2.setActiveItem(0)
subclass

Что дает?

Информация о версии: Я использую Sencha Touch 1.0.1a

Обновление 1 (3 января, ~ 10.30UTC + 1 час), обходя с отладчиком и обнаруживая вещи:

Простая установка layout: 'card' не приведет к созданию фактического Ext.layout.CardLayout объекта, создаваемого по-настоящему.Поскольку .setActiveItem() пытается делегировать свойству .layout компонента, оно почти мгновенно завершится неудачей.Однако установка .layout на новый Ext.layout.CardLayout вызывает больше проблем в будущем.

Обновление 2 : (3 января, ~ 12: 25UTC + 1h) Все сводится к нулюк различным компонентным объектам, которые не были визуализированы / вставлены в зависимость в достаточной степени, чтобы быть готовыми к визуализации.Мне удалось заставить мой код работать, добавив прослушиватели, сначала прослушиватель для события added на включающей панели, который выполняет this.setLayout(new Ext.layout.CardLayout());, затем прослушиватель afterrender для добавляемого компонента, который, наконец, вызывает .setActiveItem() для переключенияна нужную карту.

Ответы [ 4 ]

1 голос
/ 15 января 2011

Макет карты работает нормально, когда он не внешний, полноэкранный, но, конечно, что-то должно быть корневой полноэкранной панелью.

В этом случае я использую макет 'fit' вокруг внутреннего макета карты, и настройка активного элемента работает нормально: 

var inner = new Ext.Panel({
    layout:'card',
    items:[
        {html:'a'},
        {html:'b'}
    ]
});

var outer = new Ext.Panel({
    fullscreen:true,
    layout:'fit',
    items:[
        inner
    ]
});

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

Это из источника Ext.Component: 

if (this.fullscreen || this.floating) {
    this.monitorOrientation = true;
    this.autoRender = true;
}

if (this.fullscreen) {
    var viewportSize = Ext.Viewport.getSize();
    this.width = viewportSize.width;
    this.height = viewportSize.height;
    this.cls = (this.cls || '') + ' x-fullscreen';
    this.renderTo = document.body;
}

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

1 голос
/ 22 марта 2011

У меня была такая же проблема. Макет карты работает только в том случае, если на панели контейнера было расположение «fit». Но установка класса контейнера для соответствия заставляла скроллер работать неправильно. Поэтому мне пришлось отключить скроллер для контейнера и панели карт и установить скроллер для дочерних элементов панели карт.

0 голосов
/ 21 июля 2011

Сенча, возможно, изменил это, так как это было отправлено, так как я не получаю ошибку.Однако setActiveItem () заставит мои представления быть отображенными немедленно, что нежелательно при настройке пользовательского интерфейса.Если вы хотите установить начальную карту без немедленного рендеринга представлений, используйте свойство непосредственно вместо установщика, например: 

yourComp.activeItem = yourView;

вместо 

yourComp.setActiveItem(yourView);
0 голосов
/ 03 января 2011

Обновление 2 в моем вопросе вроде отвечает на вопрос, хотя решение кажется явно грузоподобным.Я не буду слишком удивлен, если это сломается в будущих версиях Sencha Touch.

...