problem with form used as ListGrid.recordComponent

[claudiobosticco]

SmartClient Version: v11.1p_2017-07-23/AllModules Development Only (built 2017-07-23)

Chrome on OSX

Hello, while trying to work around this problem: http://forums.smartclient.com/forum/...970#post245970

I've just found a bug which seems to appear when using a DynamicForm as a record Component:

var sliderHeight = 30;
var sliderTrackWidth = 30;
var sliderThumbThickWidth = 30;
var sliderThumbThinWidth = 30;
var labelHeight = 30;

var offLabelWidth = 30;
var onLabelWidth = 30;

var offLabelText = "OFF";
var onLabelText = "ON";

isc.defineClass("SwitchItem", "SliderItem").addProperties({
    type: "integer",
    init: function () {
        this.Super("init", arguments);
        this.addAutoChild("offLabel", {});
        this.addAutoChild("onLabel", {});
        this.offLabel.bringToFront();
        this.onLabel.bringToFront();
        this.showOrHideLabels();
    },
    offLabelDefaults: {   
        _constructor: isc.Label,
        autoParent: "slider",
        height: labelHeight,
        width: offLabelWidth,
        contents: offLabelText,  
        snapOffsetLeft: 35,
        snapTo: "TL"
    },
    onLabelDefaults: {    
        _constructor: isc.Label,
        autoParent: "slider",
        height: labelHeight,
        width: onLabelWidth,
        contents: onLabelText,  
        snapOffsetLeft: 10,
        snapTo: "TL"
    },
    sliderProperties: {
        height: sliderHeight,
        vertical: false,
        defaultValue: 1,
        showRange: false,
        showValue: false,
        trackWidth: sliderTrackWidth,
        thumbThickWidth: sliderThumbThickWidth,
        thumbThinWidth: sliderThumbThinWidth
    },
    showTitle: false,
    change: function () {
        return false;
    },
    showOrHideLabels: function () {
        var value = this.getValue();
        if (value === 2) {
            this.offLabel.hide();
            this.onLabel.show()
        } else {
            this.onLabel.hide();
            this.offLabel.show()
        }
    },
    click: function (form, item) {
        var value = item.getValue();
        value = value === 1 ? 2 : 1
        item.setValue(value)
        this.showOrHideLabels();
    },
    minValue: 1,
    maxValue: 2,
    numValues: 2
});

isc.ListGrid.create({
    width: 600,
    height: 224,
    canResizeFields: true,
    canEdit: true,
    leaveScrollbarGap: false,
    showRecordComponents: true,
    showRecordComponentsByCell: true,
    canRemoveRecords: false,
    recordComponentPoolingMode: "recycle",
    dataSource: "worldDS",
    autoFetchData: true,
    fields: [
        {
            name: "countryCode", type: "image", title: "Flag", width: 40, align: "center",
            imageURLPrefix: "flags/16/", imageURLSuffix: ".png"
        },
        {name: "countryName", title: "Country"},
        {name: "capital", title: "Capital"},
        {name: "continent", title: "Continent"},
        {name: "buttonField", title: "Info", align: "center", canEdit: false}],

    createRecordComponent: function (record, colNum) {
        var fieldName = this.getFieldName(colNum);

        if (fieldName == "buttonField") {
            var button = isc.DynamicForm.create({
                border: 1,
                height: 26,
                width: 70,
                layoutAlign: "center",
                items: [{name: "foo", editorType: "SwitchItem", width: 65}]

            });
            return button;
        } else {
            return null;
        }
    }
});

In this test case you see that the form uses the SwitchItem I've defined, but you'll get the same effect with a TextItem.

[claudiobosticco]

Please note that every recordComponent re-aligns vertically in the row if you click on the switch (and then the visual glitch reappears if you scroll down and then to the top again)

[claudiobosticco]

same problem with latest build:
SmartClient Version: v11.1p_2017-07-24/Enterprise Development Only (built 2017-07-24)
and with FF and Safari (OSX)

The previous screenshot is from 'spacious' setting, but the problem is even more evident with medium setting, and is also present in Graphite skin.

[claudiobosticco]

Hello, actually it seems that it's due to the fact that I have a form with height 26 specified, but it grows to a height of 38px (because the slider height is 30px, cellPadding is 2px...).
The cellHeight also grows to 38px, but with that visual glitch.
If I specify a cellHeight bigger than 38, or the form stays lower than 32px, it seems correct.
So I don't know if it could be considered actually a bug.

[Isomorphic]

We did take a look, and we're also not sure it's a bug - that said... Our advice might be to scrap this extension of SliderItem that you have, which involves manipulating numerous autochildren, and instead just have a CanvasItem with a styled div, a roudned icon you can snap to either end and a label you can snap to the other end. That seems simpler than what you're presently doing.