panel - ボタンのクリック時にパネルを表示および非表示にする

Question

画像に表示されているように、「非表示」ボタンがあります。[非表示] ボタンをクリックすると、左側のパネルが非表示になり、右側のパネルが画面の 100% を覆うようになります。そうすると、「非表示」ボタンが変わり、パネルが元の位置に戻る場所が表示されます。

同じことをするために

xtype:'toolbar',
            docked:'top',
            items:[
                {
                    cls:'hide',
                    xtype:'button',
                    text:"Hide",
                    iconMask:true,
                    ui:'back',
                    id:'hide',
                    handler:function () {

                        var viewWidth = Ext.Viewport.getWindowWidth();
                        alert(viewWidth);
                        desiredWidth = Math.min(viewWidth, 400) - 10;
                        Ext.fly('protocol').setStyle('width', desiredWidth); ;

                    }
                },

上記のコードでパネルの幅を動的に変更しようとしましたが、Ext.fly は機能しているようです。これに対する解決策は何ですか？

どんな助けでも大歓迎です。

Answer 1

左パネルのハイライトを高く評価します。

ただし、あなたの画像を見るだけで、ここで仮定を立てています。非表示にしたいのは、次を含む左側のパネルだけである場合

次に、たとえば、「DIV」html タグ内で LEFT および RIGHT パネルを宣言した後に jQuery トグルを実行することができます。以下のリンクを参照してください。

トグル用のjQuery API

また、これをビルドするために Javascript ライブラリまたはツールを使用している場合は、Javascript のソースを取得して、それに飛び込みたいと思うかもしれません。

私の経験からすると、既製のものを使用するよりも、独自に Javascript 関数を作成する方がはるかに簡単です。

Answer 2

Ext.getCmp('workItemPanel').hide();

私にとってはうまくいきました。