Friday, January 23, 2009

How to add EXT And EXT.ND to an XPAGE

I like to build forms and layouts in xpages, i like picklist and advanced funtionality of extnd, here is a screen shot of a ext.nd picklist on an xpage, the best of both worlds? I am testing to see how well i can use these togeather.

To get the ext libraries and other goodies on the xpage a create a custom control with a computed field with the type set to html.


Put in the html to load ext and extnd as a computed value like


Then create another custom control the exact same way and put your picklist code in it.

Put these at the top of the xpage as controls.

Create a button on the page and make the name( id) What you need it to be in your extnd code. like "show-dialog-btn1", but realize in the dom it will show like "view:_id1:tabPanel2:show-dialog-btn1" so in extnd code put it in like this

// for button 1, this is an example of how to attach to click event through Javasciprt
showBtn = Ext.get('view:_id1:tabPanel2:show-dialog-btn1');
showBtn.on('click', this.showPL, this);


Using firebug in firefox makes it simple to find what these items are called, so then you can set your fields values based on what you return from the picklist.

Any ideas on how to do this better? I just started trying to use xpages yesterday, so there may be better ways of doing some of this stuff.

2 comments:

Erik Brooks said...

For your click-through event, check out the getClientId() function. The xPage renderer will translate your designed-element id into the how-it-happens-to-be-rendered xPage crazy id.

Philippe Riand said...

Or, even easier, use #{id:[your id]}
Anything that is in #{...} will be evaluated by the runtime and replaced by its result, before going to the client. The "id:" tells the runtime to generate the actual client id of the component. That take care of the context, like repeated controls.
In short:
showBtn = Ext.get('#{id:show-dialog-btn1}');
should do the trick

Post a Comment