[SOLVED] Set style for custom control



i would like to override the DateTimePicker and also want to change style from  left: 4px to left: 2px.

extend: wisej.web.DateTimePicker,

construct: function () {
var textfield = this.getChildControl(“textfield”);
textfield.getContentElement().setStyles({ left: “2px”});

The javascript has been called, but it does not change the style.

Thanks for yours help,



  • You must to post comments
Best Answer

Setting the style of the content element directly is overridden by the theme setting the properties and styles of the actual widget. In particular the margin property is translated to style positions since you cannot use margin in css with absolute positions by the underlying javascript layout engine.

Either you do it after the dom is rendered or it’s much simpler to change the theme.

You can:

  1. Create a custom theme based on an existing theme. This will limit you to the base theme.
  2. Create a mixin that alters only what you need to alter, this will allow you to pick any theme and keep your changes.
  3. Change the theme at runtime in code.

Solution 2 is the preferred one. New Item -> Mixin theme. see below and attached. Arrays are in the standard TRBL sequence.


 "name": "Application",

   "appearances": {
     "datefield": {
       "inherit": "datefield",
       "components": {
         "textfield": {
           "states": {
             "default": {
               "properties": {
                "margin": [ 0, 0, 0, 2 ]


  • Page Page
    Thanks you, it works. Page
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.