2

Ext で表示している 2 つのビューにスクロール バーを追加できませんでした。各ビューはベース ビューの拡張であり、ベースにはautoScroll: true. 要素にoverflow: autoプロパティが適切に割り当てられていることを確認しました。

私はいくつかの検索を行って、この質問を見つけました。その解決策を適用した後 (この'vbox'レイアウトを使用していませんでしたが)、問題は解決しませんでした。

ベースビューは次のとおりです。

Ext.define('Our.extensions.baseList', {
    extend: 'Ext.view.View',
    itemSelector: 'div.postContainer',
    autoScroll: true,

    initComponent: function(){
        this.tpl = new Ext.XTemplate(           
            '<tpl for=".">',
                '<div name="postContainer" class="postContainer">',
                    // Contains Layout for posts
                '</div>',       

            {    // can run internal functions within a template
                createButton: function(idPost){
                    // Creates layout for buttons and returns it
                }
            }
        );

        this.callParent(arguments);
    }
});

2 つの子ビューは次のとおりです。

Ext.define('Our.view.post.convList', {
    extend: 'Our.extensions.baseList',
    alias : 'widget.convList',  
    emptyText: 'No Conversation Followed',  
    title: 'Coversations',  

    initComponent: function(){      
        this.store = new Ext.create('Ext.data.Store', {
            id:'convStore',
            model: 'Our.model.Post',
            data: []
        });     

        this.callParent(arguments);
    }
});

と：

Ext.define('Our.view.post.postList', {
    extend: 'Our.extensions.baseList',  
    alias : 'widget.postList',
    emptyText: 'No Posts',
    title: 'Posts'
});

最終的に、私の質問は、有効な構成プロパティとして Sencha docs にリストされている構成プロパティExt.view.Viewを実際にサポートしているか (または、単に無視しているように見えるか) です。autoScroll構成をサポートしていないことを知っているlayoutため、リンクされた質問のソリューションが機能しなかったのはなぜですか。サポートしている場合、スクロールバーを表示するにはどうすればよいですか?

編集

解決策を考え出す試みで私が発見したいくつかのことは、サイズがハードコーディングされている限り（設定されたピクセル数）、ビュー自体にサイズを設定することです。config: を追加しheight: 500,たり、CSS クラスをheight: 500px;介したパーセンテージ サイズを持つ CSS クラスを追加したりすることはまったく機能しません。コンポーネントのサイズを変更することさえできません。

2回目の編集

受け取った最初の回答へのコメントで述べたように、コンポーネントはサイズを取得していました1063(注: 開発環境は 1080x1920 モニター (縦向き) 上にあり、Chrome で実行されている JavaScript コンソールでは、表示されるフレームの高さです) 「目に1063見える」とは、が追加されているpostPanelことを意味します。View

refresh一時的な解決策を見つけました。残念ながら、実際の製品リリースには理想的ではないと思いますXTemplate。postPanelこれにより、スクロールバーが強制的に適用されるようです。また、2 つの s のイベントを発生させる のresizeイベントにリスナーを追加しました。postPanelrefreshView

追加は...

子ビューに:

listeners: {
    refresh: function() {
        var parent = this.up('postPanel');
        if (parent != undefined) {
            this.setSize({
                width: undefined,
                height: parent.getHeight()
            });
        }
    }
}

そしてへpostPanel：

listeners: {
    resize: function() {
        var postList = this.down('postList');

        if (postList != undefined) {
            try {
                postList.fireEvent('refresh');
            } catch(e) { /* ignored */ }
        }

        var convList = this.down('convList');

        if (convList != undefined) {
            try {
                convList.fireEvent('refresh');
            } catch(e) { /* ignored */ }
        }
    }
}

これが理想的な解決策ではないと私が感じる主な理由は、ビューの自動サイズ変更が親の半分の幅に壊れていることです (そして、イベントparent.getWidth() / 2のthis.setSize()呼び出しで幅を に設定しrefreshても、サイズはまったく変更されません。それに加えて、これが低速のコンピューターにオーバーヘッドを追加するかどうかはわかりません。

4

2 に答える 2

1

そのため、autoScroll は、コンポーネントが収まるはずのボックスのサイズを認識している限り機能するはずです。特定のボックス サイズを設定したくない場合は、ビュー コンポーネントをフィット レイアウトのビューポートに配置してみてください。次に、ビューポートがボックスのサイズを決定し、割り当てられたスペースでビューがスクロールを開始する必要があります。このプリンシパルはすべてのコンテナーに使用されます。どこかでボックスのサイズを指定する必要があります。Viewport は、デフォルトでフルスクリーンのサイズを計算する魔法のコンポーネントです。

于 2011-12-09T21:16:04.753 に答える