Define listeners in controller ExtJS

Question

I have got the tabpanel - it's the main form (view). In this tabpanel I define the different tabs - xtype:'panel'.

So, I have one main(controller) , main view and some tabs views. The tab's views are referenced in main view.

I want to define listener of activate event of some child's panel in main controller.

How can I do that?

the main controller :

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 () {

    }
});

The main view:

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);
    }

});

The child panel RequisitesApartment (view):

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);
    }
});

sra · Accepted Answer · 2012-09-21 08:45:11Z

7

Register it directly as control within the responsible controller

Here is a example with a working query. For sure you just will need the query, but I think it's a good example. The custom cfg property ident make it easy find each tab. As in the example below you will have specify a tabConfig within each panel and define the ident there.

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]);

Another way is to use css id's which can be queried like '#my-name' but I recommend to use a custom one as in the example above

edited Sep 21, 2012 at 8:45

answered Sep 21, 2012 at 8:21

sra

24k8 gold badges59 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sra Over a year ago

@Oleg edit done. With this example you direct access to each tab

Oleg Over a year ago

In 'main'(controller) I write : this.control({ 'ApartmentData tabpanel tabbar tab[ident=foo]': { activate: function (grid) { console.log('parampampam'); } } }); - But it is not work(

sra Over a year ago

@Oleg First; you should write widgets in lower case and only classnames in camelcase. Second; have you applied a tabConfig along with xtype: 'RequisitesApartment'? The Example above can be copied into one of the example code fields within the sencha API.

Community · Accepted Answer · 2017-05-23 12:23:55Z

3

Well, I should put this code in 'main'(controller):

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

The problem was in wrong selector , that I used. The correct selector is :

 'ApartmentData tabpanel RequisitesApartment'

There 'ApartmentData'(define like a alias: 'widget.ApartmentData') - is the 'window' xtype -the main form. tabpanel - panel with tabs in 'window', and 'apartServList'(define like alias: 'widget.RequisitesApartment') - the some panel.

Thanks for sra!

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Sep 21, 2012 at 11:00

Oleg

1,8454 gold badges28 silver badges40 bronze badges

3 Comments

sra Over a year ago

Well, apartServList can not be found in your example code. So it will be a bit hard to track for others why this is the correct answer. Me included. Maybe you could edit your question.

sra Over a year ago

And please note that my example points you to the tab-button itself, not to the tab. As Far as I know the activate event of the tab is not bubbled to the panel, isn't it?

Oleg Over a year ago

I edited my answer, in the 'panel' xtype have the 'activate' event .

r366y · Accepted Answer · 2012-09-21 08:38:46Z

0

the correct thing to do is to pass a config object to the member function control into controller init function. From Sencha documentation : The control function makes it easy to listen to events on your view classes and take some action with a handler function.

A quick example straight from 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');
}
});

Hope this helps. Cheers

answered Sep 21, 2012 at 8:38

r366y

3816 silver badges18 bronze badges

1 Comment

aswininayak Over a year ago

How we can add multiple listener for a store inside controller file? var ps = this.getMyStore(); ps.on({ beforesync : this.beforesync, finishupdate : this.finishupdate, finishedWriting: this.finishedWriting, scope: this });

Collectives™ on Stack Overflow

Define listeners in controller ExtJS

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related