8

私は持っていますtabpanel-それはmainフォーム（ビュー）です。これtabpanelで、さまざまなタブを定義します - xtype:'panel'.

だから、私は1つのmain（コントローラ）mainビューといくつかのタブビューを持っています。タブのビューはビューで参照されmainます。

コントローラーでactivateいくつかの子のイベントのリスナーを定義したい。panelmain

どうやってやるの？

コントローラーmain:

Ext.define('KP.controller.account.apartment.Main', {
    extend: 'Ext.app.Controller',

    views: ['account.apartment.Main',
        'account.apartment.Requisites'
    ],

    models: ['account.apartment.Requisites'
    ],
    stores: ['account.apartment.Requisites'
    ],


    init: function () {

    }
});

mainビュー:

Ext.define('KP.view.account.apartment.Main', {
    extend: 'Ext.window.Window',
    alias: 'widget.ApartmentData',

    height: 566,
    width: 950,
    activeItem: 0,
    layout: {
        type: 'fit'
    },
    autoShow: false,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {            
            items: [
                {
                    xtype: 'tabpanel',
                    activeTab: 0,
                    deferredRender: true, 

                    items: [                        

                        {
                            xtype: 'RequisitesApartment'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

子panelRequisitesApartment (ビュー):

Ext.define('KP.view.account.apartment.Requisites', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.RequisitesApartment',


    id: 'panel_accountrequisites',
    height: 350,
    width: 1124,
    autoScroll: true,
    layout: {
        type: 'fit'
    },


    listeners: {
        activate: function () {           
               ....load data....
               ...this listeners I want to push in 'main' controller...            
        }
    },

    initComponent: function () {
        var me = this;

        var grid_store = Ext.create('KP.store.account.apartment.Requisites');

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'gridpanel',
                    height: 260,
                    autoScroll: true,
                    dock: 'bottom',
                    store: grid_store,
                    id: 'r_gridFlatParams',
                    forceFit: true,


                    columns: [
                        ...some columns....
                    ],
                    viewConfig: {
                }
            }
            ]
        });

        me.callParent(arguments);
    }
});
4

3 に答える 3

7

担当コントローラー内のコントロールとして直接登録する

これは、実際のクエリを使用した例です。確かにクエリが必要になるだけですが、それは良い例だと思います。カスタム cfg プロパティ ident により、各タブを簡単に見つけることができます。以下の例のように、各パネル内で tabConfig を指定し、そこに ident を定義します。

Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
        title: 'Foo',
        tabConfig: {
            ident: 'foo'
        },
    }, {
        title: 'Bar',
        tabConfig: {
            ident: 'bar',
            title: 'Custom Title',
            tooltip: 'A button tooltip'
        }
    }]
});

console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=foo]')[0]);
console.log(Ext.ComponentQuery.query('tabpanel tabbar tab[ident=bar]')[0]);

別の方法は、次のようにクエリできる css id を使用することですが'#my-name'、上記の例のようにカスタムのものを使用することをお勧めします

于 2012-09-21T08:21:41.053 に答える
3

さて、このコードを「メイン」(コントローラー) に配置する必要があります。

 this.control({
        'ApartmentData tabpanel RequisitesApartment': {
            activate: function () {
                console.log('hello!');                
            }
        }
    });

問題は、私が使用した間違ったセレクターにありました。正しいセレクターは次のとおりです。

 'ApartmentData tabpanel RequisitesApartment'

「ApartmentData」( のように定義alias: 'widget.ApartmentData') は「window」xtype であり、メイン フォームです。tabpanel - 'window' にタブを持つパネル、および 'apartServList'(define like alias: 'widget.RequisitesApartment') - 一部のパネル。

ありがとうございます！

于 2012-09-21T11:00:46.843 に答える
0

正しいことは、構成オブジェクトをメンバー関数コントロールにコントローラーの 初期化関数に渡すことです。Senchaのドキュメントから : コントロール関数を使用すると、ビュー クラスでイベントをリッスンし、ハンドラー関数で何らかのアクションを実行することが簡単になります。

extjs docs からの簡単な例:

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

init: function() {
    this.control({
        'viewport > panel': {
            render: this.onPanelRendered
        }
    });
},

onPanelRendered: function() {
    console.log('The panel was rendered');
}
});

お役に立てれば。乾杯

于 2012-09-21T08:38:46.577 に答える