자바 스크립트의 범위를 벗어난 ExtJS 함수 호출

Question

ExtJS를 처음 사용합니다. 응용 프로그램에서 탭 기능을 사용하고 사용자 정의하려고합니다.

매개 변수가 이고 JavaScript는 Javascript Scope의 ExtJs 범위에 있습니다. 지금은 오류없이 매개 변수를 전달하지 않고 함수를 호출 할 수 있습니다. 코드에서 언급 한 매개 변수를 전달하여 동일한 함수를 호출 할 때 함수에서 값을 가져 오지 못하므로 다음 오류가 발생합니다.

Uncaught TypeError: Cannot call method 'indexOf' of null 

이 기능은 tabpanel에 새 탭을 추가해야합니다.

ExtJS 범위에서 매개 변수를 전달하여 동일한 함수를 호출하면 탭이 성공적으로 추가됩니다. 그러나 함수가 자바 스크립트 범위에서 매개 변수를 전달하여 호출 될 때가 아닙니다. 이 문제를 이해하고 해결하도록 도와주세요.

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 함수는 이벤트 기반이며 xClick에 onClick이라는 요소가 호출됩니다.

Answer 1

addTab_inside(true, 'Test', 'test.php');은 Ext.onReady보다 먼저 실행됩니다. 그래서, 당신의 기능은 아직 존재하지 않을 것입니다. addTab_inside를 Ext.onReady 메소드의 맨 아래로 이동하십시오.

업데이트

@dbrin 여기에서 범위 지정 문제를 설명하는 훌륭한 일을했다. 접근 방식을 실제로 원한다면 아래에 나와있는 것처럼 "네임 스페이스"를 설정해야합니다.

//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'); 
} 

내가 전에 언급 한 바와 같이, 당신은 여전히 ​​내선이 준비되기 전에 addTab_inside를 호출하지 않는 확인해야합니다.

모든 말씀 드린 바와 같이, @dbrin이 언급 한대로 suggested MVC architecture에있는 자습서를 읽어 보시기 바랍니다.

Answer 2

Ext 범위와 같은 것은 없습니다. Ext는 JS 객체와 함수의 집합입니다. JS에 적용 가능한 모든 것이 Ext에 적용됩니다. 범위 지정 문제 및 복잡성은 JavaScript의 순전히 것이며 다른 JS 라이브러리 또는 유틸리티보다 Ext의 경우와 다르지 않습니다.

1. 당신은 Ext.onReady라는() 함수를 몇 가지 매개 변수 :

   지금, 당신은 무엇을했는지 살펴 보도록 할 수 있습니다.

2. 전역 범위 (일명 창 범위)에서 addTab_Outside() 함수를 정의했습니다.

그게 전부입니다.

이제 addTab_Outside 함수를 살펴 보겠습니다. 이 함수에서는 다른 함수 addTab_inside를 호출합니다. 그러나이 '내부'기능은 어디에 있습니까? JS가이 기능을 어디에서 찾아야합니까? 전역 범위에서 '유익한'함수를 정의하고 있기 때문에 JS는 동일한 범위에서 내부 함수를 찾고 전역 범위에서 생성되지 않았으므로 찾을 수 없습니다.

따라서 '내부'함수가 생성되는 범위는 무엇입니까? 글쎄, 여기서 한 첫 번째 작업으로 돌아가 보자 : Ext.onReady() 함수 호출. 이 함수를 단일 매개 변수로 전달했습니다.이 매개 변수는 익명의 함수로 2 개의 로컬 변수 currentItem과 tabs이 있습니다. 또한 'addTab_inside'라는 로컬 함수를 만들었습니다. 내가 '지역'이라고 말하면, 변수가 작성된 범위의 함수에 대해 변수가 로컬이라는 의미입니다. 귀하의 경우 부모 기능은 익명으로 처리 할 수 ​​없습니다. 해당 기능을 사용하는 모든 로컬 변수는 모두 동일한 범위에 있으므로 물론 서로 액세스 할 수 있습니다. 따라서 '탭'이 '내부'기능 또는 currentItem을 참조하는 것이 좋습니다.

솔루션을 작동시키는 유일한 방법은 큰 익명의 함수 블록 내부에서 외부 함수를 이동하는 것입니다. 그러나 나는 정말로 그 이유가 없기 때문에 그렇게하기를 원하지 않는다고 생각합니다.

범위에 대한이 토론이 이해하는 것이 중요하지만, 내 의도는 당신이 무엇을하려고하든 다른 접근법을 따라야한다는 것입니다. 전체 애플리케이션을 구현하는 경우 컨트롤러 및 폴더 구조를 사용하여 Sencha 가이드에 설명 된 애플리케이션 구조를 사용하여 코드를 분리하는 것이 좋습니다.