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

以下是我用于使用List中的复选框的一些片段：

列表的模型是一个qx.data.Array，它包含几个数据bean“newGameModelObject”，它具有“已检查”属性。

如果更改“已选中”属性，则由于“changeBubble”事件，列表应自动重新呈现。为了触发“changeBubble”事件，数据bean必须包含mixin“MEventBubbling”，属性apply方法必须是“_applyEventPropagation”

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

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

以下是我使用的listItem部分：

 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上创建checkBox并将其添加到ButtonContainer中。然后，您必须在其上侦听“changeValue”事件并更改行项目的已检查状态。现在模型自我更新并触发重新呈现列表＆gt;＆gt;该复选框显示新状态。

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

格雷茨克里斯托弗

qxMobile - 列表与复选框

1 个答案: