Question

我制作了自定义列表项目视图（基于http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4）。

我对此列表中的选择项有疑问。始终选择第一个元素（无论列表中哪个元素我都会点击）。

我该怎么做才能解决我的问题？

这是我的列表项小部件：

qx.Class.define("project.MyView", {
    extend : qx.ui.core.Widget,
    include : [qx.ui.form.MModelProperty],

    construct : function() {
        this.base(arguments);

        var layout = new qx.ui.layout.Grid(4, 2);
        layout.setColumnFlex(1, 1);
        this._setLayout(layout);

        this._createChildControl("icon");
        this._createChildControl("date");
        this._createChildControl("description");
    },

    properties : {
        appearance : {
            refine : true,
            init : "listitem"
        },

        icon : {
            check : "String",
            apply : "_applyIcon",
            nullable : true
        },

        date : {
            check : "String",
            apply : "_applyDate",
            nullable : true
        },

        description : {
            check : "String",
            apply : "_applyDescription",
            nullable : true
        }
    },

    members : {

        _createChildControlImpl : function(id) {
            var control;

            switch (id) {
            case "icon":
                control = new qx.ui.basic.Image(this.getIcon());
                control.setAnonymous(true);
                this._add(control, {
                    row : 0,
                    column : 0,
                    rowSpan : 2
                });
                break;

            case "date":
                control = new qx.ui.basic.Label(this.getDate());
                control.setAnonymous(true);
                this._add(control, {
                    row : 0,
                    column : 2
                });
                break;

            case "description":
                control = new qx.ui.basic.Label(this.getDescription());
                control.setAnonymous(true);
                control.setRich(true);
                this._add(control, {
                    row : 0,
                    column : 1
                });
                break;
            }

            return control || this.base(arguments, id);
        },

        _applyIcon : function(value, old) {
            var icon = this.getChildControl("icon");
            icon.setSource(value);
        },

        _applyDescription : function(value, old) {
            var description = this.getChildControl("description");
            description.setValue(value);
        },

        _applyDate : function(value, old) {
            var date = this.getChildControl("date");
            date.setValue(value);
        }

    },

    destruct : function() {

    }

});

......以及我如何使用它：

this.list = new qx.ui.form.List();
this.listController = new qx.data.controller.List(null, this.list);
this.listController.setDelegate({
    createItem : function() {
        return new project.MyView();
    },

    bindItem : function(controller, item, id) {
        controller.bindProperty("description", "description", null,item, id);
        controller.bindProperty("icon", "icon", null, item, id);
        controller.bindProperty("date", "date", null, item, id);
    },

    configureItem : function(item) {
        item.getChildControl("icon").setWidth(48);
        item.getChildControl("icon").setHeight(48);
        item.getChildControl("icon").setScale(true);
        item.setMinHeight(52);
    }
});

Answer 1

看起来问题出在bindItem函数中。只要提供自己的bindItem函数，就不再绑定所有默认绑定属性。这意味着标签，图标和模型不再同步。我没有尝试过你的代码，但我想通过简单的模型绑定，问题就会消失。

controller.bindProperty("", "model", null, item, id);

如果您想要在模型属性中使用不同的东西，并且在您的选择中需要，那么这是必要的。这段代码行只使用整个对象作为模型，在大多数情况下这是一个好主意。

最佳，马丁

qooxdoo - 自定义listitem小部件选择

1 个答案: