extjs4 - Extjs 4 / 煎茶

Question

私はジュニアの Sencha/Extjs ユーザーで、何かをしようとしています。単純だと確信していますが、まだ方法がわかりません。

あなたがここに見ることができるように：

2 つのパネルがあり、1 つは「パネル 1」と呼ばれ、もう 1 つは非表示で「パネル 2」と呼ばれます。また、2 つのツールバーがあり、1 つは「パネル 2 に移動」というボタンが付いています。

「パネル 1」は非表示にする必要があり、「パネル 2」は「パネル 1 に移動」という別のボタンがある 2 番目のツールバーと共に表示されます。

これを十分に明確にしたことを願っています。私は上記のことを行うことができましたが、私は愚かな方法を使用していると思います.ボタン1でonButtonClick関数を使用してイベントバインディングを使用しています:

Ext.getCmp('p2').show();
Ext.getCmp('tb2').show();
Ext.getCmp('p1').hide();
Ext.getCmp('tb1').hide();

ボタン 2 ではその逆:

Ext.getCmp('p1').show();
Ext.getCmp('tb1').show();
Ext.getCmp('p2').hide();
Ext.getCmp('tb2').hide();

今、コントローラーを使用してそれを達成するためのより良い方法があると確信していますが、私が言ったように、私には経験がないので、その方法を詳細に説明してくれる人が必要です.

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

編集

私もこれを達成する必要があります:

Button 1 --> panel 1

Item 1 --> panel 2

Item 2 --> panel 3

score 3 · Accepted Answer

カードレイアウトを使用して、この種の UI を作成できます。ここでドキュメントとライブの例を確認してください。

score 0 · Accepted Answer

ビューが次のように見えた場合

Ext.define('MyApp.view.parentpanel', {
    extend: 'Ext.panel.Panel',

    height: 250,
    width: 400,
    activeItem: 0,
    layout: {
        type: 'card'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    html: 'i\'m panel 1',
                    bodyPadding: 10,
                    title: 'panel 1'
                },
                {
                    xtype: 'panel',
                    html: 'i\'m panel 2',
                    bodyPadding: 10,
                    title: 'panel 2'
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            text: 'go to panel 2'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

コントローラーは次のようになります

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    views: [
        'parentpanel'
    ],

    onButtonClick: function(button, e, options) {
        var me = this,
            parentPanel = button.up('panel'),
            layout = parentPanel.getLayout(),
            activeItem = layout.getActiveItem(),
            title = activeItem.title,
            index = (title === 'panel 1' ? 1 : 0);

        layout.setActiveItem(index);
        button.setText('go to ' + title);
    },

    init: function() {
        this.control({
            "button": {
                click: this.onButtonClick
            }
        });

    }

});

extjs4 - Extjs 4 / 煎茶

2 に答える 2

Related

Reference