1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    108
    Vote Rating
    1
    forumuser1080 is on a distinguished road

      0  

    Default Getting the right scope in button handler

    Getting the right scope in button handler


    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
    Code:
    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.
    Code:
    ...
    		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?

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    164
    Vote Rating
    2
    walldorff is on a distinguished road

      0  

    Default


    The config option ref is perfectly suited for this.
    Read all about it in this article.
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,094
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
    hassane is on a distinguished road

      0  

    Default


    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

Similar Threads

  1. scope of handler
    By zerostatic in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 13 Jul 2010, 11:37 AM
  2. How to call button handler from another button handler function
    By talha06 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Jun 2010, 9:19 AM
  3. again a scope problem in handler
    By steffenk in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 6 Aug 2009, 3:46 AM
  4. Handler scope
    By bkraut in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 7 Jul 2009, 1:09 AM
  5. Action handler scope
    By john.brown in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 18 Sep 2008, 12:41 PM

Thread Participants: 3