qxMobile – 带有复选框的列表

Question

我正在尝试在 qooxdoo Mobile 中创建一个列表，该列表在每个项目的侧面都有一个复选框（例如在 Android 的设置菜单中）。我现在已经从列表中扩展并编写了我自己的提供者和渲染器。这些文件可以在下面找到。此外，可以在这里看到我当前进度的一个活生生的例子：Example Page

现在是什么状态？如您所见，复选框没有显示 - 但它们在那里（检查 DOM）。覆盖 CSS 以显示本机复选框实际上会显示它们，但框架框只是不显示。我的问题是：如何解决这个问题？我真的认为这是值得解决的，因为我相信这将是许多人可以从中受益的贡献。

编辑：我已经尝试将复选框包装在一个容器中，它也没有改变任何东西。

文件：

qx.ui.mobile.list.CheckBoxList： (on pastebin.org)

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 );
        }
    }    
});

qx.ui.mobile.list.provider.CheckBoxListItemProvider (on pastebin.org)

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

qx.ui.mobile.list.renderer.CheckBoxListItemRenderer (on pastebin.org)

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' );
    }
});

qx.ui.mobile.form.CheckBoxListCheckBox (on pastebin.org)

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 );
        }
    }
});

Answer 1

复选框问题已通过以下方式解决： af5abf92837255b6b60d30832a63d2a07cd7ae42

这里有一些我用来在列表中使用复选框的 sn-ps：

列表的模型是一个 qx.data.Array，其中包含几个数据 bean“newGameModelObject”，它有一个属性“checked”。

如果您更改“checked”属性，由于“changeBubble”事件，列表应该会自动重新呈现。 要触发“changeBubble”事件，数据 bean 必须包含 mixin“MEventBubbling”，并且属性应用方法必须是“_applyEventPropagation”

qx.Class.define("newGameModelObject",
{
  extend : qx.core.Object,
  include : [qx.data.marshal.MEventBubbling],

  properties :
  {
    checked :
    {
      check :"Boolean",
      init : false,
      apply : "_applyEventPropagation"
    }  
  }
});

这是我使用的列表的 configureItem 部分：

 this.__list = new qx.ui.mobile.list.List({
        configureItem : function(item, data, row)
        {
          [...]

          var checkBox = new qx.ui.mobile.form.CheckBox(data.getChecked());
          checkBox.addListener("changeValue", function(evt){
            var item4change = self.__list.getModel().getItem(row);
            item4change.setChecked(evt.getData());
          });

          item.addToButtonContainer(checkBox);
        },

        createItemRenderer : function() {
          return new renderer.Button();
        }
      }
 );

您必须在 configureItem 上创建复选框并将其添加到 ButtonContainer。 然后你必须听它上面的“changeValue”事件并改变行项目的选中状态。 现在模型会自我更新并触发列表的重新渲染>>复选框显示新状态。

希望这有助于最终解决您的问题。

问候克里斯托弗