1

私はこのようなもの ( http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html ) を達成しようとしていますが、ポートレットのサイズを変更できるようにしたいと考えています。

Ext.layout.ColumnLayout レイアウトを持つ Ext.TabPanel があります。すべてのアイテムはパネル (Ext.form.Panel) であり、次のものがあります。

resizable : true,
draggable:true,

具体的には、次のような初期状況が与えられた場合

初期状態

強調表示されたポートレットを新しい位置にドラッグして、他のポートレットに「場所を空ける」ことができるようにしたいと考えています。残念ながら、私が今得ているのは

実情の重なり

つまり、2 つのポートレットが重複しています。代わりにこれを取得したいと思います（重複なし）：

望ましい状況 重複なし

問題は、列のサイズを固定せずにこれを達成する方法はありますか?

ありがとうございました。

4

1 に答える 1

0

本当に簡単です。必要なのは、たとえばカスタム パネルのコントローラーで move イベントを処理することだけです。

 move:function( thi, x, y, eOpts ){
    if(x!=0 && y!=0)
    {
        var cont = thi.getBubbleParent();
        var xNew = thi.getPosition()[0];
        var yNew = thi.getPosition()[1];

        var ind = 0;
        while(cont.items.items[ind].getBox().y+cont.items.items[ind].getBox().height < yNew)
        {
            ind++;
        }
        while(cont.items.items[ind].getBox().x+cont.items.items[ind].getBox().width < xNew)
        {
            ind++;
        }
        thi.setPagePosition([(xNew-x),(yNew-y)]);
        cont.insert(ind,thi);
    }
}

他のすべてのパネルの位置は、列のレイアウトから自動的に管理されます。

于 2013-02-26T11:33:08.423 に答える