0

extjs 4.0.7から4.1.1に切り替えようとすると、いくつかの問題が発生します。

最初の問題は次のとおりです。

列レイアウト内に2つのツリーパネルがあります。隣同士。私のアプリは左側のパネルに多数のノードをロードし、オプションでそれらの一部を他のパネルに移動できます。ただし、すべてのノードを含むパネルにスクロールバーが表示されていないため、ノードの約3分の1が突然表示されません。4.0.7でも同様の問題が発生し、別のノードを移動するまでパネルがいっぱいの場合、最後のノードが移動したことを確認できませんでした。私はそれを次の行で修正しました：

treePanel1.invalidateScroller();
treePanel2.invalidateScroller();

これらの行は4.1.1で非推奨になり、問題はさらに悪化したようです。誰かが同様の問題を抱えていましたか？スクロールバーを元に戻すにはどうすればよいですか？

私のUIに関連する2番目の主要な問題：

ツリーパネルと同じようにレイアウトされた2つのグリッドが他の場所に隣接しています。2つのグリッド間にドラッグアンドドロップを設定しました。ここでも、すべてのノードは左側のグリッドから始まり、一部を右側のグリッドにドラッグするオプションがあります。ただし、右側のグリッドはフルサイズで表示されなくなり、デフォルトでスライバーになります。したがって、ノードをその小さなスライバーにドラッグすることがわかっている場合は、DD機能はまだ存在します。その後、スライバーは単一ノードなどを保持するのに十分に拡張します。では、どうすればデフォルトのフルサイズに戻すことができますか。extjs 4.1.1がこれらの問題を引き起こしたのはなぜですか？私はどんなコードでも指を太くする必要がありますが、絶対に必要な場合はできます。しかし、私の説明に基づいてこの種の問題に精通している人がいれば、それは素晴らしいことです。

編集：また、グリッドの右端の列にコンボボックスがあります。クリックしてコンボボックスの1つを変更すると、ミニスクロールバーがポップアップし、ドロップダウンボタンがブロックされます。彼らはこのバージョンに何をしましたか？

必要なときにスクロールバーがパネルに表示されないという最初の問題があるレイアウト定義は次のとおりです。

{
    xtype: 'panel',
    title: 'Select fields',
    defaults: {
        border: false,
        height: '100%'
    },
    layout: 'column',
    items: [

        {
        xtype: 'treepanel',
        itemID: 'choicesTreePanel',
        title: 'Choose from below fields',
        height: '100%',
        multiSelect: true,
        store: choicesTree,
        rootVisible: false,
        columnWidth: .44},

    {
        xtype: 'panel',
        columnWidth: .06,
        layout: {
            type: 'vbox',
            align: 'center'
        },
        defaults: {
            margins: "15 0 0 0"
        },
        items: [
            {
            xtype: 'button',
            text: '==>'},
        {
            xtype: 'button',
            text: '<=='},
        {
            xtype: 'button',
            text: 'RST'}

             ]},
    {
        xtype: 'treepanel',
        itemId: 'chosenTreePanel',
        title: 'Fields',
        border: true,
        store: chosenFields,
        rootVisible: false,
        columnWidth: .44,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop,
        dragText:'
                dragginggggg '
        },
        ddGroup: '
                fieldsDD '        
        }
        },
        {xtype:'
                panel ',
        columnWidth:.06,
        layout:{
        type:'
                vbox ',
        align:'
                center '
        },
        items: [
            {
            xtype: '
                button ',
            text: '
                UP '},
        {
            xtype: '
                button ',
            text: '
                DOWN '}

             ]
        }

        ]
 }

編集：左側のパネルで、高さを設定値にし、自動スクロールをtrueにすると、スクロールバーが表示されます。高さを「100％」に設定して自動スクロールをtrueに設定すると、スクロールバーが表示されません。したがって、解決策は、スクロールバーを維持しながら、パネルを親の高さに合わせる方法を見つけることかもしれません。

4

2 に答える 2

1

パーセンテージ ベースの高さのソリューションを探していますが、定数値の高さを使用することもできます。多くの場合、これで問題を回避できます。たとえば、パネルの高さを 600 に設定すると、スクローラーの問題が修正されます。

これは、パーセンテージ ベースのレイアウトの問題を解決しません。他の誰かがそれを手伝ってくれることを願っています。

于 2012-09-24T18:53:27.150 に答える
1

（質問を複数の個別の質問に分割するのが最善かもしれません）

パネルの高さとスクロールバーに関する最初の質問について:

あなたの例では、「ツリーパネルに何に関連する100％の高さを持たせたいですか？」という質問を自問します。

列レイアウトは通常、親に関連する子要素の高さを気にしない場合に使用されます。ここで確認できるように、子要素の高さの合計が列の高さを定義します: http://docs .sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html .

列の高さを定義しなかったため、子要素の高さを使用します (この例では高さはありません)。この場合、Ext が何をするかはわかりませんが、これに基づくと、スマートなことは何もできません。

ツリーパネルがそれを含むパネルの高さ全体を使用するようにしたい場合は、 align プロパティをstretchに設定したhboxレイアウトを使用します。高さの計算が適切に行われるため、スクロールバーも修正される可能性があります。「height: 100%」と「autoscroll」のプロパティを削除することを忘れないでください。これらは混乱を招くためです。

最後に、ツリーパネルのレイアウトを「フィット」に変更すると、探している結果が得られる場合があります。

コードは次のようになります。

{
    xtype: 'panel',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'treepanel',
        layout: 'fit',
        flex: 44,
        ...
    }, {
        flex: 6,
        ...
    },{
        flex: 44,
        ...
    }]
}

私はあなたのコードでこの答えをテストしませんでした。完全に動作するコード サンプル (ダミー ストアを含む) を提供してください。テストします。

于 2012-09-19T14:14:32.123 に答える