IconTitlePane

The class IconTitlePane extends the dijit/TitlePane by the possibility to

• show a status-icon (e.g. an error marker) left of the drop down icon
  • Define the property iconClass for using this feature.  The IconTitlePane will watch that property, i.e. changes to that property using set("iconClass", ...) take effect immediately.
• show an additional span with free content at the right of the header bar (e.g. some buttons)
  • Define a property additionalSpan for this
  • Caution: 
    • If a button is positioned in that additionalSpan, the default is that a click to that button first executes the button action and then performs the default functionality of toggleing the TitlePane.  
    • Unfortunately, the latter cannot be suppressed by simply calling event.preventDefault / event.stopPropagation.

    • Suppressing however can be done by applying the following steps:
      In the click handler of the button, save the current toggleable state of the TitlePane, and then turn it off. 

         		 	this.dataSetWidgets[index].oldToggleable = this.dataSetWidgets[index].titlePane.toggleable;
         		 	// Not use the set("toggleable", ...) syntax here, since that would trigger a change to the visual presentation of the TitlePane,
         		 	// which is not what we want here.
         		 	this.dataSetWidgets[index].titlePane.toggleable = false;

      Register a postTitleClick function on construction of the IconTitlePane, which resets the toggleable state to the old value:

      			var titlePane = new IconTitlePane({title : tabCaption,
      				 							  content : dataSetContentDiv,
      				 					   additionalSpan : dataSetAdditionalSpan,
      				 						   toggleable : true,
      				 						   	     open : true,
      				 						   	iconClass : null,
      				 					   postTitleClick : lang.hitch(this, function() {
      				 			            	 var index = ArrayHelper.getIndexByObjectMember(this.dataSetWidgets, "addButton", addButton);
      				 			            	 if (index != null) {
      				 			            		 this.dataSetWidgets[index].titlePane.toggleable = !!this.dataSetWidgets[index].oldToggleable;
      				 			            	 }
      				 					   })

      In IconTitlePane, the _onTitleClick first toggles the TitlePane if necessary (= not if we turned that feature off temporarily as described above), and then calls that postTitleClick function if it exists:

          	_onTitleClick: function(){
          		// summary:
          		//		Handler when user clicks the title bar
          		// tags:
          		//		private
          		if(this.toggleable){
          			this.toggle();
          		}
          		
          		if (this.postTitleClick) {
          			this.postTitleClick();	
          		}
          	}