Results 1 to 4 of 4

Thread: Getting the right scope in button handler

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    108
    Vote Rating
    1
      0  

    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
    Vote Rating
    2
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    8
    Vote Rating
    0
      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

Posting Permissions

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