Extending TextField Rendering

Example of a TextField control with a changed rendering.

The following code snippet creates a control type that inherits from TextField. The new control has all features from the TextField control, but the rendering is changed to highlighted with yellow background.

The control API and the render method can be inherited as it is and the renderInnerAttributes method of the TextFieldRenderer is overwritten:

  
sap.ui.commons.TextField.extend("HighlightField", { // call the new Control type "HighlightField" 
                                                      // and let it inherit from sap.ui.commons.TextField
     

      renderer: {
          // note that NO render() function is given here! The TextField's render() function is used. 
          // But one function is overwritten:
          
          renderInnerAttributes : function(oRm, oTextField) {
              oRm.addStyle('background-color', '#ffff00');  // this change could also be done with plain CSS!! 
                                                            // But you get the idea...
          }
      }
  });

The HighlightField control can be used in an application in the same way as TextField:

var myControl = new HighlightField({value:"Highlighted editing"});
myControl.placeAt("content");