PDA

View Full Version : [CLOSED] How to select and deselect TagLabel from javascript?



Quico
Aug 15, 2014, 12:53 PM
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.

Daniil
Aug 15, 2014, 2:56 PM
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
})

Quico
Aug 15, 2014, 3:58 PM
Hi Daniil.

I've got this error.

14521

Daniil
Aug 15, 2014, 5:02 PM
Have you replaced "TagLabelID" with "TagLabelHoras"?

Quico
Aug 15, 2014, 6:05 PM
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
})
}

Daniil
Aug 16, 2014, 6:56 AM
Please provide a full test case.

Quico
Aug 18, 2014, 12:53 PM
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.maxValu e, this.minHoraValue,this.maxHoraValue,#{hshowMinutes LeadingZero}.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.Tex t); }
set { this.hshowMinutesLeadingZero.Text = value.ToString(); }
}

public bool showSecondsLeadingZero
{
get { return Convert.ToBoolean(this.hshowSecondsLeadingZero.Tex t); }
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().R eplace("px", "")) + Convert.ToInt32(contenedorAMPM.Width.ToString().Re place("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.t imeSeparator) + 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.t imeSeparator) + 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.

Daniil
Aug 18, 2014, 2:26 PM
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.

Quico
Aug 18, 2014, 2:45 PM
<%@ 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>

Daniil
Aug 18, 2014, 3:08 PM
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");

Quico
Aug 18, 2014, 3:38 PM
This solved in this way:



var deselectTime = function(tagHoras){
var thoras = tagHoras.tags;
for (var i = 0; i < thoras.length; i++) {
var tag = thoras[i];
if (tag.selected) {
tag.selected = !tag.selected;
tag.el.toggleCls("x-taglabel-item-selected");
}
}
};


I use the <ext: XScript> inside user controls. What do you use for this?

Thank you.

Daniil
Aug 19, 2014, 5:22 AM
I use the <ext: XScript> inside user controls. What do you use for this?

This thread might be helpful.
http://forums.ext.net/showthread.php?21393&p=92621&viewfull=1#post92621