Can ExtJS portals and portlets be positioned like usual CSS elements?

Question

I would like to make a portal and its ExtJS portlets fit within a fixed-width layout. Right now they seem to take 100% of the width, and the elements appear to have inline styles applied to give max width, and tricks like specifying a style of "width: 50%" for the portal's items do not appear to do anything.

How can portlets be sized and positioned, and is there any way to apply usual CSS positioning skill? The generated HTML as it appears on Inspect Element has an inline style specifying a width in pixels, which will trump whatever I put in a stylesheet.

I would like to have a portal be displayed like a regular block element with relative positioning within a page. Is that possible, and if not, what are my next best options?

Answer 1

The portlets are managed by a layout, which is what sets sizes, responds to viewport resizes, etc. You would have to modify the existing layout or create your own custom layout to do this (or else build your own portal that's not based off of the existing example).

Answer 2

it seems i have the answer. Overwrite the viewport definition for customize the render to a div tag. Here is my code:

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;
}});

where me.el is the id of element render.