Detailed explanation of examples of dynamically loading pages and executing them

ExtJS 4.1 TabPanel dynamically loads the page and executes the script. It took me several days to write this thing, but after finishing it, I will have a full sense of accomplishment. I finally succeeded. I am very excited. I will tell you about it below. Introducing my entire process of writing code.

According to the official example, the page can be loaded dynamically, but the script is not executed, so I checked the SDK and Google and found that scripts needs to be set to true, so I set this attribute. The entire code is as follows

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

Just started I thought there was something wrong with the script for loading the page, because after checking a lot of information, some people said it should be written in the 6c04bd5ca3fcae76e30b72ad730ca86d, while others said it could only be written on the page and could not use src to reference the js file, but no matter how hard I tried, it didn't work. My loading page is very simple. As long as the page is loaded, a pop-up window will pop up.

后来想，是不是需要在tab被激活的事件手工load，而不是autoLoad，于是再次实验，终于成功了，兴奋！
tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
 listeners: { activate: function(tab){ tab.loader.load(); } }
});

I originally thought that this would be the end of it, and I would finally finish this tab in one day, but when I was excited, I discovered that there was a problem with this approach. Every time Every time a tab is clicked, an activation event will be triggered to read the background page once. The effect I want is that after the frontend is loaded once, switching tabs does not require access to the background again. So I checked the SDK and Google, and wanted to judge that the tab has been loaded in the activate event, but failed

The next day, I removed the listeners, and then inexplicably wanted to test the loading effect of the loaded page, deliberately blocking the page thread, and adding The following code

System.Threading.Thread.Sleep(5000);

This time it was unintentional. I found that the page loaded after 5 seconds could actually execute the script normally!

My steps are as follows: click the load button, and then click the dynamically loaded tab. The tab has no content. After 5 seconds, the content appears and the script is executed.

But the page is loaded I can't always sleep, so I continue to check the information and continue to try, and even start to debug the source code of extjs. Here is how to debug, and the page switches to the following script

改为

I won’t explain how to debug, there are many googles, I spent a day debugging, to no avail. However, this is my first close contact with the extjs code

and I also discovered a strange thing. During debugging, even if Sleep(5000) is added, the loaded page script cannot be executed. , I became more and more puzzled

On the third day, I joined QQ groups like crazy, posted on various forums and websites, and continued to google, but to no avail

On the fourth day, I was lucky enough to use Microsoft Bing to search autoload:true, scripts:true, the first article comes out, there is such an introduction, but it is about extjs How does the 4.0 panel load the page and execute the script, so I tested it according to its code

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页面
  });
  });

The code can be executed successfully! I was completely excited now, because the tab can load any component, and of course it can also load the panel, so I modified my code

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);

successfully! I'm really ecstatic. After spending 4 days, I finally got a good result. This kind of joy can only be understood by our technical staff.

Comparing the code differences, I found that there is one missing configuration, which is the yellow color above me. The marked one, renderTo:Ext.getBody(), actually needs to be rendered before the script can be displayed normally. Why is there no SDK! !

But, but...this is not a perfect solution. Careful friends will know that the script will load the loading page first to the main page, and it will disappear after switching tabs. Such a serious problem, Because I was so excited at the time, I didn’t notice it, alas.

I had to stop typing on the keyboard and think about it carefully. I successfully loaded the page and executed the script three times. These three times were

1 and the tab was activated

2. After sleeping, click tab and wait for the page to load

3. Add renderTo configuration

After thinking for a long time, I finally found that these three successes all had one thing in common. , the loaded page is displayed, that is to say, if the tab loads the page first and then is "seen", the script will not be executed.

In order to verify my idea, I immediately started testing and put Set sleep to 100 milliseconds, click the load button, and then look at the loaded tab after 1 second. Sure enough, the script is not executed! ! !

Finally found the reason: tab must be "shown" first, and then load, then this is easy, check the SDK immediately, it is not difficult to find the show method, so modify the code

tabs.add({
title: 'dynamic page',
//renderTo: Ext.getBody(),
loader: {
url: 'test.htm',
loadMask: 'loading...',
autoLoad: true,
scripts: true
}
}).show();

OK, the script executes normally, and my problem is "perfectly" solved

The above is the detailed content of Detailed explanation of examples of dynamically loading pages and executing them. For more information, please follow other related articles on the PHP Chinese website!