Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    'picker' autochild not constructed before pickerIconClick is called?

    I'm doing some testing on 12.0 on code that works well with 11.1. When I click the icon, it looks like my pickerConstructor isn't created and I'm seeing an unexpected null value in my pickerIconClick.


    Here's an example starting from:
    https://www.smartclient.com/smartcli...izeIncrease=10

    I use this sample code. I've got my own custom FormItem. Note I did not need to include my "FileUploader". What I do is just click the "myitem" icon and I get this exception:

    Code:
    Uncaught TypeError: Cannot read property 'setImageValue' of undefined
        at _3.pickerIconClick (eval at isc_c_Class_evaluate (ISC_Core.js?isc_version=SNAPSHOT_v12.1d_2018-06-01.js:278), <anonymous>:23:21)
        at _3.isc_FormItem__iconClick [as $116] (ISC_Forms.js?isc_version=SNAPSHOT_v12.1d_2018-06-01.js:1323)

    which is inside pickerIconClick. In 11.1, "item.picker" is defined by the time that callback is invoked.

    Is there a different way to get access to the picker in 12.0?



    Code:
    isc.ClassFactory.defineClass("AttachmentItem",isc.LinkItem);
    isc.AttachmentItem.addProperties({
        pickerConstructor: "FileUploader",
        pickerDefaults: {
            title: "Pick file to upload",
            includeDescriptionField: false,
            includeImage: false,
            accept:"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        },
        showPickerIcon:true,
        pickerIconWidth:18,
        pickerIconHeight:18,
        pickerIconSrc:"[SKIN]/DynamicForm/default_formItem_icon.png",
        canFocus: false
    });
    isc.AttachmentItem.addMethods({
        valueIconClick: function(form, item, value) {
            item.showPicker();
            item.picker.setImageValue(item.getValue());
        },
        pickerIconClick: function(form, item, pickerIcon){
            console.log("item:",item,"picker:",item.picker);
            item.picker.setImageValue(item.getValue());
        },
        getValueIcon: function(value){
            if(this.form.canEdit) {
                return "[SKIN]/DynamicForm/default_formItem_icon.png";
            }
        },
    });
    
    isc.Label.create({
        ID: "pickerLabel",
        border: "1px grey solid",
        width: 300, height: 30
    });
    
    isc.IButton.create({
        ID: "pickerButton",
        title: "Pick a Color",
        click : function () {
            isc.ColorPicker.getSharedColorPicker({
                colorSelected:"pickerLabel.setBackgroundColor(color);pickerLabel.setOpacity(opacity);"
            }).show();
        }
    });
    
    isc.DynamicForm.create({
        ID: "pickerForm",
        values: {startMode: "simple", position: "auto"},
        numCols: 2,
        titleOrientation: "top",
        width: 400,
        fields: [{
            name: "startMode",
            title: "Initially show ColorPicker as",
            width: 200,
            type: "radioGroup",
            valueMap: {
                "simple": "Simple",
                "complex": "Complex"
            },
            changed : function (form, item, value) {
                isc.ColorPicker.getSharedColorPicker({
                    defaultPickMode: value
                }).setCurrentPickMode(value);
            }
        }, {
            name: "position", title: "Position ColorPicker", type: "radioGroup",
            width: 200, valueMap: {"auto": "Near mouse", "center": "Centered"},
            changed: function () {
                isc.ColorPicker.getSharedColorPicker().setProperties({ 
                    autoPosition: this.getValue() == "auto" ? true : false,
                    autoCenterOnShow: this.getValue() == "auto" ? false : true
                });
            }
        },
    {name:"myitem", type:"AttachmentItem"}
    
    ]
    });
    
    isc.VLayout.create({
        width: 400,
        membersMargin: 10,
        members: [
            isc.Label.create({contents: "Selected color:", height: 20}),
            pickerLabel,
            pickerForm,
            pickerButton
        ]
    });












    #2
    We shored up and doc'd this area more thoroughly, with an eye toward custom pickers that aren't based on our picker AutoChild, which was previously difficult to suppress. If you look at the docs now, the default pickerIconClick is documented to call showPicker() - if you override and do not call showPicker(), the default picker won't exist yet, hence item.picker is null as you've seen.

    Comment

    Working...
    X