Могут ли порталы и портлеты ExtJS позиционироваться как обычные элементы CSS?

Я хотел бы, чтобы портал и его портлеты ExtJS вписывались в макет фиксированной ширины. Прямо сейчас они, кажется, занимают 100% ширины, и элементы, кажется, применяют встроенные стили, чтобы дать максимальную ширину, и трюки, такие как указание стиля "width: 50%" для элементов портала, похоже, ничего не делают.

Как можно определить размеры и расположение портлетов, и есть ли способ применить обычный навык позиционирования CSS? Сгенерированный HTML в том виде, в каком он отображается в Inspect Element, имеет встроенный стиль, задающий ширину в пикселях, который превзойдет все, что я положил в таблицу стилей.

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

2 ответа

Решение

Управление портлетами осуществляется с помощью макета, который задает размеры, реагирует на изменение размеров области просмотра и т. Д. Для этого вам придется изменить существующий макет или создать свой собственный макет (или создать собственный портал, не основанный на существующий пример).

Кажется, у меня есть ответ. Переписать определение области просмотра для настройки рендеринга в тег div. Вот мой код:

Ext.override(Ext.container.Viewport, {
initComponent : function() {
    var me = this,
        html = Ext.fly(document.body.parentNode),
        el;
    me.callParent(arguments);
    html.addCls(Ext.baseCSSPrefix + 'viewport');
    me.el = el = 'dashboard';
    el.setHeight = Ext.emptyFn;
    el.setWidth = Ext.emptyFn;
    el.setSize = Ext.emptyFn;
    me.allowDomMove = false;
    Ext.EventManager.onWindowResize(me.fireResize, me);
    me.renderTo = me.el;
    me.height = Ext.Element.getViewportHeight() - 70;
}});

где me.el - идентификатор элемента рендера.

Другие вопросы по тегам