Getting the right scope in button handler

[forumuser1080]

I cannot seem to get the scope that I want in my handler for a button.

Here I am extending FormPanel, I add some fields because I will want to create a couple different instances of this panel with the same fields


Ext.ns('MyApp');

MyApp.FormPanel = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'textfield',
fieldLabel: 'first name'
},{
xtype: 'textfield',
fieldLabel: 'last name'
}]
});
MyApp.FormPanel.superclass.initComponent.apply(this, arguments);
}

});


and later in code I new up one of my form panels but I want to add a button, each panel I create will have different functionality for the buttons I need to add.


...
layout: 'border',
items : [new MyApp.FormPanel({
title: 'my form panel',
region: 'center',
buttons: [{
text: 'Save',
handler: function() {
var values = this.form.getFieldValues();
},
scope: this // I know this won't work, need the form panel I just created
}]
})]
})
...


I want the scope of the handler to be the FormPanel itself so that I can get some info from the form.
Is there any way to set the scope correctly when I insert the a new panel into items like I am doing?

[walldorff]

The config option ref is perfectly suited for this.
Read all about it in this (http://www.vinylfox.com/the-hottest-extjs-30-feature-youve-never-heard-about/) article.

[mitchellsimoens]

ref works to make a reference a child in a parent component. He wants to have the scope of the child be that of a parent component.

Since you don't have the FormPanel instantiated yet, what I would do is this:


handler: function() {
var form = this.findParentByType(Ext.form.FormPanel);
....
}

In ExtJS 4, we have a ComponentQuery and up/down methods so if you ever go to ExtJS 4 just keep in mind that there are other ways. ComponentQuery can be very robust. This is just an FYI.

[hassane]

Me too I have got the same problem. I cannot access the var pan within the function HandleChangePanel f I use xtype to create the buttons. I solved the problem with the following code. I created the buttons and panel separately and then added the buttons to the panel.

Ext.require([

    'Ext.panel.*',
    'Ext.button.*']);
Ext.onReady(function () {


    var pan = Ext.create('Ext.panel.Panel', {

        width: 500,
        height: 400,
        title: "VBoxLayout Panel",
        layout: {
            type: 'vbox',
            align: 'center'
        },

        items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            itemId: 'panel-id',
            width: '100%',
            flex: 1
        }],
        renderTo: pane,

    });



    var bar = Ext.create('Ext.toolbar.Toolbar', {
        // renderTo: document.body,
        width: '100%',
        dock: 'top',




        items: [{
            text: 'Button'
        }, {
            xtype: 'splitbutton',
            text: 'Split Button'
        },
            '->', {
            xtype: 'cycle',
            prependText: 'show: ',
            //flex:1,
            showText: true,




            menu: {




                items: [{
                    text: 'One plot'
                    //checked:true
                }, {
                    text: 'Two plots'
                }, {
                    text: 'Tree plots'
                }, {
                    text: 'Four plots'
                }]
            },
            changeHandler: handleChangePanel //(cycle, activeItem)//(cycle, activeItem)
        }]
    });


    // function
    pan.addDocked(bar);
   
    function handleChangePanel(cycle, activeItem) {
        switch (activeItem.text) {
            case 'One plot':
                pan.items.each(function (c) {
                    pan.remove(c);
                })
                pan.add({
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                });
                break;




            case 'Two plots':
                pan.items.each(function (c) {
                    pan.remove(c);
                })
                pan.add({
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                }, {
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                });
                break;
            case 'Tree plots':
                pan.items.each(function (c) {
                    pan.remove(c);
                })
                pan.add({
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                }, {
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                }, {
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                });
                break;
            case 'Four plots':
                pan.items.each(function (c) {
                    pan.remove(c);
                })
                pan.add({
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                }, {
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                }, {
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                }, {
                    xtype: 'panel',
                    width: '100%',
                    flex: 1
                });




        }
    }
});



Please let me know weather this is good or should I use other methods. any suggestions will be appreciated. Thank you