Hi All,

I am new to Liferay and I am facing an issue. I have searched for it but could not get a definitive answer. I have deployed two MVC portlets in extjs 4. When I "add" the first portlet, it is rendered properly. However, when I am adding the second one, it does not render properly. After removing the first portlet and refreshing the page, the second portlet displays properly. Could anyone suggest as to what might be the cause or point me to the right direction?

Thanks,
Rye

I'm guessing that you did not properly namespace your element ids, and therefore the JS is just updating the first match it finds...

Hi David,

Thanks for the possible solution. I have 2 "div" IDs for one portlet and none for the other. I tried using different namespaces, that is, giving different id names to the "div" tags. However, the same problem persists. Did you mean something else when you mentioned to "properly namespace" the element IDs?

Thanks,
Rye

In a standard web page, you would do something like .

This cannot be dropped into a portal because when the portal aggregates the page you may end up w/ multiple input fields all sharing the 'username' id.

Instead you must namespace all ids so that they are unique on the portal page.

Depending upon the framework you're using, there are different ways to ensure the ids for the portlet are unique.

If your javascript is looking for generic ids, such as 'username', it must be aware that the actual ID rendered on the page may be namespaced. So your 'username' guy, when namespaced, would be something like 'my-portlet-war:blah:username' (depending upon the framework you're using), and your javascript must know how to find the properly namespaced id rather than just 'username'.

Thanks a lot for the suggestions. To resolve the portlet namespace collision, I have defined it as <portlet:namespace /> instead of <portlet:defineObjects />. I have also included <portlet:namespace /> with every HTML element ids, etc. However, when I add <portlet:namespace /> to an extjs function, it gives syntax error.

I have a separate view.jsp file and a main.js file. So all my extjs functions are in the .js file. I am not able to include <portlet:namespace /> to the functions. What is the right way to implement it without causing namespace collision. Unfortunately, I need to have a separate .js file and also avoid the namespace collision. I am using MVC portlets.

I have done some research but did not get any concrete results. Can you please point me to the right direction?

Thanks,
Rye