Here is a lesson for not reading document thoroughly. My very first ExtJS project goes smoothly until one day I created multiple tabs, and then closed some of them. All of sudden the layout completely messed up. In the debug console, there is null reference error. Call stack is deep in the ExtJS library.
Fast forward, after several hours of digging around, I found out I was using "id" config for several ExtJS controls. Then, close tab action will cause all the controls on the other tabs with the same "id" got deleted from DOM.
Solution:
Use "itemId" instead of "id" config for controls.
Comparison to ASP.NET
Came from ASP.NET world, I guess that is why I was using "id" config without any second thought. Below is a comparison of similar concepts in ASP.NET
| ExtJS | ASP.NET | _ |
|---|---|---|
| itemId | ID | (Recommended) HTML element's ID is automatically generated to ensure uniqueness, usually by concatenating ID of the container hierarchy. Programmer only need to ensure ID is unique within it's container. |
| id | ClientID | (Not recommended) Rendered HTML element will use this property as their ID. It's programmer's responsibility to ensure it is unique across the whole page (think when you starting to have multiple instances of the same control on a page). |
(To check out more ExtJS related posts from me, click here: http://developertips.blogspot.com/search/label/ExtJS)
No comments:
Post a Comment