custom button enable/disable

[acarur01]

Enabling/Disabling does not seem to update the buttons. Run the sample and click the appropriate buttons to enable/disable. You'll notice it always keeps the original state, but when it is enabled you can see when you mouseover that it is clickable but looks disabled. Also note that when showTitle is set to false, it works fine.

isc.ClassFactory.defineClass("CwButtonItem", "CanvasItem");

isc.CwButtonItem.addProperties({
    init:function () {
        this.canvas = isc.Button.create({
            showTitle: this.showTitle, 
            ID: this.widgetID,
            width: this.width,
            height: this.height,
            title: this.buttonLabel,

        });
        return this.Super("init", arguments);
    }
    
});

isc.HLayout.create({ID:"hl",members:
[isc.DynamicForm.create({numCols:2, titleOrientation:"top", fields: 
[ {widgetID:"mySelect",height: 20, buttonStyle:"button", buttonLabel:" Select ",textAlign:"center",_constructor:"CwButtonItem",disabled: true, showTitle: true}, 
  {widgetID:"myCancel",height:20,width: 100, buttonStyle:"button",buttonLabel:" Cancel ",textAlign:"center",_constructor:"CwButtonItem", showTitle: true
}
] })]});


// control button to enable/disable above buttons.
isc.Button.create({
    title: "Enable All",
    left: 100,
    top: 60,
    click : function () {
        if (mySelect.isDisabled()) {
            isc.say("mySelect.isDisabled() is "+mySelect.isDisabled()+", so Select is enabled!");
            mySelect.setDisabled(false);
            myCancel.enable();
            this.setTitle("Disable All");
        } else {
            isc.say("mySelect.isDisabled() is "+mySelect.isDisabled()+", so Select is disabled!");
            mySelect.setDisabled(true);
            myCancel.disable();
            this.setTitle("Enable All");
        }
    }
});

[Isomorphic]

A couple of things to resolve this:
1) Get rid of the buttons' "showTitle" setting - this is the basic cause for the problem.
At the FormItem level 'showTitle' is responsible for whether a title cell shows next to the item.
showTitle on Button is not a publicly documented / supported attribute and shouldn't be modified. The reason it has such an effect is purely an implementation quirk - it modifies the structure we write into the DOM in a way that is essentially invalid for Buttons but makes sense for certain subclasses.


2) Rather than storing an ID on the widget and calling the methods to enable/disable the widget directly, call 'setDisabled()' on the form item. Otherwse you'll get into odd situations where the FormItem is marked as disabled but the button it contains is not - which will have surprising results (for example event handlers may fire if defined at the widget level but not at the FormItem level).

[acarur01]

Really strange that when in standalone case I remove showTitle, the testcase starts working properly but in our system it does not make a difference.

[Isomorphic]

Without being familiar with your application we can't comment extensively.

A couple of suggestions:You may have something else going on due to the explicit widget ID patterns (For example newly created buttons having the same ID as already created once and thus causing them to destroy() with odd side effects).

Ensure you rework the code to enable/disable the formItem rather than the widget directly and if you continue to see it, you may also get some hints from logs in the developer-console.

[acarur01]

Ok. After digging further into the history of why we have this showTitle property, I've found that I had originally added this because without setting showTitle, there is a gap between the button and the field above it. When we set showTitle to false, this gets pushed up (behaviour we would really like to stay when the button is in a dynamic form especially with fields that have showTitle set to false) - I am guessing because formTitlecell isn't being added into the layout.

isc.ClassFactory.defineClass("CwButtonItem", "CanvasItem");isc.CwButtonItem.addProperties({
    init:function () {
        this.canvas = isc.Button.create({
            ID: this.widgetID,
            width: this.width,
            height: this.height,
            title: this.buttonLabel        });
        return this.Super("init", arguments);
    }
    
});


isc.HLayout.create({ID:"hl",members:
[isc.DynamicForm.create({numCols:2, titleOrientation:"top", fields: 
[ {ID:"test1", type:"text",showTitle:false},{widgetID:"mySelect",height: 20, buttonStyle:"button", buttonLabel:" Select ",textAlign:"center",_constructor:"CwButtonItem",disabled: true}, 
  {widgetID:"myCancel",height:20,width: 100, buttonStyle:"button",buttonLabel:" Cancel ",textAlign:"center",_constructor:"CwButtonItem"}
] })]});

[acarur01]

Any other workaround instead of removing showTitle?

[Isomorphic]

There's no problem with showTitle *on a ButtonItem*. You just need to remove showTitle on the Button (where it is not a documented property and interferes with internals). This allows you to have the spacing how you want it.

If you can show us a test case where the original problem (enable/disable) occurs where you have not set showTitle on a *Button* we can take a look.

[acarur01]

Did you run the last testcase I provided? It shows why I cannot simply remove showTitle. I'm asking if there is another solution that you can advise to use.

[Isomorphic]

We're not telling you to remove ButtonItem.showTitle, just Button.showTitle. Button.showTitle has no effect on layout.