0

qooxdoo Mobile で、各項目の横にチェックボックスがあるリストを作成しようとしています (Android の設定メニューのように)。リストから拡張し、独自のプロバイダーとレンダラーを作成しました。ファイルは以下にあります。さらに、私の現在の進行状況のライブの例は、ここで見ることができます:例のページ

さて状態は？ご覧のとおり、チェックボックスは表示されていませんが、表示されています (DOM を確認してください)。ネイティブ チェックボックスを表示するように CSS を上書きすると、実際にはそれらが表示されますが、フレームワーク ボックスは表示されません。私の質問は次のとおりです。これを解決するにはどうすればよいですか？これは多くの人が恩恵を受けることができる貢献になると信じているので、これは解決する価値があると本当に思います.

編集：チェックボックスをコンテナにラップしようとしましたが、何も変わりませんでした。

ファイル:

qx.ui.mobile.list.CheckBoxList: ( 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 ( 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 ( 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 ( 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 );
        }
    }
});
4

1 に答える 1

1

チェックボックスの問題は af5abf92837255b6b60d30832a63d2a07cd7ae42 で解決されました。

リスト内でチェックボックスを使用するために使用するスニペットを次に示します。

リストのモデルは、プロパティ「checked」を持つ複数のデータ Bean「newGameModelObject」を含む qx.data.Array です。

「checked」プロパティを変更すると、「changeBubble」イベントによりリストが自動的に再レン​​ダリングされます。「changeBubble」イベントを発生させるには、データ Bean に「MEventBubbling」という mixin を含める必要があり、プロパティ適用メソッドを「_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 で checkBox を作成し、それを ButtonContainer に追加する必要があります。次に、「changeValue」イベントをリッスンし、行アイテムのチェック状態を変更する必要があります。モデル自体が更新され、リストの再レンダリングがトリガーされます >> チェックボックスに新しい状態が表示されます。

最終的に問題を解決するのに役立つことを願っています。

グリーツ・クリストファー

于 2013-02-02T01:12:27.050 に答える