[CLOSED] Indicator Icon Listener and Directevent

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Indicator Icon Listener and Directevent

    Hi,
    Is it possible for you guys to quickly add a listener and directevent to IndicatorIcon. Small stuff but immensely useful.

    I presently have it functional, but I use it in lot of places, so thought it would be good to have an inbuilt listener.

    Thanks!
    Last edited by Daniil; Nov 10, 2011 at 7:08 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Agreed, it would be a useful option.

    We will consider it to implement.
  3. #3
    Anytime Sooner? I am waiting to implement something in my code. It will save me a lot of time if you add this feature. And am sure it is not a v time consuming task. Should'nt take you guys more than few mins. :)
  4. #4
    Can you describe behaviour of that event? At which moments it should be fired and which paramters are required in that event handler
  5. #5
    Click should be enough. parameters could be the field containing the indicator. Thats it. May be indicatorEl.
  6. #6
    What is the Use-Case for adding a Click event to the Indicator Icon?
    Geoffrey McGill
    Founder
  7. #7
    I am trying to have a help icon adjacent to every field. The desktop application which I am trying to convert has it, so I hv to replicate.

    Also where there is no help, a user can enter additional information by adding a note. Here the user clicks on icon and to a specified action.

    Since I wanted this on the right outside textbox I thought of using Indicator Icon.

    I tried using Icon for text field with custom css and works perfectly for textfield. But icon does'nt support tooltip. And there are lots of fields where I want to use this apart from textfield, including Radio Button, DisplayField, Label, etc. and all of these dont hv a Icon property but all the fields have Indicator Icon. So I thought its better to have Indicator icon with clickable event.
  8. #8
    @Geoff: Are you guys adding the event?

    While you add, can you tell me what I am doing wrong in following code. The following code shows the alert box when IndicatorIcon clicked for all fields apart from the one in compositefield.
           Ext.override(Ext.form.Field, {
                             indicatorId: new Date().getTime(),
                             listeners: {
                                 afterRender: function (o) {
                                    if(o.indicatorEl)
                                     o.indicatorEl.on('click', function () { alert(o.indicatorId); });
                                 }
                             }
                         });
    
    <ext:Container Layout="FormLayout" runat="server">
        <Items>
               <ext:TextField runat="server" Width="200" IndicatorIcon="Accept" FieldLabel="Test" ID="TextField4">
                   
                   </ext:TextField> 
                <ext:CompositeField ID="CompositeField1" runat="server" IndicatorIcon="Accept">
                    <Items>
                        <ext:TextField runat="server" IndicatorIcon="TagBlueAdd" Width="200" FieldLabel="Test" Margins="0 25 0 0"
                            ID="TextField1">
                        </ext:TextField>
                        <ext:TextField runat="server" IndicatorIcon="TagBlueAdd" Width="200" FieldLabel="Test" Margins="0 25 0 0"
                            ID="TextField2">
                        </ext:TextField>
                        <ext:TextField runat="server" IndicatorIcon="TagBlueAdd" Width="200" FieldLabel="Test" Margins="0 25 0 0"
                            ID="TextField3">
                        </ext:TextField>
                    </Items>
                </ext:CompositeField>
            </Items>
        </ext:Container>
  9. #9
    Divs with indicator icons are overlapped with a "hbox" div.

    Please look at the working example.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        <script type="text/javascript">
            Ext.override(Ext.form.Field, {
                listeners : {
                    afterRender : function (field) {
                        if (field.indicatorEl)
                            field.indicatorEl.on('click', function () {
                                alert(this.id); 
                            },
                            field);
                        }
                }
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Container Layout="FormLayout" runat="server">
                <Items>
                    <ext:TextField
                        ID="TextField1"
                        runat="server" 
                        Width="200" 
                        IndicatorIcon="Accept" 
                        FieldLabel="Test">
                    </ext:TextField>
                    <ext:CompositeField
                        ID="CompositeField1"
                        runat="server" 
                        IndicatorIcon="Accept" 
                        FieldLabel="Test"
                        AnchorHorizontal="-20">
                        <Items>
                            <ext:Container 
                                runat="server" 
                                Layout="FormLayout" 
                                Width="200"
                                HideLabels="true">
                                <Items>
                                    <ext:TextField
                                        ID="TextField2"
                                        runat="server"
                                        AnchorHorizontal="-20" 
                                        IndicatorIcon="TagBlueAdd" />    
                                    </Items>
                            </ext:Container>
                            <ext:Container 
                                runat="server" 
                                Layout="FormLayout" 
                                Width="200"
                                HideLabels="true">
                                <Items>
                                    <ext:TextField
                                        ID="TextField3"
                                        runat="server"
                                        AnchorHorizontal="-20" 
                                        IndicatorIcon="TagBlueAdd" />    
                                    </Items>
                            </ext:Container>
                            <ext:Container 
                                runat="server" 
                                Layout="FormLayout" 
                                Width="200"
                                HideLabels="true">
                                <Items>
                                    <ext:TextField
                                        ID="TextField4"
                                        runat="server"
                                        AnchorHorizontal="-20" 
                                        IndicatorIcon="TagBlueAdd" />    
                                    </Items>
                            </ext:Container>
                        </Items>
                    </ext:CompositeField>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
  10. #10
    At the end of all I think that this event would be useful.

    The feature ticket has been created.
    https://extnet.lighthouseapp.com/pro...es/tickets/104

    Added to SVN, revision #3763.

    There are two arguments of an IndicatorIconClick: item and indicatorEl.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void IndicatorIconClick(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("DirectEvent", e.ExtraParams["id"]).Show();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Container Layout="FormLayout" runat="server">
                <Items>
                    <ext:TextField
                        ID="TextField1"
                        runat="server" 
                        Width="200" 
                        IndicatorIcon="Accept" 
                        FieldLabel="Test">
                        <Listeners>
                            <IndicatorIconClick Handler="alert('Listener : ' + this.id );" />
                        </Listeners>
                        <DirectEvents>
                            <IndicatorIconClick OnEvent="IndicatorIconClick">
                                <ExtraParams>
                                    <ext:Parameter Name="id" Value="this.id" Mode="Raw" />
                                </ExtraParams>
                            </IndicatorIconClick>
                        </DirectEvents>
                    </ext:TextField>
                    <ext:CompositeField
                        ID="CompositeField1"
                        runat="server" 
                        FieldLabel="Test">
                        <Items>
                            <ext:Container 
                                runat="server" 
                                Layout="FormLayout" 
                                Width="200"
                                HideLabels="true">
                                <Items>
                                    <ext:TextField
                                        ID="TextField2"
                                        runat="server"
                                        AnchorHorizontal="-20" 
                                        IndicatorIcon="TagBlueAdd">
                                        <Listeners>
                                            <IndicatorIconClick Handler="alert('Listener : ' + this.id);" />
                                        </Listeners>
                                        <DirectEvents>
                                            <IndicatorIconClick OnEvent="IndicatorIconClick">
                                                <ExtraParams>
                                                    <ext:Parameter Name="id" Value="this.id" Mode="Raw" />
                                                </ExtraParams>
                                            </IndicatorIconClick>
                                        </DirectEvents>
                                    </ext:TextField> 
                                    </Items>
                            </ext:Container>
                            <ext:Container 
                                runat="server" 
                                Layout="FormLayout" 
                                Width="200"
                                HideLabels="true">
                                <Items>
                                    <ext:TextField
                                        ID="TextField3"
                                        runat="server"
                                        AnchorHorizontal="-20" 
                                        IndicatorIcon="TagBlueAdd">
                                        <Listeners>
                                            <IndicatorIconClick Handler="alert('Listener : ' + this.id);" />
                                        </Listeners>
                                        <DirectEvents>
                                            <IndicatorIconClick OnEvent="IndicatorIconClick">
                                                <ExtraParams>
                                                    <ext:Parameter Name="id" Value="this.id" Mode="Raw" />
                                                </ExtraParams>
                                            </IndicatorIconClick>
                                        </DirectEvents>        
                                    </ext:TextField> 
                                </Items>
                            </ext:Container>
                            <ext:Container 
                                runat="server" 
                                Layout="FormLayout" 
                                Width="200"
                                HideLabels="true">
                                <Items>
                                    <ext:TextField
                                        ID="TextField4"
                                        runat="server"
                                        AnchorHorizontal="-20" 
                                        IndicatorIcon="TagBlueAdd">
                                        <Listeners>
                                            <IndicatorIconClick Handler="alert('Listener : ' + this.id);" />
                                        </Listeners>
                                        <DirectEvents>
                                            <IndicatorIconClick OnEvent="IndicatorIconClick">
                                                <ExtraParams>
                                                    <ext:Parameter Name="id" Value="this.id" Mode="Raw" />
                                                </ExtraParams>
                                            </IndicatorIconClick>
                                        </DirectEvents>        
                                    </ext:TextField>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:CompositeField>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
    Last edited by Daniil; Nov 10, 2011 at 3:28 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] DirectEvent/Listener on TextField as you type
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 15, 2012, 4:47 PM
  2. Replies: 2
    Last Post: Jan 18, 2012, 5:24 PM
  3. [CLOSED] Indicator Icon Does'nt show in CompositeField
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Nov 10, 2011, 4:01 PM
  4. Replies: 19
    Last Post: Oct 21, 2011, 1:56 PM
  5. [CLOSED] Need RowEditor ValidateEdit Listener and DirectEvent Example
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 24, 2010, 3:28 AM

Tags for this Thread

Posting Permissions