ExtJSポータルとポートレットは、通常のCSS要素のように配置できますか?
-
24-10-2019 - |
質問
ポータルとそのextJSポートレットを固定幅のレイアウト内に収めることを望みます。現在、彼らは幅の100%をとっているようで、要素には最大幅を与えるためにインラインスタイルが適用されているように見え、ポータルのアイテムの「幅:50%」のスタイルを指定するなどのトリックは何もしないようです。
どのようにしてポートレットをサイズと配置することができ、通常のCSSポジショニングスキルを適用する方法はありますか? Inspect Elementに表示される生成されたHTMLには、ピクセルの幅を指定するインラインスタイルがあり、スタイルシートに入れたものは何でも切り替えます。
ページ内に相対的なポジショニングを備えた通常のブロック要素のようにポータルを表示したいと思います。それは可能ですか、そうでない場合、私の次の最良の選択肢は何ですか?
解決
ポートレットはレイアウトによって管理されます。レイアウトはサイズを設定し、ビューポートのサイズに応答するものです。既存のレイアウトを変更するか、これを行うために独自のカスタムレイアウトを作成する必要があります(または、に基づいていない独自のポータルを作成する必要があります。既存の例)。
他のヒント
答えがあるようです。レンダリングを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は要素レンダリングのIDです。
所属していません StackOverflow