By applebomb [csdn] ver: 09-04-18
The current development method is to use Remote Load pages to achieve multi-page effects, similar to the 126 mailbox multi-tab effect. But it is better than 126 mailbox, because the page is loaded to the local, 126 seems to be re-requested. In the near future, this development method has basically matured and accumulated some experience to share and discuss with developers.
In this way, the page layout is: A bodylayout, navigation tree on the left, and information box on the bottom. The upper part is the enterprise or System logo. The Center is a tabpanel, And the tabpanel remotely loads pages (for details about Ajax remote loading, refer to the autoload method of panel in ext API ).
This method is already very different from the traditional opoa (one page, one application) in page processing, resulting in some problems related to it that need to be solved, the following are problem scenarios and solutions:
1. How can I disable the event with the subpage code when closing the subpage?
Problem scenario:
There are too many scenarios to deal with this problem. For example, several groups of pages form cascade logical relationships, closing one page, and other pages also need to be closed. For example, a page opens a level-1 cascade report.
Troubleshooting:
The key to solving such problems is to find the Ext. Panel closed by the X button on the tab. The event can be obtained in this way:
This is the safest way to find the Panel by using the DOM tree position. You do not need to know any parameters of the Panel, you need to define an HTML element in the lower-level of the page body that you remotely load, for example:
<Body>
<Div id = "myrenderdiv"> </div>
</Body>
Because pages usually need to render an object element into an ext component. This element is the best position to search for. Next, you can search for the upper-level Panel in jquery mode (You can also search the DOM in ext mode ):
Ext. getcmp ($ ('# myrenderdiv'). Parents ('. X-panel') [0]. ID)
When the elements are found, the remaining problems are easily solved. Listening to the destory method completes the process of closing the event.
Ext. getcmp ($ ('# myrenderdiv'). Parents ('. X-panel') [0]. ID). On ('deststroy', function (){
Alert ('close myrenderdiv panel );
})
2. How can we make child page elements adapt to the size of tabpanel?
Problem scenario:
The left side of the home page is the navigation bar, which adopts the bodylayout method. After the left side is folded. The center region of tabpanel becomes larger. You need to expand the elements in the tab, such as the table width to meet the requirement of center region for optimal visual and operational effects.
Troubleshooting:
The key to this method is to listen for the resize time of the external element, as in the solution of Issue 1. After finding the panel of the upper level, you can obtain the width and height to adjust the width and height of the element to be adapted:
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 );
}
);
3. How to Deal with the time timer of the tab page?
Problem scenario:
When a page is set with a timer, a JS error occurs after it is disabled. It is found that the elements of the delayed Timer call page do not exist.
Troubleshooting:
Since the timer is only related to the call page, the timer should be destroyed when the call page is closed. See Question 1. The Listener is implemented as follows:
VaR winsynctimer = Window. setinterval ("mypage. syncfunction ()", 30000); // every 30 sec to synchronize
Ext. getcmp ($ ('# myrenderdiv'). Parents ('. X-panel') [0]. ID). On ('deststroy', function (){
Window. clearinterval (winsynctimer );
})
SetTimeout is also handled in this way
4. How can I ensure secure callback for Ajax asynchronous calls?
Problem scenario:
When a time-consuming Ajax call is completed, the tab page is closed. But then the Ajax callback is executed. The JS error occurs because the page element does not exist.
5. After switching several pages using this method, we find that the memory usage is very high. It seems that your memory leakage is serious. What is the cause of the problem?
Problem scenario:
Currently, the tabpanel remote loading method is used for large-scale processing. When more than 10 different pages are loaded and released. Even if only one tab page is left on the tabpanel, the memory usage is high.
6. How to manage the dom id and JS names of each page reasonably?
Problem scenario:
Chaos. Originally, the project members had a good page. loading the tab to tabpanel would not work normally. How can we ensure that the Minimum Coupling between pages does not conflict?
........................ (Not complete)
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
