Home > Developer > Web Develop
The current development approach is to use the remote load page to achieve multi-page effects, similar to the 126 Mailbox Multi-tab effect. But it's better than 126 mailboxes because the page is load-local and 126 seems to be requesting it again. In the recent project this development method has been basically mature, has accumulated some experience, share and discuss with you developers.
The page layout for this mode is: One bodylayout, the left navigation tree, and the information box below. Upper for enterprise or system logo. Center for a Tabpanel,tabpanel remote loading page (do not know the Ajax remote loading, please check the Ext API Panel's AutoLoad method).
Since this approach has been very different from the traditional Opoa (one page, application) in page processing, there are some issues related to it that need to be addressed, the following are the problem scenarios and my solution:
1. How do I close a child page by code that determines the Shutdown event?
Problem Scenario:
There are too many scenarios to handle the problem, such as cascading relationships between several groups of pages, closing a page, and closing several other pages. For example, a page opens a cascading report of one level.
Problem handling:
The key to dealing with this type of problem is to find the Ext.panel that the X button in the tab closes. The event can be obtained as follows:
Finding the panel through the DOM tree location is the safest way to do so without knowing any of the panel's parameters, you need to define an HTML element in the body of the page you are loading remotely, for example:
<body>
<div id= "Myrenderdiv" ></div>
</body>
Since the page is usually required to render an object element into the Ext component. Then the element is the best place to look, and then look for a higher-level panel to look for in this way (jquery, you can also search the DOM by ext Way):
EXT.GETCMP ($ (' #myrenderDiv '). Parents ('. X-panel ') [0].id]
Find the element, the rest of the problem is very good, listen to its Destory method to complete the Shutdown event processing
EXT.GETCMP ($ (' #myrenderDiv '). Parents ('. X-panel ') [0].id]. On (' Destroy ', function () {
Alert (' Close Myrenderdiv panel);
})
2. How do I make a child page element adapt to the size of the TabPanel?
Problem Scenario:
The left side of the main page is the navigation bar, in Bodylayout mode, then left folded. The center region where the TabPanel is located is getting bigger. You need an adaptive extension tab element, such as the table width, to reach the center region for the best visual and operational results.
Problem handling:
The key to this approach is to listen for the resize time of the external element, as in the scenario of problem 1. Find the easy panel of the superior, then you can have a place to get the width of the height to adjust the width and position of the element to adapt to:
EXT.GETCMP ($ (' #myrenderDiv '). Parents ('. X-panel ') [0].id]. On (
' Resize ',
function (Refobj, adjwidth, Adjheight, Rawwidth, rawheight) {
EXT.GETCMP (' Myrenderpanel '). SetHeight (Rawheight);
EXT.GETCMP (' Myrenderpanel '). SetWidth (Rawwidth);
}
);
How does the time timer for 3.Tab pages work?
Problem Scenario:
A certain page set the timer, after closing the JS error, found that the delay timer calls the page element does not exist cause.
Problem handling:
Since the timer is only related to the calling page, the timer should be destroyed when the calling page is closed, see question 1, and listen to the following implementation:
var Winsynctimer = Window.setinterval ("Mypage.syncfunction ()", 30000); Every SEC to synchronize
EXT.GETCMP ($ (' #myrenderDiv '). Parents ('. X-panel ') [0].id]. On (' Destroy ', function () {
Window.clearinterval (Winsynctimer);
})
SetTimeout is also similar to this way of handling
4.AJAX How does asynchronous invocation guarantee security callbacks?
Problem Scenario:
When a time-consuming Ajax call is made, the tab page is closed. But then the Ajax callback was executed, because the page element no longer exists, there is a JS error.
5. Switch several pages in this way to find that memory consumption is very high, it seems to have a serious memory leak, what is the cause of the problem?
Problem Scenario:
Currently in large-scale use TabPanel remote loading mode processing. When there are more than 10 different pages being loaded and released. Even if TabPanel only leaves one tab page, the memory is still high.
6. How to manage the DOM ID and JS name of each page reasonably?
Problem Scenario:
Chaos has been confusing. Originally project members separate pages are good, loaded into the label to TabPanel work is not normal, how should ensure that the minimum coupling between the pages does not conflict?
........................ (not completed)
Ext2.0 tabpanel Ajax Remote loading Multi-tabbed page pattern development tips
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
