페이지를 동적으로 로딩하고 실행하는 예제에 대한 자세한 설명

ExtJS 4.1 TabPanel은 동적으로 페이지를 로드하고 스크립트를 실행합니다. 이 글을 작성하는 데 며칠이 걸렸지만, 끝내고 나면 완전한 성취감을 갖게 될 것입니다. 매우 기대됩니다. 코드를 작성하는 전체 과정입니다.

공식 예시에 따르면 페이지는 동적으로 로딩이 가능하지만 스크립트가 실행되지 않아서 SDK와 구글을 확인해본 결과 스크립트를 true로 설정해야 한다고 해서 이 속성을 전체 코드로 설정했습니다.

tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
});

처음에는 페이지를 로드하는 스크립트가 이렇게 작성된 줄 알았습니다. 많은 정보를 확인해보니 6c04bd5ca3fcae76e30b72ad730ca86d에 써야 한다는 분도 계시고, 그냥 써야 한다는 분도 계셨습니다. 페이지에 있고 js 파일은 src로 참조할 수 없지만 아무리 시도해도 작동하지 않았습니다. 페이지가 로드될 때 팝업 창이 나타나는 한 내 로딩 페이지는 매우 간단합니다

<script type="text/javascript">
alert("addd");
</script>
后来想，是不是需要在tab被激活的事件手工load，而不是autoLoad，于是再次实验，终于成功了，兴奋！
tabPanel.add({
title: &#39;dynamic page&#39;,
closable: true,
loader: { &#39;test.htm&#39;, loadMask: &#39;loading...&#39;, autoLoad: true, scripts: true }
 listeners: { activate: function(tab){ tab.loader.load(); } }
});

원래는 이걸로 끝일 줄 알았는데, 드디어 하루 만에 탭을 끝낼 수 있을 것 같았는데, 신이 나서 탭을 클릭할 때마다 이 접근 방식에 문제가 있다는 걸 발견했습니다. 활성화 이벤트가 트리거되어 이를 읽습니다. 배경 페이지가 한 번 로드되고, 전경이 한 번 로드된 후 탭을 전환할 때 배경에 다시 액세스할 필요가 없다는 것이 원하는 효과입니다. 그래서 SDK와 구글을 확인해보고 활성화 이벤트에 탭이 로드되었는지 판단하려고 했으나 실패했고 다음날 리스너를 제거한 후 로딩 페이지의 로딩 효과를 테스트해보고 싶었습니다. 이유는 의도적으로 페이지 스레드를 차단하고 다음 코드를 추가했기 때문입니다

System.Threading.Thread.Sleep(5000);

이번에는 의도치 않은 일이었는데 5초 후에 로드된 페이지가 실제로 스크립트를 정상적으로 실행할 수 있음을 발견했습니다. !

내 단계는 다음과 같습니다. 로드 버튼을 클릭한 다음 동적으로 로드된 탭을 클릭합니다. 5초 후에는 콘텐츠가 나타나고 스크립트가 실행됩니다.

그러나 로드된 페이지가 항상 잠들 수는 없습니다. 그래서 계속해서 정보를 확인하고 extjs의 소스 코드를 디버깅하기 시작했습니다. 디버깅 방법은 다음과 같습니다. 디버깅 방법은 설명하지 않겠습니다. 많은 Google을 검색해 하루 동안 디버깅했지만 아무 소용이 없었습니다. 그런데 extjs 코드와의 밀착은 이번이 처음이군요

그리고 디버깅 중에 Sleep(5000)을 추가해도 로드된 페이지 스크립트가 실행되지 않아서 점점 더 당황스럽네요

셋째날에는 미친듯이 QQ그룹에 가입해서 각종 포럼과 웹사이트에 글을 올리고 계속 구글링을 해봤지만 소용이 없었습니다

넷째날에는 운이 좋게 Microsoft Bing을 사용하여 autoload:true를 검색했는데, scripts:true 첫 번째 기사가 나오고 그런 소개가 있는데 extjs에 관한 것입니다. 4.0 패널은 어떻게 페이지를 로딩하고 스크립트를 실행하는지, 그 코드에 맞춰 테스트해봤습니다

<script type="text/javascript"
src="/Scripts/ext/ext-all.js?1.1.11"></script>改为
<script type="text/javascript"
src="/Scripts/ext/ext-debug.js?1.1.11"></script>

코드는 성공적으로 실행될 수 있습니다! 탭이 모든 구성 요소를 로드할 수 있고 물론 패널도 로드할 수 있기 때문에 완전히 흥분되었습니다. 그래서 코드를

Ext.onReady(function () {
  var panel = Ext.create('Ext.Panel', {
  title: 'Anchor
Layout',  
  renderTo:Ext.getBody(),  
  loader:{ url: "test.htm",autoLoad:true,
scripts:true}//加载1.htm页面
  });
  });

수정했고 성공했습니다! 정말 뿌듯하네요. 4일만에 드디어 좋은 결과가 나왔습니다. 이런 기쁨은 우리 기술진만이 알 수 있습니다

코드 차이를 비교해보니 그런 구성이 빠진 것을 발견해서 표시해 두었습니다. 위에서 노란색으로 표시된 renderTo:Ext.getBody()는 예기치 않게 스크립트가 정상적으로 표시되기 전에 렌더링되어야 합니다. 왜 SDK에 없나요? !

하지만...이것은 완벽한 해결책이 아닙니다. 조심스러운 친구들은 스크립트가 메인 페이지에 먼저 로딩 페이지를 로드한 다음 탭을 전환한 후에 사라질 것이라는 것을 알게 될 것입니다. 시간을 찾지 못했습니다.

키보드 입력을 멈추고 신중하게 생각해야 했습니다. 페이지를 성공적으로 로드하고 스크립트를 3번 실행했습니다.

1. 잠든 후 탭을 클릭하여 기다립니다. Loaded

3. Add renderTo 구성

오랜 시간을 고민한 끝에 마침내 이 세 번의 성공에는 공통점이 있다는 것을 알게 되었습니다. 즉, 탭이 로드되면 표시됩니다. 먼저 페이지를 본 다음 다시 "표시"되면 스크립트가 실행되지 않습니다

제 아이디어를 확인하기 위해 즉시 테스트를 시작하고 절전 모드를 100밀리초로 설정하고 로드 버튼을 클릭한 다음 1초 후에 탭이 로드되었습니다. 물론 스크립트가 구현되지 않았습니다! ! !

드디어 이유를 찾았습니다:

탭을 먼저 표시한 다음 로드

하면 쉽습니다. SDK를 즉시 확인하고 표시 방법을 찾는 것도 어렵지 않으므로 코드를 수정합니다

var panel = Ext.create('Ext.Panel',{
title: 'dynamic page',
renderTo:Ext.getBody(),
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true,
scripts: true }
});
tabPanel.add(panel);

OK, 스크립트가 정상적으로 실행됩니다. 이것이 내 문제에 대한 "완벽한" 솔루션입니다

위 내용은 페이지를 동적으로 로딩하고 실행하는 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!