daily pastebin goal
11%
SHARE
TWEET

Jeff Trull

a guest Feb 23rd, 2010 817 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Visualforce (using ExtJS) display/selection of Campaign hierarchy two ways by Jeff Trull (linmodemstudent@gmail.com) -->
  2. <apex:page controller="CampaignHierarchyController" tabstyle="Campaign">                                                    
  3.     <!-- get the ExtJS stuff from the static resource I uploaded -->                                                        
  4.     <apex:stylesheet value="{!$Resource.ExtJS}/ext-3.1.1/resources/css/ext-all.css" />                                      
  5.     <apex:includeScript value="{!$Resource.ExtJS}/ext-3.1.1/adapter/ext/ext-base.js"/>                                      
  6.     <apex:includeScript value="{!$Resource.ExtJS}/ext-3.1.1/ext-all-debug.js"/>                                              
  7.     <script type="text/javascript">                                                                                          
  8.         Ext.onReady(function(){                                                                                              
  9.             // represent the campaign hierarchy two ways:                                                                    
  10.             // first, a multi-level menu                                                                                    
  11.             var campMenu = new Ext.menu.Menu({id: 'campMenu'});                                                              
  12.             var clickAction = function(n) {                                                                                  
  13.                                             // set the ID via a special hidden element that communicates with the controller
  14.                                             document.getElementById('{!$Component.hiddenInputForm.hiddenInput}').value = n.id.substr(4);
  15.                                             // call the controller function to update to the given Campaign                            
  16.                                             updateCampaign();                                                                          
  17.                                           };                                                                                            
  18.             var parentMenu;                                                                                                            
  19.             <apex:repeat value="{!CampaignTree}" var="c" id="menuitems">                                                                
  20.                 // add this Campaign as a menu item.  Use a munged version of the actual ID for the record for reference                
  21.                 parentMenu = Ext.ComponentMgr.get(("{!c.parentid}" == "") ? "campMenu" : ("MENU" + "{!c.parentid}"));                  
  22.                 if ("{!c.isleaf}" == "true") {                                                                                          
  23.                     parentMenu.add({id : ("CAMP" + "{!c.id}"), text : "{!c.name}", handler: clickAction});                              
  24.                 }                                                                                                                      
  25.                 else {                                                                                                                  
  26.                     // define submenu as well, for future children                                                                      
  27.                     parentMenu.addMenuItem({id : ("CAMP" + "{!c.id}"), text : "{!c.name}", menu : {id : ("MENU" + "{!c.id}")}, handler: clickAction});
  28.                 }                                                                                                                                    
  29.             </apex:repeat>                                                                                                                            
  30.  
  31.             // make a toolbar for the menu to live in
  32.             var tb = new Ext.Toolbar();
  33.             tb.render('tbd');
  34.             tb.add({
  35.                 text:'Campaign Select Menu',
  36.                 menu: campMenu
  37.             });
  38.             tb.doLayout();  // without this menu fails to appear!
  39.  
  40.             // second, a treepanel with the same data
  41.             var tree = new Ext.tree.TreePanel({
  42.                 renderTo: 'treediv',
  43.                 useArrows: true,
  44.                 autoScroll: true,
  45.                 animate: true,
  46.                 containerScroll: true,
  47.                 border: false,
  48.                 root: new Ext.tree.TreeNode({
  49.                     text: 'All Campaigns',
  50.                     expanded: true,
  51.                     disabled: true,
  52.                     id: 'camproot'
  53.                 }),
  54.                 listeners: {
  55.                     // for the treepanel - but apparently not the menu - I can define a single event function for the whole thing
  56.                     click: function(n) {
  57.                                         document.getElementById('{!$Component.hiddenInputForm.hiddenInput}').value = n.attributes.id.substr(4);
  58.                                         updateCampaign();
  59.                     }
  60.                 }
  61.             });
  62.             // add the campaigns as tree nodes
  63.             var parentNode;
  64.             <apex:repeat value="{!CampaignTree}" var="c" id="treenodes">
  65.                 // add this Campaign as a menu item
  66.                 parentNode = tree.getNodeById(("{!c.parentid}" == "") ? "camproot" : ("NODE" + "{!c.parentid}"));
  67.                 parentNode.appendChild(new Ext.tree.TreeNode({id : ("NODE" + "{!c.id}"), text : "{!c.name}", leaf : "{!c.isleaf}"}));
  68.             </apex:repeat>
  69.         });
  70.     </script>
  71.     <!-- connect Javascript to controller -->
  72.     <apex:form id="hiddenInputForm">
  73.         <!-- hidden variable connects controller string (holding the selected campaign ID) to Javascript -->
  74.         <apex:inputHidden value="{!SelectedId}" id="hiddenInput"/>
  75.         <!-- turn controller method into a Javascript function that can be called from click actions -->
  76.         <apex:actionFunction name="updateCampaign" action="{!selectCampaign}" rerender="campid,campname,campparent"/>
  77.     </apex:form>
  78.  
  79.     <apex:pageBlock title="Selected Campaign Details">
  80.         <apex:pageBlockSection columns="4">
  81.             <apex:outputField id="campid" value="{!SelectedCampaign.id}"/><br>
  82.             <apex:outputField id="campname" value="{!SelectedCampaign.name}"/><br>
  83.             <apex:outputField id="campparent" value="{!SelectedCampaign.parentid}"/><br>
  84.         </apex:pageBlockSection>
  85.     </apex:pageBlock>
  86.     <apex:pageBlock title="Selecting Campaigns via Menu Tree">
  87.         <div id="tbd"/>
  88.     </apex:pageBlock>
  89.     <apex:pageBlock title="Selecting Campaigns via TreePanel">
  90.         <div id="treediv"/>
  91.     </apex:pageBlock>
  92. </apex:page>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top