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

#javascript #extjs #positioning #portlet #portal-system

#javascript #extjs #позиционирование #портлет #portal-system

Вопрос:

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

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

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

Ответ №1:

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

Комментарии:

1. Есть ли страница с примерами того, как настроить макет?

Ответ №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 — идентификатор отображения элемента.