Results 1 to 4 of 4

Thread: Getting the right scope in button handler

  1. #1

    Default 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
    165

    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    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 @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    8

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •