Call ExtJS function outside of scope in Javascript

Question

I am new to ExtJS. Trying to use and customize tabs feature in application.

I want to call a function with parameters which is in ExtJs scope from Javascript Scope. Right Now I can call function without passing parameters without getting any errors. When I call same function by passing parameters(mentioned in code), It gives me following error as function is not getting any values.

Uncaught TypeError: Cannot call method 'indexOf' of null

This function should add new tab to tabpanel.

When I call same function by passing parameters from ExtJS scope it is adding tab successully. But not when function get called from javascript scope by passing parameters. Help me to understand and fix this problem.

Ext.onReady(function() {
var currentItem;
var tabs = Ext.widget('tabpanel', {
    launch: function() {
      _myAppGlobal = this;
    },
    renderTo: 'tabs',
    resizeTabs: true,
    enableTabScroll: true,
    width: 850,
    defaults: {
        autoScroll: true,
        bodyPadding: 10
    }], 
    plugins: Ext.create('Ext.ux.TabCloseMenu', {
        extraItemsTail: [
            '-',
            {
                text: 'Closable',
                checked: true,
                hideOnClick: true,
                handler: function (item) {
                    currentItem.tab.setClosable(item.checked);
                }
            },
            '-',
            {
                text: 'Enabled',
                checked: true,
                hideOnClick: true,
                handler: function(item) {
                    currentItem.tab.setDisabled(!item.checked);
                }
            }
        ],
        listeners: {
            aftermenu: function () {
                currentItem = null;
            },
            beforemenu: function (menu, item) {
                menu.child('[text="Closable"]').setChecked(item.closable);
                menu.child('[text="Enabled"]').setChecked(!item.tab.isDisabled());

                currentItem = item;
            }
        }
    })
  });

  function addTab_inside(closeable, tabtitle, targetUrl) {
      tabs.add({
          title: tabtitle,
          iconCls: 'tabs',
          autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
          closable: closeable,
          autoScroll: true,
          nocache: true,
          discardUrl: false
      }).show();
  }
});

function addTab_Outside(){
   addTab_inside(true, 'Test', 'test.php');
}

addTab_Outside function is event based and getting called onClick on xyz element.

fyi there is no such thing as ExtJS scope or JavaScript scope. — dbrin
– dbrin, Commented Mar 6, 2013 at 17:50
@dbrin I have checked some articles, which you can check too for ExtJS scope thing. link 1, link 2. I have edited my question. Please check and help to solve this issue. — Vinay
– Vinay, Commented Mar 7, 2013 at 5:58

dbrin · Accepted Answer · 2013-03-07 07:45:37Z

2

There is no such thing as Ext scope. Ext is a set of JS objects and functions no more no less. As such everything that is applicable to JS is applicable to Ext. Any scoping issues and complications are purely that of JavaScript and are not any different for Ext than for any other JS library or utility.

Now, lets take a look at what you have done:

You called Ext.onReady() function with some parameters.
You defined a function addTab_Outside() in a global scope (aka window scope).

That is all.

Now lets look at the addTab_Outside function. In this function you are calling another function addTab_inside. But where is this 'inside' function? Where should JS look for this function? Since you are defining the'ouside' function in the global scope, then JS will look for the inside function in the same scope and will fail to find it as it is not created in the global scope.

So in what scope is the 'inside' function created? Well, let's go back to the first thing that you did here: Ext.onReady() function call. You called this function passing in a single parameter. That parameter is an anonymous function with 2 local variables currentItem and tabs. And you also created a local function that you named 'addTab_inside'. When I say 'local' it means that the variables are local to the function in whose scope they were created. In your case that parent function is anonymous and hence not addressable. Any local variables whithin that function can access each other of course since they are all in the same scope. So as long as 'tabs' reference 'inside' function or the currentItem you are ok.

The only way your solution will work is if you move the outside function inside your large anonymous function block. But I suspect you dont want to do that because there really is not reason for it.

Although this discussion of scopes is important to understand, my gut feel is that you should follow a different approach to whatever it is you are trying to do. If you are building a full application then I suggest you use application structure outlined in the Sencha guides, using controllers and folder structure to separate your code.

edited Mar 7, 2013 at 7:45

answered Mar 7, 2013 at 7:17

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vinay Over a year ago

Thanks a lot for such a nice explanation, I would like to use different approach to solve this. Can you suggest me different way to accomplish what I am trying now.

dbrin Over a year ago

Certainly. There are many guides on various topics: docs.sencha.com/ext-js/4-1/#!/guide Perhaps the most important one to follow along with is docs.sencha.com/ext-js/4-1/#!/guide/application_architecture where they walk you through creating a very simple application using standard application building approach.

Justin · Accepted Answer · 2013-03-07 13:34:21Z

1

addTab_inside(true, 'Test', 'test.php'); is going to run before Ext.onReady. So, your function is not going to exist yet. Move addTab_inside to the bottom of your Ext.onReady method.

Update

@dbrin did a great job explaining the scoping issues here. If you really wanted to get your approach to work you would need to set up some "namespacing" as I show below.

//Namespace defined in Global scope
var myApp = {};

Ext.onReady(function(){ 
  //Some stuff... 

  myApp.addTab_inside = function(closeable, tabtitle, targetUrl){
    //do work
  }
});

function addTab_Outside(){
  myApp.addTab_inside(true, 'Test', 'test.php');
}

As I mentioned before, you will still need to make sure you don't call addTab_inside before Ext is ready.

With all that said, I would suggest you check out the tutorial on the suggested MVC architecture as @dbrin mentioned.

edited Mar 7, 2013 at 13:34

answered Mar 6, 2013 at 17:44

Justin

1,3103 gold badges18 silver badges30 bronze badges

1 Comment

Vinay Over a year ago

I have edited my question. As you said addtab_inside() is not getting called because of Ext.onReady. But If I am calling same function onClick of some element, its giving same error.

Collectives™ on Stack Overflow

Call ExtJS function outside of scope in Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related