[CLOSED] How to select and deselect TagLabel from javascript?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to select and deselect TagLabel from javascript?

    Hi

    I have tried this way:

    #{TagLabelHoras}.getSelected().clearSelections();
    This is TabLabel:

                                            <ext:TagLabel ID="TagLabelHoras" runat="server" SelectionMode="Single" TrackOver="true">
                                                <Tags>
                                                    <ext:Tag Text="00" />
                                                    <ext:Tag Text="01" />
                                                    <ext:Tag Text="02" />
                                                    <ext:Tag Text="03" />
                                                    <ext:Tag Text="04" />
                                                    <ext:Tag Text="05" />
                                                    <ext:Tag Text="06" />
                                                    <ext:Tag Text="07" />
                                                    <ext:Tag Text="08" />
                                                    <ext:Tag Text="09" />
                                                    <ext:Tag Text="10" />
                                                    <ext:Tag Text="11" />
                                                    <ext:Tag Text="12" />
                                                    <ext:Tag Text="13" QTip="Es la 1" />
                                                    <ext:Tag Text="14" QTip="Es la 2" />
                                                    <ext:Tag Text="15" QTip="Es la 3" />
                                                    <ext:Tag Text="16" QTip="Es la 4" />
                                                    <ext:Tag Text="17" QTip="Es la 5" />
                                                    <ext:Tag Text="18" QTip="Es la 6" />
                                                    <ext:Tag Text="19" QTip="Es la 7" />
                                                    <ext:Tag Text="20" QTip="Es la 8" />
                                                    <ext:Tag Text="21" QTip="Es la 9" />
                                                    <ext:Tag Text="22" QTip="Es la 10" />
                                                    <ext:Tag Text="23" QTip="Es la 11" Closable="false" />
                                                </Tags>
                                                <Listeners>
                                                    <Click Handler="selectTime();" />
                                                </Listeners>
                                            </ext:TagLabel>
    Thank you.
    Last edited by Daniil; Aug 22, 2014 at 11:15 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi @Quico,

    As far as I can see there is no API to manage selection programmatically.

    I can suggest the following:
    var tag = App.TagLabelID.tags[7];
    
    App.TagLabelID.onclick(tag.el, {
        getTarget: Ext.emptyFn
    })
  3. #3
    Hi Daniil.

    I've got this error.

    Click image for larger version. 

