Formpanel Events don't work when using itemID/delegate

[SchattenMann]

i've noticed the following:

events work if i don't set a itemId

Ext.define('PrimaveraWebUI.view.EditorCabecDoc', {
    extend: 'Ext.form.Panel',
    alias: 'widget.editorcabecdoc',

    config: {
        items: [],
        listeners: [
            {
                fn: 'onCabecDocActivate',
                event: 'activate'
            }
        ]
    },

    onCabecDocActivate: function(container, newActiveItem, oldActiveItem, options) {
        console.debug('nice');
    }

});

but if i set a itemId no event will work

Ext.define('PrimaveraWebUI.view.EditorCabecDoc', {
    extend: 'Ext.form.Panel',
    alias: 'widget.editorcabecdoc',

    config: {
        itemId: 'cabecdoc',
        items: [],
        listeners: [
            {
                fn: 'onCabecDocActivate',
                event: 'activate',
                delegate: '#cabecdoc'
            }
        ]
    },

    onCabecDocActivate: function(container, newActiveItem, oldActiveItem, options) {
        console.debug('nice');
    }

});

i've tried with random itemID values so there is no way this is some conflict.

also i've searched in the HTML code for "CabecDoc" (my itemID) and it doesn't exist anywhere so i guess this values is not being passed to the HTML

[mitchellsimoens]

Have you tried using the control config on Ext.Container and it's subclasses?

[SchattenMann]

i've tried it now with same result, event not fired.

Ext.define('PrimaveraWebUI.controller.Navegador', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            Stage: 'stage',
            EditorVendas: 'stage editorvendas',
            EditorVendasToolbar: 'editorvendas toolbar'
        },

        control: {
            "CabecDoc": {
                activate: 'onFormpanelActivate'
            }
        }
    },

    onFormpanelActivate: function(container, newActiveItem, oldActiveItem, options) {
        console.deubg ('buh');
    }

});

[SchattenMann]

i forgot to mention i'm using Designer so i believe i can't do that...or at least i don't know how

also this doesn't seem to happen with every container.

if i do it with a button it works perfectly, same with a navigation view.

that's confusing

[mitchellsimoens]

I meant control on the form panel:

Ext.define('MyForm', {
    extend : 'Ext.form.Panel',
    xtype : 'myform',

    config : {
        ....
        control : {....}
    }
});

[SchattenMann]

PS: no idea how but my post ended up before yours O.o

[SchattenMann]

thanks for the reply.

as i said this is not happening me with buttons.

i'm using a lot of button tap events with no problems whatsoever.

FormPanel was the first time i had a problem...

you can replicate a working tab activate event with itemId defined?

[mitchellsimoens]

PS: no idea how but my post ended up before yours O.o

That happens if you reply too fast, seems to be a server time issue... happens to me all the time. Here is a test application to show itemId working from Controller and the Form:

Ext.define('Test.controller.Main', {
    extend : 'Ext.app.Controller',

    config : {
        control : {
            'myform #submit' : {
                tap : 'onButtonTap'
            }
        }
    },

    onButtonTap : function() {
        console.log('button tap fired from controller');
    }
});

Ext.define('Test.view.MyForm', {
    extend : 'Ext.form.Panel',
    xtype  : 'myform',

    config : {
        items : [
            {
                xtype : 'textfield',
                label : 'One'
            },
            {
                xtype  : 'button',
                text   : 'Submit',
                ui     : 'confirm',
                itemId : 'submit'
            }
        ],

        control : {
            '#submit' : {
                tap : 'onButtonTap'
            }
        }
    },

    onButtonTap : function() {
        console.log('button tap fired from view');
    }
});

Ext.application({
    name : 'Test',

    controllers : ['Main'],

    launch : function () {

        new Test.view.MyForm({
            fullscreen : true
        });

    }
});

[mitchellsimoens]

Something like this?

Ext.define('Test.controller.Main', {
    extend : 'Ext.app.Controller',

    config : {
        control : {
            'mytab #one' : {
                activate : 'onOneActivate'
            },
            'mytab #two' : {
                activate : 'onTwoActivate'
            }
        }
    },

    onOneActivate : function() {
        console.log('one activate from controller');
    },

    onTwoActivate : function() {
        console.log('two activate from controller');
    }
});

Ext.define('Test.view.MyTab', {
    extend : 'Ext.tab.Panel',
    xtype  : 'mytab',

    config : {
        items : [
            {
                title  : 'One',
                html   : 'one',
                itemId : 'one'
            },
            {
                title  : 'Two',
                html   : 'two',
                itemId : 'two'
            }
        ],

        control : {
            '#one' : {
                activate : 'onOneActivate'
            },
            '#two' : {
                activate : 'onTwoActivate'
            }
        }
    },

    onOneActivate : function() {
        console.log('one activate from view');
    },

    onTwoActivate : function() {
        console.log('two activate from view');
    }
});

Ext.application({
    name : 'Test',

    controllers : ['Main'],

    launch : function () {

        new Test.view.MyTab({
            fullscreen : true
        });

    }
});

[SchattenMann]

yes

tried both with control and events.

i've just create a new clean project under Designer to make sure it wasn't some mistake i've made somewhere and same behavior...everything works until i set an itemId

Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',

    config: {
        items: [
            {
                xtype: 'formpanel',
                title: 'MyFormPanel',
                itemId: 'test'
            },
            {
                xtype: 'formpanel',
                title: 'MyFormPanel1'
            }
        ],
        listeners: [
            {
                fn: 'onTabpanelActivate',
                event: 'activate',
                delegate: '#test'
            }
        ]
    },

    onTabpanelActivate: function(container, newActiveItem, oldActiveItem, options) {
        console.debug('worked');
    }

});

did your code worked?