20

APEX Plugin – Ext.tree.TreePanel (RC1 Release)

I’m very proud to announce the first public release of a new commercial APEX plugin based on the tree widget from the Ext JS library developed by Sencha. It’s jam-packed full of functionality and customisation ability. It’s simple to use with predefined defaults “Out of the Box”, but also allows you to use every config parameter, method, and event documented in the Ext JS API.

APEX Plugin - Ext.tree.TreePanel

APEX Plugin - Ext.tree.TreePanel

Here’s a list of the plugin’s features:

  • AJAX enabled with the choice of loading the entire tree in one call or on node by node or X many levels expanding ability
  • Search: Dynamic filtering of the tree contents
  • Customisable Expand & Collapse & Refresh buttons
  • Tree drill down capability
  • Drag & Drop Reordering Support
  • Tree Label Editing
  • Checkbox Nodes with state saving using an existing APEX item
  • Context Menu with complex object Support (from a single SQL Query)
  • Cookie based state saving for expanded nodes.
  • Order by “Display Sequence” support
  • Fully integrated into dynamic actions. Bind click, drag & drop, edit complete, expand, collapse, context menu selection etc. events
  • In it’s basic form opens URL targets
  • Tree config is fully customizable with application level defaults
  • Support for node by node custom config, e.g. enableDrag = false
  • Full support for replacing substitution strings in both config & data
  • Custom icon support
  • Help Text/Quick Tip support
  • Supports unlimited tree’s on a single page
  • Theme changing support

and here’s where you can find the documentation, demo’s, and download.

I’m hoping to get some feedback and enhancement requests over the next few weeks before releasing the final production version towards the end of May. One point to note: it does require the purchase of a plugin license and that you also hold/purchase a license from Sencha to use the Ext JS library; but before this changes your mind you may want to consider the following:

  • It’s simple to use. All you need to define is a simple flat SQL query, no CONNECT BY needed.
  • It will save you time every single time. You can create an AJAX enabled tree with context menu support in a couple of minutes. It’s arguably the fastest way to create a complex Ext JS tree end to end, thanks to the RAD architecture of APEX.
  • With AJAX node by node expanding capability you can create a tree based on large datasets, it’s been tested on 20,000+ record hierarchical tree’s.
  • It provides feature rich options not available in the standard APEX jsTree. Such as checkboxes, label editing, drag & drop reordering, AJAX fetching by X many levels, searching, the list goes on… all within the one plugin.
  • It’s integrated into Dynamic Actions, which means it’s easy to bind events and actions within the actual APEX framework/IDE. Refreshing standard APEX reports via AJAX on different tree events is simple.
  • It’s fully supported, will stay actively developed, and you can file enhancement requests.
  • Once you choose Ext JS you’re opening up endless of possibilities for developing feature rich applications, whilst safely knowing you can still use standard APEX components and jQuery. It’s the best of both worlds!
  • Ext JS provides cross browser support, it’s built on Web Standards, which translates into reduced maintenance & troubleshooting.
  • This is the first of many plugins in the pipeline. The license revenue will fund future plugin development, so your support is essential. I’m passionate about bringing as much Ext functionality to APEX as possible in a future proof, maintainable approach so “we all” can build amazing web applications, amazingly fast.