Name:	Error onClick.PNG 
Views:	18 
Size:	21.3 KB 
ID:	14521
  4. #4
    Have you replaced "TagLabelID" with "TagLabelHoras"?
  5. #5
    I did it

     var thoras = #{TagLabelHoras}.tags;
                for (var i = 0; i < thoras.length; i++) {
                    var tag = thoras[i];                 
                    thoras.onclick(tag.el, {
                        getTarget: Ext.emptyFn
                    })
                }
  6. #6
    Please provide a full test case.
  7. #7
    Ok:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucTime.ascx.cs" Inherits="SIRTIS.ControlUsuarios.ucTime" %>
    
    <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript">
            var selectTime = function (){
                var hour = Ext.Array.pluck(#{TagLabelHoras}.getSelected(), 'text').join(',');
                var minute = Ext.Array.pluck(#{TagLabelMinutos}.getSelected(), 'text').join(',');
                
                var datoHour = Ext.util.Format.number(hour, '0');
                var datoMinute = Ext.util.Format.number(minute, '0');
    
    
                if(#{htimeFormat}.getValue() == "12")
                {
                    #{AMPM}.setValue("AM");
                    if(datoHour > 11)
                    {
                        #{AMPM}.setValue("PM");
                    }
    
                    if(datoHour > 12)
                    {
                        datoHour -= 12;
                    }
    
                    if(datoHour == 0)
                    {
                        datoHour = 12;
                    }
                }
    
                if(#{hshowLeadingZero}.getValue() == "true")
                {
                    #{Horas}.setValue(Ext.String.leftPad(datoHour,2,'0'));
                }
                else
                {
                    #{Horas}.setValue(datoHour.toString());
                }
    
                if(minute != "")
                {
                    if(#{hshowMinutesLeadingZero}.getValue() == "true")
                    {
                        #{Minutos}.setValue(Ext.String.leftPad(datoMinute,2,'0'));
                    }
                    else 
                    {
                        #{Minutos}.setValue(datoMinute.toString());
                    }
                }
    
                var permitirClickDado = 1;
                if(#{hshowHours}.getValue() == "true" && #{hshowMinutes}.getValue() == "true")
                {
                    permitirClickDado = 2;
                }
    
                if(#{clickDado}.getValue() == permitirClickDado)
                {
                    #{MenuReloj}.hide();
                }
            };
            
            var horaValorMinMax = function(field, min, max, isLeadingZero){
                var value = Ext.util.Format.number(field.getValue(), '0');
                var minimo = Ext.util.Format.number(min, '0');
                var maximo = Ext.util.Format.number(max, '0');
                
                //var formato = #{hFormat}.getValue();            
                //var fechaMinima = Ext.util.Format.date('Y/m/d ' + #{hMinTime}.getValue(), '2014/01/01 ' + formato);            
                //alert(fechaMinima);
    
                if(value < minimo)
                {
                    value = minimo;
                }
                else if(value > maximo)
                {
                    value = maximo;
                }
                            
                if(isLeadingZero == "true")
                {
                    field.setValue(Ext.String.leftPad(value,2,'0'));
                }
                else
                {
                    field.setValue(value.toString());                
                }
            };
    
            var valorMinMaxMimutos = function(field, min, max, minHora, maxHora, isLeadingZero){
                var value = Ext.util.Format.number(field.getValue(), '0');
                var minimo = Ext.util.Format.number(min, '0');
                var maximo = Ext.util.Format.number(max, '0');
                            
                if(value < minimo)
                {
                    value = minimo;
                }
                else if(value > maximo)
                {
                    value = maximo;
                }
    
                //Para buscar los minutos m?ximo  
                var horasMaximaValor = Ext.util.Format.number(#{Horas}.maxValue, '0');
                var horaDato = Ext.util.Format.number(#{Horas}.getValue(), '0');
                if( horasMaximaValor === horaDato)
                {
                    //minimo = Ext.util.Format.number(minHora, '0');
                    maximo = Ext.util.Format.number(maxHora, '0');
                    if(value > maximo)
                    {
                        value = maximo;
                        //if(value < minimo){
                        //    value = minimo;
                        //}else if(value > maximo){
                        //    value = maximo;
                        //}
                    }
                }
                            
                if(isLeadingZero == "true")
                {
                    field.setValue(Ext.String.leftPad(value,2,'0'));
                }
                else
                {
                    field.setValue(value.toString());                
                }            
            };
    
                var deselectTime = function(tagHoras, tagMinutos){
                    //var sel = tagHoras.getSelected()[0];
                    //tagHoras.remove(sel);
                    //getSelection()[0]
    
                    //tagHoras.getSelectionModel().clearSelections();
                    //#{TagLabelHoras}.deleteSelected();
                    //var thoras = tagHoras.tags;
                    //for (var i = 0; i < thoras.length; i++) {                
                    //    //thoras[i].setSelected(false);
                    //    //thoras[i].el.select(false);
                    //    thoras[i].setValue(false);
                    //}
    
                    //tagHoras.tags[0].el.setDisabled(true);
    
                    var thoras = #{TagLabelHoras}.tags;
                    for (var i = 0; i < thoras.length; i++) {
                        var tag = thoras[i];                 
                        thoras.onclick(tag.el, {
                            getTarget: Ext.emptyFn
                        })
                    }
                    //p=p;
                };
    
                //var selectTime = function(){            
                //    var thoras = #{TagLabelHoras}.tags;
                //    for (var i = 0; i < thoras.length; i++) {
                //        var tag = thoras[0]; 
                //        thoras.onclick(tag.el, {
                //            getTarget: Ext.emptyFn
                //        })
                //    }
                //};
    
                //var validateKeyDown = function (field, e) {
                //    //if (event.keyCode == e.NUM_MINUS || event.keyCode == e.NUM_PLUS) {
                //    //    e.stopEvent();
                //    //}
                //#{Minutos}.setValue(field.getValue());
                //};
        </script>
    </ext:XScript>
    
    <ext:Hidden runat="server" ID="hFormat" Text="HH:mm tt" />              <%--Format--%>
    <ext:Hidden runat="server" ID="htimeFormat" Text="12" />                <%--timeFormat 12 o 24 hours--%>
    <ext:Hidden runat="server" ID="hMinTime" Text="12:00 AM" />             <%--Set the minimum time selectable by the user--%>
    <ext:Hidden runat="server" ID="hMaxTime" Text="11:59 PM" />             <%--Set the maxime time selectable by the user--%>
    <ext:Hidden runat="server" ID="hSelectedTime" Text="" />                <%--Used as default time when input field is empty or for inline timePicker
                                                                                (set to 'now' for the current time, '' for no highlighted time,
                                                                                default value: now)--%>
    <ext:Hidden runat="server" ID="hshowHours" Text="true" />               <%--Define if the hours section is displayed or not. Set to false to get a minute only dialog--%>
    <ext:Hidden runat="server" ID="hshowMinutes" Text="true" />             <%--Define if the minutes section is displayed or not. Set to false to get an hour only dialog--%>
    <ext:Hidden runat="server" ID="hshowSeconds" Text="false" />             <%--Define if the seconds section is displayed or not. Set to false to get an hour only dialog--%>
    
    <ext:Hidden runat="server" ID="htimeSeparator" Text=":" />              <%--The character to use to separate hours and minutes. (default: ':')--%>
    <ext:Hidden runat="server" ID="hshowLeadingZero" Text="true" />         <%--Define whether or not to show a leading zero for hours < 10. (default: true)--%>
    <ext:Hidden runat="server" ID="hshowMinutesLeadingZero" Text="true" />  <%--Define whether or not to show a leading zero for minutes < 10. (default: true)--%>
    <ext:Hidden runat="server" ID="hshowSecondsLeadingZero" Text="true" />  <%--Define whether or not to show a leading zero for seconds < 10. (default: true)--%>
    <ext:Hidden runat="server" ID="hshowPeriod" Text="true" />             <%--Define whether or not to show AM/PM with selected time. (default: false)--%>
    <ext:Hidden runat="server" ID="hshowPeriodLabels" Text="true" />        <%--Define if the AM/PM labels on the left are displayed. (default: true)--%>
    <ext:Hidden runat="server" ID="hperiodSeparator" Text=" " />            <%--The character to use to separate the time from the time period.--%>
    <ext:Hidden runat="server" ID="hshowOn" Text="focus" />                 <%--Define when the timepicker is shown.
                                                                                'focus': when the input gets focus, 'button' when the button trigger element is clicked,
                                                                                'both': when the input gets focus and when the button is clicked.--%>
    
    <%-- Localization--%>
    <ext:Hidden runat="server" ID="hhourText" Text="Horas" />               <%--Define the locale text for "Hours"--%>
    <ext:Hidden runat="server" ID="hminuteText" Text="Minutos" />           <%--Define the locale text for "Minute"--%>
    
    <%-- buttons--%>
    <ext:Hidden runat="server" ID="hshowCloseButton" Text="true" />         <%--shows an OK button to confirm the edit--%>
    <ext:Hidden runat="server" ID="hcloseButtonText" Text="Hecho" />        <%--Text for the confirmation button (ok button)--%>
    <ext:Hidden runat="server" ID="hshowNowButton" Text="true" />           <%--Shows the 'now' button--%>
    <ext:Hidden runat="server" ID="hnowButtonText" Text="Ahora" />          <%--Text for the now button--%>
    <ext:Hidden runat="server" ID="hshowDeselectButton" Text="true" />      <%--Shows the deselect time button--%>
    <ext:Hidden runat="server" ID="hdeselectButtonText" Text="Limpiar" />   <%--Text for the deselect button--%>
    
    <ext:Toolbar ID="Toolbar1" runat="server" Height="30" Border="true" DefaultAnchor="100%">
        <Items>
            <ext:NumberField ID="clickDado" runat="server" Hidden="true"  />
            <ext:TextField runat="server" ID="Horas" MaskRe="[0-9]" Width="25" SelectOnFocus="true" Truncate="true" EnforceMaxLength="true"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                AllowBlank="false" BlankText="La hora" MaxLength="2" MaxLengthText="2" MsgTarget="Qtip" Margins="0 0 0 0" >            
                <Listeners>
                    <Blur Handler="horaValorMinMax(this,this.minValue,this.maxValue,#{hshowLeadingZero}.getValue());"  />
                </Listeners>
                <CustomConfig>
                    <ext:ConfigItem Name="minValue" Value="01" />
                    <ext:ConfigItem Name="maxValue" Value="12" />
                </CustomConfig>
            </ext:TextField>
            <ext:DisplayField ID="separadorHoras" runat="server" Text="<b>:</b>" Width="7" MarginSpec="0 0 0 0" EnforceMaxLength="true"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;" />
            <ext:TextField runat="server" ID="Minutos" MaskRe="[0-9]" Width="25" SelectOnFocus="true"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                AllowBlank="false" BlankText="Los minutos" MaxLength="2" MsgTarget="Qtip" Margins="0 0 0 0"  >            
                <Listeners>
                    <Blur Handler="valorMinMaxMimutos(this,this.minValue,this.maxValue, this.minHoraValue,this.maxHoraValue,#{hshowMinutesLeadingZero}.getValue());"  />
                </Listeners>
                <CustomConfig>
                    <ext:ConfigItem Name="minValue" Value="00" />
                    <ext:ConfigItem Name="maxValue" Value="59" />
                    <ext:ConfigItem Name="minHoraValue" Value="00" />
                    <ext:ConfigItem Name="maxHoraValue" Value="59" />
                </CustomConfig>
            </ext:TextField>
            <ext:DisplayField ID="separadorMinutos" runat="server" Text="<b>:</b>" Width="7" MarginSpec="0 0 0 0" Hidden="true"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;" />
            <ext:TextField runat="server" ID="Segundos" MaskRe="[0-9]" Width="25" SelectOnFocus="true" Hidden="true" EnforceMaxLength="true"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                AllowBlank="false" BlankText="Los segundos" MaxLength="2" MsgTarget="Qtip" Margins="0 0 0 0" />
            <ext:DisplayField ID="separadorAMPM" runat="server" Text=" " MarginSpec="0 0 0 0"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;" />
            <ext:ComboBox ID="AMPM" runat="server" Width="30" QueryMode="Local" TypeAhead="true" HideTrigger="true"
                FieldStyle="background: transparent none !important; border-top-width: 0px !important; border-bottom-width: 0px !important;border-left-width: 0px !important;border-right-width: 0px !important;"
                MarginSpec="0 0 0 0">
                <%--MaskRe="[A,P,M]"--%>
                <Items>
                    <ext:ListItem Text="PM" Value="PM" />
                    <ext:ListItem Text="AM" Value="AM" />
                </Items>
                <SelectedItems>
                    <ext:ListItem Value="AM" />
                </SelectedItems>
            </ext:ComboBox>        
            <ext:ToolbarFill />
            <ext:Button ID="Button1" runat="server" Width="20" Height="25">
                <Menu>
                    <ext:Menu ID="MenuReloj" runat="server" EnableKeyNav="false" ShowSeparator="false" Plain="true" RenderToForm="true" AutoWidth="true"
                        BodyStyle="background-color: #A0522D !important; color: #000000 !important;" HeaderPosition="Left">
                        <Items>
                            <ext:Container ID="contenedorDisplay" runat="server" Layout="HBoxLayout" Width="290">
                                <Items>
                                    <ext:Button ID="btnDisplayHora" runat="server" Text="Horas" Height="30" Width="195" UI="Primary" />
                                    <ext:Button ID="btnDisplayMinutos" runat="server" Text="Minutos" Height="30" Width="85" MarginSpec="0 0 0 5" UI="Info" />
                                </Items>
                            </ext:Container>
                            <ext:Container ID="contenedorHoraMinutos" runat="server" Layout="HBoxLayout" Width="290">
                                <Items>
                                    <ext:Container ID="contenedorAMPM" runat="server" Layout="VBoxLayout" Width="20">
                                        <Items>
                                            <ext:DisplayField ID="DisplayField3" runat="server" Text="AM" MarginSpec="10 0 0 0" BodyStyle="color: #000000 !important;" />
                                            <ext:DisplayField ID="DisplayField4" runat="server" Text="PM" MarginSpec="20 0 0 0" BodyStyle="color: #000000 !important;" />
                                        </Items>
                                    </ext:Container>
                                    <ext:Container ID="contenedorHoras" runat="server" Layout="ColumnLayout" Width="180">
                                        <Items>
                                            <ext:TagLabel ID="TagLabelHoras" runat="server" SelectionMode="Single" TrackOver="true">
                                                <Tags>
                                                    <ext:Tag Text="00" />
                                                    <ext:Tag Text="01" />
                                                    <ext:Tag Text="02" />
                                                    <ext:Tag Text="03" />
                                                    <ext:Tag Text="04" />
                                                    <ext:Tag Text="05" />
                                                    <ext:Tag Text="06" />
                                                    <ext:Tag Text="07" />
                                                    <ext:Tag Text="08" />
                                                    <ext:Tag Text="09" />
                                                    <ext:Tag Text="10" />
                                                    <ext:Tag Text="11" />
                                                    <ext:Tag Text="12" />
                                                    <ext:Tag Text="13" QTip="Es la 1" />
                                                    <ext:Tag Text="14" QTip="Es la 2" />
                                                    <ext:Tag Text="15" QTip="Es la 3" />
                                                    <ext:Tag Text="16" QTip="Es la 4" />
                                                    <ext:Tag Text="17" QTip="Es la 5" />
                                                    <ext:Tag Text="18" QTip="Es la 6" />
                                                    <ext:Tag Text="19" QTip="Es la 7" />
                                                    <ext:Tag Text="20" QTip="Es la 8" />
                                                    <ext:Tag Text="21" QTip="Es la 9" />
                                                    <ext:Tag Text="22" QTip="Es la 10" />
                                                    <ext:Tag Text="23" QTip="Es la 11" Closable="false" />
                                                </Tags>
                                                <Listeners>
                                                    <Click Handler="#{clickDado}.setValue((#{clickDado}.getValue() + 1)); selectTime();" />
                                                </Listeners>
                                            </ext:TagLabel>
                                        </Items>
                                    </ext:Container>
                                    <ext:Container ID="contenedorMinutos" runat="server" Layout="ColumnLayout" Width="100">
                                        <Items>
                                            <ext:TagLabel ID="TagLabelMinutos" runat="server" SelectionMode="Single" TrackOver="true">
                                                <Tags>
                                                    <ext:Tag Text="00" />
                                                    <ext:Tag Text="05" />
                                                    <ext:Tag Text="10" />
                                                    <ext:Tag Text="15" />
                                                    <ext:Tag Text="20" />
                                                    <ext:Tag Text="25" />
                                                    <ext:Tag Text="30" />
                                                    <ext:Tag Text="35" />
                                                    <ext:Tag Text="40" />
                                                    <ext:Tag Text="45" />
                                                    <ext:Tag Text="50" />
                                                    <ext:Tag Text="55" Closable="false" />
                                                </Tags>
                                                <Listeners>
                                                    <Click Handler="#{clickDado}.setValue((#{clickDado}.getValue() + 1)); selectTime();" />
                                                </Listeners>
                                            </ext:TagLabel>
                                        </Items>
                                    </ext:Container>
                                </Items>
                        </ext:Container>
                            <ext:Toolbar ID="ToolbarBotones" runat="server" Height="30" Border="true" Flex="1" MarginSpec="5 0 0 0">
                                <items>
                                    <ext:Button ID="btnNow" runat="server" Text="<b>Ahora</b>" >
                                        <DirectEvents>
                                            <Click OnEvent="setNow" />
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:Button ID="btnClear" runat="server" Text="Limpiar" 
                                        Handler="#{clickDado}.setValue(0); #{Horas}.reset(); #{Minutos}.reset(); #{Segundos}.reset(); deselectTime(#{TagLabelHoras},#{TagLabelMinutos});" />
                                    <ext:ToolbarFill />
                                    <ext:Button ID="btnDone" runat="server" Text="Hecho" Handler="#{MenuReloj}.hide();" />
                                </items>
                            </ext:Toolbar>
                        </Items>
                        <Listeners>
                            <BeforeShow Handler="#{clickDado}.setValue(0);" />
                        </Listeners>
                    </ext:Menu>
                </Menu>
            </ext:Button>        
        </Items>
    </ext:Toolbar>
    This is code behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    namespace SIRTIS.ControlUsuarios
    {
        public partial class ucTime : System.Web.UI.UserControl
        {
            public string Format
            {
                get { return this.hFormat.Text; }
                set { this.hFormat.Text = value; }
            }
    
            public Int32 timeFormat
            {
                get { return Convert.ToInt32(this.htimeFormat.Text); }
                set {
                    if (value != 12 && value != 24)
                        this.htimeFormat.Text = "12";
                    else
                        this.htimeFormat.Text = value.ToString();
                }
            }
    
            public string MinTime
            {
                get { return this.hMinTime.Text; }
                set { this.hMinTime.Text = value; }
            }
    
            public string MaxTime
            {
                get { return this.hMaxTime.Text; }
                set { this.hMaxTime.Text = value; }
            }
    
            public string SelectedTime
            {
                get { return this.hSelectedTime.Text; }
                set { this.hSelectedTime.Text = value; }
            }
    
            public bool showHours
            {
                get { return Convert.ToBoolean(this.hshowHours.Text); }
                set { this.hshowHours.Text = value.ToString(); }
            }
    
            public bool showMinutes
            {
                get { return Convert.ToBoolean(this.hshowMinutes.Text); }
                set { this.hshowMinutes.Text = value.ToString(); }
            }
    
            public bool showSeconds
            {
                get { return Convert.ToBoolean(this.hshowSeconds.Text); }
                set { this.hshowSeconds.Text = value.ToString(); }
            }
            
            public string timeSeparator
            {
                get { return this.htimeSeparator.Text; }
                set { this.htimeSeparator.Text = value; }
            }
    
            public bool showLeadingZero
            {
                get { return Convert.ToBoolean(this.hshowLeadingZero.Text); }
                set { this.hshowLeadingZero.Text = value.ToString(); }
            }
    
            public bool showMinutesLeadingZero
            {
                get { return Convert.ToBoolean(this.hshowMinutesLeadingZero.Text); }
                set { this.hshowMinutesLeadingZero.Text = value.ToString(); }
            }
    
            public bool showSecondsLeadingZero
            {
                get { return Convert.ToBoolean(this.hshowSecondsLeadingZero.Text); }
                set { this.hshowSecondsLeadingZero.Text = value.ToString(); }
            }
    
            public bool showPeriod
            {
                get { return Convert.ToBoolean(this.hshowPeriod.Text); }
                set { this.hshowPeriod.Text = value.ToString(); }
            }
    
            public bool showPeriodLabels
            {
                get { return Convert.ToBoolean(this.hshowPeriodLabels.Text); }
                set { this.hshowPeriodLabels.Text = value.ToString(); }
            }
    
            public string periodSeparator
            {
                get { return this.hperiodSeparator.Text; }
                set { this.hperiodSeparator.Text = value; }
            }
    
            public string showOn
            {
                get { return this.hshowOn.Text; }
                set { this.hshowOn.Text = value; }
            }
    
            public string hourText
            {
                get { return this.hhourText.Text; }
                set { this.hhourText.Text = value; }
            }
    
            public string minuteText
            {
                get { return this.hminuteText.Text; }
                set { this.hminuteText.Text = value; }
            }
    
            public bool showCloseButton
            {
                get { return Convert.ToBoolean(this.hshowCloseButton.Text); }
                set { this.hshowCloseButton.Text = value.ToString(); }
            }
    
            public string closeButtonText
            {
                get { return this.hcloseButtonText.Text; }
                set { this.hcloseButtonText.Text = value; }
            }
    
            public bool showNowButton
            {
                get { return Convert.ToBoolean(this.hshowNowButton.Text); }
                set { this.hshowNowButton.Text = value.ToString(); }
            }
    
            public string nowButtonText
            {
                get { return this.hnowButtonText.Text; }
                set { this.hnowButtonText.Text = value; }
            }
    
            public bool showDeselectButton
            {
                get { return Convert.ToBoolean(this.hshowDeselectButton.Text); }
                set { this.hshowDeselectButton.Text = value.ToString(); }
            }
    
            public string deselectButtonText
            {
                get { return this.hdeselectButtonText.Text; }
                set { this.hdeselectButtonText.Text = value; }
            }
    
            protected void Page_Load(object sender, EventArgs e)
            {
                             
            }
    
            private void Page_Init(object sender, EventArgs e)
            {
                btnDisplayHora.Text = hourText;
                btnDisplayMinutos.Text = minuteText;
    
                btnDone.Text = closeButtonText;
                btnNow.Text = nowButtonText;
                btnClear.Text = deselectButtonText;
    
                string minMax;
                if (Format.ToUpper().IndexOf("T") != -1)
                {   
                    minMax = MinTime.Substring(0, MinTime.IndexOf(this.timeSeparator));
                    Horas.Set("minValue", minMax);
                    minMax = MaxTime.Substring(0, MaxTime.IndexOf(this.timeSeparator));
                    Horas.Set("maxValue", minMax);
                }
    
                if (Format.ToUpper().IndexOf("M") != -1)
                {
                    int startPosition = Format.ToUpper().IndexOf("M");
                    minMax = MinTime.Substring(startPosition, 2);
                    Minutos.Set("minHoraValue", minMax);
                    minMax = MaxTime.Substring(startPosition, 2);
                    Minutos.Set("maxHoraValue", minMax);
                }
                
                if (!showPeriodLabels)
                {
                    AMPM.Hide();
                    separadorAMPM.Hide();
                }
                else
                    separadorAMPM.Text = periodSeparator;
    
                if (!showPeriod)
                {
                    separadorHoras.Hide();
                    separadorMinutos.Hide();
                }
                else
                {
                    separadorHoras.Text = timeSeparator;
                    separadorMinutos.Text = timeSeparator;
                }
    
    
                if (!showCloseButton && !showNowButton && !showDeselectButton)
                {
                    ToolbarBotones.Hide();
                    btnNow.Hide();
                    btnClear.Hide();
                    btnDone.Hide();
                }
                else
                {
                    if(!showCloseButton)
                        btnDone.Hide();
                    if (!showNowButton)
                        btnNow.Hide();
                    if (!showDeselectButton)
                        btnClear.Hide();
                }
    
                if (!showSeconds)
                {
                    separadorMinutos.Hide();
                    Segundos.Hide();
                }
                else
                {
                    separadorMinutos.Show();
                    Segundos.Show();
                }
    
                if (!showHours)
                {
                    Horas.Hide();
                    separadorHoras.Hide();
                    btnDisplayHora.Hide();
                    separadorAMPM.Hide();
                    AMPM.Hide();
                    contenedorAMPM.Hide();
                    contenedorHoras.Hide();
    
                    if (showMinutes)
                    {
                        int reducir = Convert.ToInt32(contenedorMinutos.Width.ToString().Replace("px", ""));
                        contenedorDisplay.Width = reducir;
                        contenedorHoraMinutos.Width = reducir;
                    }
                }
    
                if (!showMinutes)
                {
                    Minutos.Hide();
                    separadorMinutos.Hide();
                    Segundos.Hide();
                    btnDisplayMinutos.Hide();
                    contenedorMinutos.Hide();
    
                    if (showHours)
                    {
                        int reducir = Convert.ToInt32(contenedorHoras.Width.ToString().Replace("px", "")) + Convert.ToInt32(contenedorAMPM.Width.ToString().Replace("px", ""));
                        contenedorDisplay.Width = reducir;
                        contenedorHoraMinutos.Width = reducir;
                    }
                }
                            
                if (SelectedTime != "")
                    SetValue(SelectedTime);            
    
            }
    
            protected void setNow(object sender, DirectEventArgs e)
            {
                MenuReloj.Hide();
                SetValue(DateTime.Now);
            }
    
            [DirectMethod]
            public void SetValue(string hora){
    
                TimeSpan separar = StringToTimeSpan(hora);
                setTime(separar);
            }
    
            [DirectMethod]
            public void SetValue(DateTime hora)
            {
                TimeSpan separar = hora.TimeOfDay;
                setTime(separar);
            }
    
            private void setTime(TimeSpan time)
            {
                int hora;
                int minutos = time.Minutes;
                int segundos = time.Seconds;
                if (timeFormat == 12)
                {
                    hora = time.Hours > 12 ? time.Hours - 12 : time.Hours;
                    AMPM.Value = time.Hours > 11 ? "PM" : "AM";
                }else
                {
                    hora = time.Hours;
                }
    
                if (showHours)
                    Horas.Text = showLeadingZero ? hora.ToString().PadLeft(2, '0') : hora.ToString();
    
                if(showMinutes)
                    Minutos.Text = showMinutesLeadingZero ? minutos.ToString().PadLeft(2, '0') : minutos.ToString();
                
                if(showSeconds)
                    Segundos.Text = showSecondsLeadingZero ? segundos.ToString().PadLeft(2, '0') : segundos.ToString();
    
                
            }
    
            public TimeSpan StringToTimeSpan(string hora)
            {
                int HoraReloj = Convert.ToInt32(hora.Substring(0, hora.IndexOf(this.timeSeparator)));
                int MinuReloj = Convert.ToInt32(hora.Substring(hora.IndexOf(this.timeSeparator) + 1, 2));
    
                if (hora.ToUpper().IndexOf("PM") != -1)
                {
                    if (HoraReloj != 12)
                        HoraReloj += 12;
                }
                else
                    if (HoraReloj == 12)
                        HoraReloj = 24;
    
                int SeguReloj = 0;
                if (this.showSeconds)
                {
                    SeguReloj = Convert.ToInt32(hora.Substring(hora.IndexOf(this.timeSeparator) + 4, 2));
                }
    
    
                return new TimeSpan(HoraReloj, MinuReloj, SeguReloj);
            }
        }
    }
    I want to make a TimePicker.


    This part of the code is:
                                    <ext:Button ID="btnNow" runat="server" Text="<b>Ahora</b>" >
                                        <DirectEvents>
                                            <Click OnEvent="setNow" />
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:Button ID="btnClear" runat="server" Text="Limpiar" 
                                        Handler="#{clickDado}.setValue(0); #{Horas}.reset(); #{Minutos}.reset(); #{Segundos}.reset(); deselectTime(#{TagLabelHoras},#{TagLabelMinutos});" />
                                    <ext:ToolbarFill />
                var deselectTime = function(tagHoras, tagMinutos){
                    var thoras = #{TagLabelHoras}.tags;
                    for (var i = 0; i < thoras.length; i++) {
                        var tag = thoras[i];                 
                        thoras.onclick(tag.el, {
                            getTarget: Ext.emptyFn
                        })
                    }
                    //p=p;
                };
    Thank you.
    Last edited by Quico; Aug 18, 2014 at 12:59 PM.
  8. #8
    Please simplify the code and make it standalone. We should be able to copy, paste and run a test case without any changes from our side.
  9. #9
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TimePickerClear.aspx.cs" Inherits="SIRTIS.Pruebas.TimePickerClear" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        
    <ext:XScript ID="XScript1" runat="server">
        <script type="text/javascript">
            var deselectTime = function(tagHoras, tagMinutos){
                var thoras = #{TagLabelHoras}.tags;
                for (var i = 0; i < thoras.length; i++) {
                    var tag = thoras[i];                 
                    thoras.onclick(tag.el, {
                        getTarget: Ext.emptyFn
                    })
                }
            };
        </script>
    </ext:XScript>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:Container ID="contenedorHoras" runat="server" Layout="ColumnLayout" Width="180">
                <Items>
                    <ext:TagLabel ID="TagLabelHoras" runat="server" SelectionMode="Single" TrackOver="true">
                        <Tags>
                            <ext:Tag Text="00" />
                            <ext:Tag Text="01" />
                            <ext:Tag Text="02" />
                            <ext:Tag Text="03" />
                            <ext:Tag Text="04" />
                            <ext:Tag Text="05" />
                            <ext:Tag Text="06" />
                            <ext:Tag Text="07" />
                            <ext:Tag Text="08" />
                            <ext:Tag Text="09" />
                            <ext:Tag Text="10" />
                            <ext:Tag Text="11" />
                            <ext:Tag Text="12" />
                            <ext:Tag Text="13" QTip="Es la 1" />
                            <ext:Tag Text="14" QTip="Es la 2" />
                            <ext:Tag Text="15" QTip="Es la 3" />
                            <ext:Tag Text="16" QTip="Es la 4" />
                            <ext:Tag Text="17" QTip="Es la 5" />
                            <ext:Tag Text="18" QTip="Es la 6" />
                            <ext:Tag Text="19" QTip="Es la 7" />
                            <ext:Tag Text="20" QTip="Es la 8" />
                            <ext:Tag Text="21" QTip="Es la 9" />
                            <ext:Tag Text="22" QTip="Es la 10" />
                            <ext:Tag Text="23" QTip="Es la 11" Closable="false" />
                        </Tags>
                    </ext:TagLabel>
                </Items>
            </ext:Container>
            <ext:Button ID="btnClear" runat="server" Text="Clear"
                Handler="deselectTime(#{TagLabelHoras});" />
        </form>
    </body>
    </html>
  10. #10
    You should call
    tagHoras.onclick(...)
    instead of
    thoras.onclick(...)
    Also you can use
    var thoras = tagHoras.tags;
    instead of
    var thoras = #{TagLabelHoras}.tags;
    and get rid of the <ext:XScript> control. Actually, we would recommend to avoid using that.

    Although, in any way it won't clear selection.

    To toggle a specific tag I can suggest this code:
    var tag = App.TagLabelHoras.tags[7];
    
    tag.selected = !tag.selected;
    tag.el.toggleCls("x-taglabel-item-selected");
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Select and DeSelect GridPanel row using client side
    By speedstepmem4 in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 03, 2014, 4:05 AM
  2. Command Group Gridpanel select / deselect
    By billy in forum 2.x Help
    Replies: 2
    Last Post: Nov 21, 2012, 9:16 PM
  3. [CLOSED] GridPanel with CheckboxSelectionModel: select and deselect records
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 09, 2012, 11:40 AM
  4. Replies: 3
    Last Post: Sep 27, 2012, 5:59 AM
  5. Multi Select select/deselect
    By Palash in forum 1.x Help
    Replies: 2
    Last Post: Sep 18, 2009, 3:49 AM

Posting Permissions