We’re all eagerly anticipating the release of APEX 4.0, and we can’t wait to see the plugin functionality Patrick Wolf is building into the product. We’ve seen a few people looking to host a plugin registry and we thought we’d throw our hat into the ring and let the community decide which will be the best one to use. We’ve decided to build a plugin registry using our APExt JS Framework as it seems like the perfect choice as we’ll be creating Ext plugins post release of APEX 4.0 (we’re looking to submit the plugin registry for the APEX developer competition, but chances are it will get disqualified as it’s a little grey around third party licensing)

Today’s post focuses on an issue we found with the row expander grid plugin. Some background first: we are building a simple report which will break the plugins into categories using Ext grouping and will provide row expanding functionality for the plugin comments. (See the following image for a basic example).

We disabled the column headings in the Grid to make it look more like what you see on the Ext 3.0 samples page setting the “hideHeaders” attribute to true. In the example we actually have two columns, 1 for the plugin image and the other for the plugin details. In order to obtain the formatting for the plugin details we needed to embed some HTML into our SQL query. e.g.

select * from (
SELECT 'Some information to come soon!' comments
,      pc.name category
,      p.name  plugin_name
,      '<img src="&EXT_BASE_DIR./../../../apr/img/'||p.image||'" width="100" />' image
,      '<table cellpadding="0" cellspacing="0" summary=""><tr ><td style="padding-bottom:10px;"><span style="font-size:16px;font-weight:bold;">'||p.name||'</span></td></tr></table>'||
       '<table cellpadding="0" cellspacing="0" summary=""><tr ><td style="width:85px;">'||
       '<b>Description </b></td><td style="width:8px;"><b>:</b></td><td>'||substr(p.description,1,100)||
       '</td></tr><tr><td><b>Version </b></td><td><b>:</b></td><td>'||p.version||
       '</td></tr><tr><td><b>'||'Author </b></td><td><b>:</b></td><td>'||u.known_as||
       '</td></tr><tr><td><b>APEX Version </b></td><td><b>:</b></td><td>'||p.required_version||
       '</td></tr><tr><td><b>'||'Downloads </b></td><td><b>:</b></td><td>'||nvl(downloads_total,0)||
       '</td></tr><tr><td><b>'||'Rating </b></td><td><b>:</b></td><td>'||
       jquery_widgets.get_stars('f'||lpad(to_char(rownum),2,'0'),round(p.average_rating))||'</td></tr></table>' details
FROM   apr_plugins           p
,      apr_plugin_categories pc
,      apr_users             u
WHERE  p.category_id = pc.category_id
AND    p.author_id   = u.user_id)
where (
 instr(upper("CATEGORY"),upper(nvl(:P4_CATEGORY,"CATEGORY"))) > 0  and (
 instr(upper("PLUGIN_NAME"),upper(nvl(:P4_REPORT_SEARCH,"PLUGIN_NAME"))) > 0  or
 instr(upper("DETAILS"),upper(nvl(:P4_REPORT_SEARCH,"DETAILS"))) > 0
))

It gave us the look we were wanting to achieve, however the side affect was that it broke the row expander plugin because we were embedding a HTML table in one of the row columns, i.e. the detail column.. The problem was due to the following call on line 116 of the rowexpander.js plugin

var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);

Basically body was “undefined” and we received a js error. The fix, after a little tedious debugging, was to change the CSS selector to the following:

var body = Ext.DomQuery.selectNode('tr:nth-child(2) div.x-grid3-row-body', row);

Essentially we just made sure that the CS selector looked at the direct children of the parent root node.

Note: you’ll also see that we’re using the jQuery star rating plugin that Roel Hartman blogged about, it’s a nice little plugin…. it shows that you can mix and match functionality from multiple javascript frameworks.