Test it out, I’m positive you won’t be disappointed….. and if you are let me know, I want your feedback :) good or bad.

  1. Johannes de Jong says:

    Fantastic looking plugin Matt.

    You sure are setting a standard here for professional plug-ins.

    I’ve never considered Ext JS as an option but I will definitely have a serious look at it after seeing you demo’s

    Johannes

    • mnolan says:

      Thanks Johannes

      I hope that means that you’re signing up to test the plugin and provide some valuable feedback :)

      Ext JS is definitely the gold standard UI development library. You won’t look back once you adopt it. The only hard part is integrating it with APEX but as you see by the results it’s well worth it. Thankfully the new 4.0 plugin design makes the integration much more portable and maintainable than previous versions

      Cheers
      Matt

  2. itobinh says:

    Definitely recomend this plugins if you need top features of tree view.

    Looks like we will move slightly to ExtJS. I am wondering why APEX choosen Jquery over ExtJS.

    • mnolan says:

      Hi Tobin

      Thanks for recommendation :)

      I’m going to stay out of the debate on jQuery/Ext JS, as I have too much bias. That said they both have their good points and we can leverage the best of both, so hopefully in the future after some more plugins are developed we will see some wonderful hybrid APEX applications.

      Cheers
      Matt

  3. Johannes de Jong says:

    Matt,

    I assume that by downloading it; means I’ve automatically signed up as tester :)

    Johannes

    • mnolan says:

      Johannes, there’s a good reward per bug found, do you take payment in whisky or cold hard currency ;)

      • Johannes de Jong says:

        No need to pay Matt. It will my pleasure to play around with it. I will take a dram for every bug I find though. So I hope you didn’t test to well ;)

  4. Buzz Killington says:

    @itobinh – I assume it is because jquery is free whereas extJS is not. Since Apex is really a free product (aside from the database license), I think it would be tougher to wrap that in there. I guess they licensed certain charts from AnyChart, so maybe I’m just theorizing.

    But Sencha aint giving it away for free – so I think I’d be hard-pressed if I were Oracle to up the license fee of the database purely to compensate for the licensing cost of ExtJS (since Apex is free).

  5. Márcio Gonçalez says:

    Hi, while trying to run the plugin is given the following error:

    ORA-19202: Error occurred in XML processing ORA-00917: missing comma
    Error Error in PLSQL code raised during plug-in processing.

    I’m using the version of Application Express 4.0.2.00.07.

    What should I do to correct?

    Tanks

    Márcio Gonçalez

    • mnolan says:

      Hi Marcio

      I’ll update the error handling to provide something more meaningful. Thats an issue within the context menu SQL. There is either a problem with the CUSTOM column, which needs to be valid JSON notation and comma separated as per the examples or you are using a pramater/value setting and there is a problem within your data.

      To start with could you email me your context menu SQL query – matt.nolan@theapexfreelancer.com

      Cheers
      Matt

  6. Márcio Gonçalez says:

    Hi,

    The plugin is working perfectly in Chrome and Firefox, but IE 9 the following error occurs:

    SCRIPT5007: Can not get value for property ‘selNodes’: the object is null or not set
    apex_dynamic_actions_4_0.js, Line 2680 Character 1

    SCRIPT600: invalid target element for this operation.
    ext-all.js, line 7 Character 5857

    It will be a problem in my browser?

  7. Veta says:

    Why In your Demo1 after press refresh tree when item extTreeFilterTree1 is not null, FilterTree no longer works?

  8. Jas says:

    Hi Matt,

    What changes I need to do , to target the result of the tree node to a frame in the window ?

    Cheers,
    Jas

    • mnolan says:

      Hi Jas

      Have a look at demo 4: http://www.theapexfreelancer.com/apex/f?p=APEXFREELANCER:EXTJS_TREE_DEMO4

      basically you need to create an iframe on the page with a name of say “iframe1″ and then include the following ‘”hrefTarget”:”iframe1″‘ in your SQL query for the custom column e.g.

      SELECT list_entry_id id
      , list_entry_parent_id pid
      , entry_text text
      , entry_target url
      , display_sequence display_seq
      , entry_attribute_02 css_class
      , entry_attribute_01 info
      , ‘”hrefTarget”:”iframe1″‘ custom
      FROM apex_application_list_entries
      WHERE application_id = :APP_ID
      AND list_name IN (‘Ext Tree Demo 4′)

      Hope that helps.

      Matt

  9. Jas says:

    Cheers Matt,

    It worked like a charm :)

  10. Julien says:

    Hi Matt,

    Thank you for this cool plugin. Ext JS is an amazing library.

    Is there a way to share the state between two TreePanel plugins (or more) which belong to different APEX pages?

    Thanks

    • mnolan says:

      Hi Julien

      Thats a good question, currently it’s not possible but I can make an enhancement to allow this. I’ll let you know once it’s in place.

      and yeah totally agree about Ext JS.

      Cheers
      Matt