PDA

View Full Version : [CLOSED] LinkButton click activation should be on the icon and anchor and NOT on the span



jchau
Jun 12, 2013, 9:28 PM
In the example below, if you click on the white space to the RIGHT of each link button, the click handler is triggered. This is not ideal for usability because for links, users expect the click to only happen when you click on the link. We get numerous complaints from users that the application is "auto" launching things. Took us a long time to track down that they were accidentally clicking the white space in a panel of links, triggering the action. Is it possible to change netlinkbutton to handle the click event of the img and anchor elements instead of the entire span wrapper?



<html><head id="Head1" runat="server">
<title>Test Page </title>
<style type="text/css">
.links .x-btn-text-icon, .links .x-btn-noicon, .links .x-btn
{
padding-bottom: 7px;
white-space:normal;
}

.help-label
{

margin-top: 5px;
height: auto;
}
</style>
</head>
<body>
<script type="text/javascript">

</script>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<ext:Panel ID="Panel1" runat="server" Title="Links" Width="300" Margin="10" BodyPadding="10"
Cls="links">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch">
</ext:VBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Label ID="Label1" Cls="help-label" runat="server" Text="help label that's very long and should wrap onto next line. sadsa dsa dsa da dsad sad sad sad sa fsa ewq rewq dsa f sa fsa dsa dsa dsa dsa dsa da dsa dsa">
</ext:Label>
<ext:LinkButton ID="LinkButton1" runat="server" Text="Link 1 with long text because clients need to name their reports with very description names i dunno why">
</ext:LinkButton>
<ext:LinkButton ID="LinkButton2" runat="server" Text="Link 2" OnClientClick="alert('hi');">
</ext:LinkButton>
<ext:LinkButton ID="LinkButton3" runat="server" Text="Link 3" OnClientClick="alert('hi');">
</ext:LinkButton>
<ext:LinkButton ID="LinkButton4" runat="server" Text="Link 4" OnClientClick="alert('hi');">
</ext:LinkButton>
<ext:LinkButton ID="LinkButton5" runat="server" Text="Link 5" OnClientClick="alert('hi');">
</ext:LinkButton>
</Items>
</ext:Panel>
</form>
</body>
</html>

jchau
Jun 12, 2013, 10:08 PM
Feel free to defer this change request. I was able to workaround it by overriding the onClick method of Ext.net.LinkButton to ignore SPAN clicks.

Baidaly
Jun 13, 2013, 12:26 AM
Hello!

This happens because layout stretches all items inside it. I think overriding of click on span element can be a solution.

We will investigate this.

Daniil
Jun 13, 2013, 4:19 AM
Hi everybody,

I think only an anchor element should be clickable, not an icon. At least, it is the behavior in v1.

The fix fix has been committed to SVN trunk. It will go to the next release (v2.2.1 or v2.3).

Thank you for the report!