Child pages
  • IconTitlePane
Skip to end of metadata
Go to start of metadata

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();	
            		}
            	}
  • No labels