Jeff Trull

<!-- Visualforce (using ExtJS) display/selection of Campaign hierarchy two ways by Jeff Trull (linmodemstudent@gmail.com) -->
<apex:page controller="CampaignHierarchyController" tabstyle="Campaign">
    <!-- get the ExtJS stuff from the static resource I uploaded -->
    <apex:stylesheet value="{!$Resource.ExtJS}/ext-3.1.1/resources/css/ext-all.css" />
    <apex:includeScript value="{!$Resource.ExtJS}/ext-3.1.1/adapter/ext/ext-base.js"/>
    <apex:includeScript value="{!$Resource.ExtJS}/ext-3.1.1/ext-all-debug.js"/>
    <script type="text/javascript">
        Ext.onReady(function(){
            // represent the campaign hierarchy two ways:
            // first, a multi-level menu
            var campMenu = new Ext.menu.Menu({id: 'campMenu'});
            var clickAction = function(n) {
                                            // set the ID via a special hidden element that communicates with the controller
                                            document.getElementById('{!$Component.hiddenInputForm.hiddenInput}').value = n.id.substr(4);
                                            // call the controller function to update to the given Campaign
                                            updateCampaign();
                                          };
            var parentMenu;
            <apex:repeat value="{!CampaignTree}" var="c" id="menuitems">
                // add this Campaign as a menu item.  Use a munged version of the actual ID for the record for reference
                parentMenu = Ext.ComponentMgr.get(("{!c.parentid}" == "") ? "campMenu" : ("MENU" + "{!c.parentid}"));
                if ("{!c.isleaf}" == "true") {
                    parentMenu.add({id : ("CAMP" + "{!c.id}"), text : "{!c.name}", handler: clickAction});
                }
                else {
                    // define submenu as well, for future children
                    parentMenu.addMenuItem({id : ("CAMP" + "{!c.id}"), text : "{!c.name}", menu : {id : ("MENU" + "{!c.id}")}, handler: clickAction});
                }
            </apex:repeat>

            // make a toolbar for the menu to live in
            var tb = new Ext.Toolbar();
            tb.render('tbd');
            tb.add({
                text:'Campaign Select Menu',
                menu: campMenu
            });
            tb.doLayout();  // without this menu fails to appear!

            // second, a treepanel with the same data
            var tree = new Ext.tree.TreePanel({
                renderTo: 'treediv',
                useArrows: true,
                autoScroll: true,
                animate: true,
                containerScroll: true,
                border: false,
                root: new Ext.tree.TreeNode({
                    text: 'All Campaigns',
                    expanded: true,
                    disabled: true,
                    id: 'camproot'
                }),
                listeners: {
                    // for the treepanel - but apparently not the menu - I can define a single event function for the whole thing
                    click: function(n) {
                                        document.getElementById('{!$Component.hiddenInputForm.hiddenInput}').value = n.attributes.id.substr(4);
                                        updateCampaign();
                    }
                }
            });
            // add the campaigns as tree nodes
            var parentNode;
            <apex:repeat value="{!CampaignTree}" var="c" id="treenodes">
                // add this Campaign as a menu item
                parentNode = tree.getNodeById(("{!c.parentid}" == "") ? "camproot" : ("NODE" + "{!c.parentid}"));
                parentNode.appendChild(new Ext.tree.TreeNode({id : ("NODE" + "{!c.id}"), text : "{!c.name}", leaf : "{!c.isleaf}"}));
            </apex:repeat>
        });
    </script>
    <!-- connect Javascript to controller -->
    <apex:form id="hiddenInputForm">
        <!-- hidden variable connects controller string (holding the selected campaign ID) to Javascript -->
        <apex:inputHidden value="{!SelectedId}" id="hiddenInput"/>
        <!-- turn controller method into a Javascript function that can be called from click actions -->
        <apex:actionFunction name="updateCampaign" action="{!selectCampaign}" rerender="campid,campname,campparent"/>
    </apex:form>

    <apex:pageBlock title="Selected Campaign Details">
        <apex:pageBlockSection columns="4">
            <apex:outputField id="campid" value="{!SelectedCampaign.id}"/><br>
            <apex:outputField id="campname" value="{!SelectedCampaign.name}"/><br>
            <apex:outputField id="campparent" value="{!SelectedCampaign.parentid}"/><br>
        </apex:pageBlockSection>
    </apex:pageBlock>
    <apex:pageBlock title="Selecting Campaigns via Menu Tree">
        <div id="tbd"/>
    </apex:pageBlock>
    <apex:pageBlock title="Selecting Campaigns via TreePanel">
        <div id="treediv"/>
    </apex:pageBlock>
</apex:page>