Button and OnClientClick?

[Timothy]

Anyway to achieve an OnClientClick with a Coolite button? Would be useful for doing confirmation based things in JavaScript before sending to the server.

Any advice would be greatly appreciated!

Sincerely,
Timothy

[geoffrey.mcgill]

I put together a sample of a dozen different ways to add a Click Listener (event) to the <ext:Button>. The same techniques apply to all Listeners for all Coolite/Ext controls.

http://sandbox.ext.net/Form/Button/ClickListener.aspx

While building the sample above I found a bug in Listener.cs class. The sample may/will not work if you are trying to run the code using version 0.5.1 (or earlier). If you're building from source the bug is an easy fix to the Regex pattern in the .IsIDToken Method within Listern.cs (approx line 288).

Old

internal bool IsIDToken(string value)
{
    return (new Regex(@"({)([\w}]+)(})").Matches(value).Count == 1);
}

New

internal bool IsIDToken(string value)
{
    return (new Regex(@"^({)([\w}]+)(})").Matches(value).Count == 1);
}

The only difference is the added caret "^" at the start of the Regex Pattern.

Hope this helps.

[geoffrey.mcgill]

I should have posted that probably the easiest way to add a Click Listener is just inline.

Example

<ext:Button ID="Button1" runat="server" Text="Click Me #1" AutoPostBack="false">
    <Listeners>
        <Click Handler="Ext.Msg.alert('Confirm', 'You Clicked Button1');" />
    </Listeners>
</ext:Button>

Hope this helps.

[Timothy]

Great, I didn't realize about the Listeners, I guess that's what makes this forum so useful ;)

Sincerely,
Timothy

[Timothy]

What about using a Button Listener 'Click' event to cancel a post back event?

For instance something like:

<asp:Button runat="server" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this?');" />

Cheers,
Timothy

[jumbot]

For Example

            <ext:Button ID="Button1" runat="server" Text="Delete" AutoPostBack="false">
                <Listeners>
                    <Click Handler="Ext.Msg.confirm('Confirm', 'Are you sure you want to delete this?',function(btn){if(btn=='yes')window.location.href='Delete.aspx';});" />
                </Listeners>
            </ext:Button>

[geoffrey.mcgill]

Hi Timothy,

As noted by jumbot earlier (thanks jumbot!), you would add the JavaScript confirmation to the <Click> Listener.

All the controls in the Coolite Toolkit incorporate a series of Listeners which "listen" for various JavaScript events to fire on the client.

To reproduce the exact same functionality in <ext:Button> as <asp:Button> you would add the confirm script to the Handler of the <Click> Listener.

Example

<ext:Button ID="Button1" Handler="" runat="server" &#111;nclick="Button1_Click" Text="Submit">
    <Listeners>
        <Click Handler="return confirm('Are you sure you want to delete this?');" />
    </Listeners>
</ext:Button>

You can add the Listener several different ways and I outlined above. The following forum post also discusses the similar OnClientClick topic, see http://forums.ext.net/showthread.php?postid=587.aspx

I think I might add an OnClientClick property to <ext:Button> just to avoid any future inconvenience. Although, under the covers it would still just add a Click Listener.

Hope this helps.

[geoffrey.mcgill]

Ok, I added the OnClientClick property to <ext:Button>.

Example

<ext:Button 
    runat="server" 
    Text="Submit" 
    &#111;nclick="Button1_Click" 
    OnClientClick="return confirm('Are you sure you want to delete this?');" 
    />

This new feature has been checked into SVN and will be available with the next release (v0.5.2).

Hope this helps.

[jumbot]

Can Use a 'LinkButton' when you want to submit after confirm!

            <ext:ScriptManager ID="ScriptManager1" runat="server">
            </ext:ScriptManager>
            <ext:Button ID="Button1" Handler="" runat="server" Text="Test" AutoPostBack="false">
                <Listeners>
                    <Click Handler="Ext.Msg.confirm('confirm', 'Are you sure you want to input OK?',function(btn){if(btn=='yes')LinkButton1.click();})" />
                </Listeners>
            </ext:Button>
            <asp:LinkButton ID="LinkButton1" runat="server" &#111;nclick="LinkButton1_Click"></asp:LinkButton>
            <ext:TextField ID="TextField1" runat="server"></ext:TextField>

[Timothy]

geoffrey.mcgill (6/14/2008)Ok, I added the OnClientClick property to <ext:Button>.

Example

<ext:Button 
    runat="server" 
    Text="Submit" 
    &#111;nclick="Button1_Click" 
    OnClientClick="return confirm('Are you sure you want to delete this?');" 
    />

This new feature has been checked into SVN and will be available with the next release (v0.5.2).

Hope this helps.

I guess there is no way to the the Ext.Msg namespace to wait for the users response before continuing the post back?

Cheers,
Timothy