1

アプリを格納する次のビューポートがあります...

Ext.define('my.view.Viewport', {
    extend: 'Ext.Viewport',
    id: 'viewport',
    layout: 'border',
    autoDestroy: true,


    initComponent: function() {
        this.items = [
            {xtype: "widget.HeaderContainer"},
            {xtype: "widget.BodyContainer"},
            {xtype: "widget.FooterContainer"}
        ];
        this.callParent(arguments);
    }
});

ブラウザウィンドウのサイズが変更されると、すべてのコンポーネントがスペースをうまく埋めますが、ウィンドウが 1024x768 を下回ると、スクロールバーが表示されます。ビューポート内のすべてのコンポーネントは、ウィンドウが 1024x768 であるかのように描画する必要があります (ウィンドウ ビューが再び 1024x768 より大きい場合は消えます)。

これが理にかなっていることを願っています。おそらく単純なことですが、バグが多すぎずにこれを行う方法を見つけることができませんでした。

ご提案いただきありがとうございます

4

3 に答える 3

2

Ext ドキュメントによると:ビューポートはスクロールを提供しないため、ビューポート内の子パネルは必要に応じて autoScroll 構成を使用してスクロールを提供する必要があります。

コンストラクターまたはinitComponentの各コンポーネントのサイズを監視し、次のようにする必要があります

constructor:function(config){
    var config= Ext.apply({},config,{    
        autoscroll:((window.innerWidth<1024) && window.innerHeight < 768))?true:false
})
于 2012-08-01T20:01:31.973 に答える
0

これを行う通常の方法は、ビューポートの子minHeightでおよびminWidthconfigsを使用することです。

autoScroll: true子にも設定を含める必要があります。

例：これらのそれぞれについて：

this.items = [
    {xtype: "widget.HeaderContainer"},
    {xtype: "widget.BodyContainer"},
    {xtype: "widget.FooterContainer"}
];

単純な構成minWidth: 1024で問題なく動作します。

とが静的な高さminHeightであるかどうかによっては、構成が少し難しくなります。HeaderContainerFooterContainer

もしそうなら、あなたは単にに相当するminHeight設定を含めることができます。BodyContainer768 - staticHeaderHeight - staticFooterHeight

ヘッダーまたはフッターも個別にサイズ変更できるようにしたい場合（静的サイズではありません）、兄弟の1人の高さが変わるたびに最小サイズをリセットして、いくつかのフープをジャンプする必要があります。

于 2012-08-01T22:25:50.097 に答える
0

ヘッダーとフッターの高さを特定の px 値に固定しました。中央の領域には、layout=fit の単一のコンテナーがあります (ただし、これは必須ではありません)。このコンテナーは、メイン アプリ ビューをアイテムとして取得します。つまり、ビューは、ビューポートによって割り当てられたスペースを埋めます。中央領域コンテナーに配置されるビューでは、autoScroll プロパティが true に設定され、高さや幅は指定されません。子コンポーネントでもありません。ここにhttp://jsfiddle.net/dbrin/UqfFH/があります

于 2012-08-01T21:32:19.963 に答える