This post is just a tease of what’s to come, I just wanted you to get an idea of how an APEX ExtJS app is going to look (see below). Pretty impressive huh? And remember once all our templates are complete i.e. integration kit, we can build an Ext app in the same time as your standard APEX app (but with a tone of functionality), without touching a single line of javascript. Will PHP (and it’s plugins) be able to compete with that, somehow I don’t think so!

I’m starting to pay some attention to the viewport and tabbed panes. If we are to breakdown the image below we’ll start with the tree. We followed Mark Lancaster’s approach for creating a tree based of an existing APEX List. The twist is we open links in a new tab in the center pane within an iFrame rather than redirecting to the page defined in the link. This means that we only have 1 page in the application which has the viewport defined as the page template, the other pages simply use a panel/tab template. One thing to note about using multiple iFrames with APEX pages is that your going to have to think about how to manage session state effectively but I’ll touch on that in a later post. To give you an idea of how its done here’s a little JS snippet….

    tree#REGION_ID#.on('click', function(node, e){
         if(node.isLeaf()){
            e.stopEvent();
            centerPanel.loadTab(node.attributes.href, node.id, node.attributes.text);
         }
    });

Essentially we add an onclick event to the tree, check that the tree entry is a leaf, i.e. link, and stop the current event (which is a page redirect btw). We then reference the center panel object and open the content in a new tab using the supplied URL/href.

Note: loadTab is our own custom function which we wrote (25 lines thats all, ahh Ext makes coding simple.. well complex but simple once you get your head around it) which opens the content in an iframe (no Ext plugins used), we simply extended the TabPanel object. e.g.

Ext.extend(centerPanel, Ext.TabPanel, {
   loadTab: function(href, pid, tabTitle) {
        ...........

Here’s the viewport example, click the image to get the full size view…