1

こんにちは、vbox レイアウトを使用して tabpanel のタブに自動スクロールバーを表示しようとしています。

これは私にとってはうまくいきません。「高さ」構成値が無視されているようです。

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items:  

    {
        xtype: 'tabpanel',
        items: [{
            autoScroll: true,
            height: 1000,
            title: 'Bar',
            layout: 'vbox',
            align: 'stretch',
            items: [
                {
                    xtype: 'panel',
                    flex: 1,
                    border: 1,
                    style: {borderColor:'#FF0000', borderStyle:'solid', borderWidth:'1px'},
                    html: 'hi!'
                },
                {
                    xtype: 'panel',
                    flex: 3,
                    border: 1,
                    style: {borderColor:'#00FF00', borderStyle:'solid', borderWidth:'1px'},
                    html: 'hi too!'
                }
            ]
        }]
    }        


}).show();

代わりに、これは完全に機能しています:

function getLongText(rc) {
    var lt = '';
    for(var i=0; i < 100; ++i) {
        lt += rc + '<br>';
    }
    return  lt += 'END<br>';
}

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items:  

    {
        xtype: 'tabpanel',
        items: [{
            autoScroll: true,
            title: 'Bar',
            html: getLongText('A')
        }]
    }        


}).show();

タブパネルは「フィット」レイアウトで作成されており、問題ありません。また、内側のパネルの高さをコンテナの高さよりも意図的に高く設定しています。内側のパネルで「autoscroll」ヒントを指定するようにしましたが、それも問題ありません。

どうやらインナーパネルの「高さ」に問題があるようです。効果はないようです。Vbox レイアウトは、含まれる各コンポーネントの「flex」プロパティに従って、コンテナーの高さを分割することになっています。

何か案が？ありがとう。

アンドレア

4

3 に答える 3

0

垂直スクロールを取得するためにリサイズ イベントにリスナーを追加しました。

Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
    resize: {
        fn: function(el) {
            this.setHeight(this.up('window').getHeight()-150);  // 150  is extra for my panel coz of headers so have minus it.
            console.log("new height = " +   this.up('window').getHeight()-150);
        }
    }
},
title: "Update Data Configurations",

この助けを願っています。

于 2016-05-03T15:18:41.757 に答える