Checkbox is not rendered properly

Question

I've been trying to create a base window class for my dialogs. For creating controls I decided to override _createChildControlImpl method and to use getChildControl method. And everything looks fine except checkbox. I don't know why, but checkbox is not rendered properly if to use getChildControl method.

This code reproduce my problem

qx.Class.define("MyWin",{
    extend: qx.ui.window.Window,

    construct: function(t){
        this.base(arguments, t);
        this.setLayout(new qx.ui.layout.Canvas());

        var row = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
        row.add(new qx.ui.basic.Label("Active:"));
        row.add(this.getChildControl("active"));
        row.add(new qx.ui.form.CheckBox("status B"));

        var _mainContainer = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
        _mainContainer.add(row);

       this.add(_mainContainer, {width: "100%", bottom: 50, top:0});

   },


   members: {

    _createChildControlImpl : function(id, hash){
        var control;

        switch(id){
            case "active":
                control=new qx.ui.form.CheckBox("status A");
                break;
        }
        return control || this.base(arguments, id);
    }
  }

});

var win = new MyWin("Test");
this.getRoot().add(win, {left:20, top:20});
win.open();

Link for playground http://goo.gl/Lna8qc

Answer 1

This is due to the missing theming. If you are using child controls, you have to define the theming information for them. The checkbox will get a new appearance selector (window/active) which needs to be forwarded to the checkbox appearance. See the following sample:

http://tinyurl.com/lj7zqwl