title: qxMobile – List with Checkboxes
body: <p>I'm trying to create a list in qooxdoo Mobile that has a checkbox on the side of each item (like in Android's settings menu). I have now extended from list and wrote my own provider and renderer. The files can be found below. Furthermore, a live example of my current progress can be seen here: <a href="http://www.airblader.de/qxCheckBoxList/index.html#" rel="nofollow">Example Page</a></p>
  
  <p>Now what's the status? As you can see, the checkboxes aren't being displayed – but they are there (check the DOM). Overwriting the CSS to display the native checkboxes actually displays them, but the framework boxes just don't show up. My question being: How to solve this? I really think this is worth solving as I believe this would be a contribution many people can benefit from.</p>
  
  <p>Edit: I have already tried wrapping the checkbox in a container, it didn't change anything either.</p>
  
  <p>Files:</p>
  
  <p><strong>qx.ui.mobile.list.CheckBoxList:</strong> (<a href="http://pastebin.com/X5HJwZSb" rel="nofollow">on pastebin.org</a>)</p>
  
  <pre><code>qx.Class.define('qx.ui.mobile.list.CheckBoxList', {
      extend : qx.ui.mobile.list.List,
  
      // overridden
      construct : function (delegate) {
          this.base( arguments );
  
          this.__provider = new qx.ui.mobile.list.provider.CheckBoxListItemProvider( this );
          if ( delegate ) {
              this.setDelegate( delegate );
          }
      }    
  });
  </code></pre>
  
  <p><strong>qx.ui.mobile.list.provider.CheckBoxListItemProvider</strong> (<a href="http://pastebin.com/vj3CPy9p" rel="nofollow">on pastebin.org</a>)</p>
  
  <pre><code>qx.Class.define('qx.ui.mobile.list.provider.CheckBoxListItemProvider', {
      extend : qx.ui.mobile.list.provider.Provider,
  
      members : {
          // overridden
          _createItemRenderer : function () {
              return new qx.ui.mobile.list.renderer.CheckBoxListItemRenderer();
          }
      }
  });
  </code></pre>
  
  <p><strong>qx.ui.mobile.list.renderer.CheckBoxListItemRenderer</strong> (<a href="http://pastebin.com/hEvNMG0A" rel="nofollow">on pastebin.org</a>)</p>
  
  <pre><code>qx.Class.define('qx.ui.mobile.list.renderer.CheckBoxListItemRenderer', {
      extend : qx.ui.mobile.list.renderer.Abstract,
  
      // overridden
      construct : function () {
          this.base( arguments, new qx.ui.mobile.layout.HBox().set( { alignY: 'middle' } ) );
          this._init();
      },
  
      members : {
          __title : null,
          __subtitle : null,
          __checkbox : null,
          __leftContainer : null,
  
          getTitle : function () {
              return this.__title.getValue()
          },
  
          setTitle : function (title) {
              this.__title.setValue( title );
          },
  
          getSubTitle : function () {
              return this.__subtitle.getValue();
          },
  
          setSubTitle : function (subtitle) {
              this.__subtitle.setValue( subtitle );
          },
  
          getValue : function () {
              return this.__checkbox.getValue();
          },
  
          setValue : function (checked) {
              this.__checkbox.setValue( checked );
          },
  
          _init : function () {
              this.__leftContainer = this._createLeftContainer();
              this.add( this.__leftContainer, { flex: 1 } );
  
              this.__title = this._createTitle();
              this.__leftContainer.add( this.__title );
  
              this.__subtitle = this._createSubTitle();
              this.__leftContainer.add( this.__subtitle );
  
  
              this.__checkbox = this._createCheckBox();
              this.add( this.__checkbox );
          },  
  
          _createLeftContainer : function () {
              return new qx.ui.mobile.container.Composite( new qx.ui.mobile.layout.VBox() );
          },
  
          _createTitle : function () {
              var title = new qx.ui.mobile.basic.Label();
              title.addCssClass( 'list-itemlabel' );
  
              return title;
          },
  
          _createSubTitle : function () {
              var subtitle = new qx.ui.mobile.basic.Label();
              subtitle.addCssClass( 'subtitle' );
  
              return subtitle;
          },  
  
          _createCheckBox : function () {
              var checkbox = new qx.ui.mobile.form.CheckBoxListCheckBox();
  
              return checkbox;
          },
  
          // overridden
          _applyShowArrow : function (value, old) {
              return;
          },
  
          // overriden
          reset : function () {
             this.__title.setValue( '' );
             this.__subtitle.setValue( '' );
             this.__checkbox.setValue( false );
          }
      },   
  
      // overriden
      destruct : function () {
          this._disposeObjects( '__title', '__subtitle', '__checkbox', '__leftContainer' );
      }
  });
  </code></pre>
  
  <p><strong>qx.ui.mobile.form.CheckBoxListCheckBox</strong> (<a href="http://pastebin.com/i0Uk06Pg" rel="nofollow">on pastebin.org</a>)</p>
  
  <pre><code>qx.Class.define('qx.ui.mobile.form.CheckBoxListCheckBox', {
      extend : qx.ui.mobile.form.CheckBox,
  
      members : {
          // overridden
          _onAppear : function () {
              // we purposely don't call this.base( arguments ) because it would create a label that we don't need
              qx.event.Registration.removeListener( this, 'appear', this.__onAppear, this );
          }
      }
  });
  </code></pre>