Question

I made custom listitem view (based on http://news.qooxdoo.org/tutorial-part-4-2-custom-widgets-4).

I have problem with selection items on this list. There is always selected first element (no matter which element on list I will click).

What should I do to resolve my problem?

Here is my list-item widget:

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() {

    }

});

… and here how I use it:

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

looks like the Problem is in the bindItem function. As soon as you supply your own bindItem function, all default bound properties are not bound anymore. That means that lable, icon and model are no longer in sync. I havent tried you code but i guess with a simple binding of the model, the problem will be gone.

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

This is necessary in case you want something different in your model property and with that, in your selection for example. This code line just uses the whole object as model which is in the most cases a good idea.

Best,
Martin