What's New?

[CLOSED] How to open Color Palette

Page 1 of 2 12 LastLast
  1. #1
    May 11, 2012, 3:35 PM

    [CLOSED] How to open Color Palette

    Hi, how i can show palette color from a button and hide this when select color?, thanks.
    Last edited by Daniil; May 14, 2012 at 7:05 AM. Reason: [CLOSED]
  2. #2
    May 11, 2012, 4:05 PM
    on the button add a click listener
    <ext:Button id="mybutton" runat="server" Text="show palette">
<Listeners>
<Click Handler="#{ThePalleteID}.show()" />
</Listeners>
</ext:Button>
    as for hiding the palette when a color is selected, it's pretty much the same concept.
    See the docs for the event:
    http://docs.sencha.com/ext-js/3-4/#!...e-event-select

    You'll just add a listener for the Select event. This events PASSES IN the color that was selected so that you can work with that value.

    SO your handler would look like this 

    function handleColorSelect(color){

//do stuff

}
  3. #3
    May 11, 2012, 4:11 PM
    Hi all,

    +1 to the @jlosi's recommendations.

    Also please look at the second TriggerField here:
    https://examples1.ext.net/#/Form/TriggerField/Overview/
  4. #4
    May 11, 2012, 4:48 PM
    Hi all, thanks for your responses, if I want that window of the colorpalette is used for various controls without having to repeat each,how send him to the handler of the window, the control that makes the call?

     <ext:ColorPalette ID="ColorPalette1" runat="server">
                    <Listeners>
                        <Select 
                            Handler="
                                var tf = #{TriggerField2};
                                tf.getEl().applyStyles('background:#' + color);
                                tf.triggers[0].show();
                                tf.setValue('#' + color);
                                #{Window1}.hide();"
                                />
                    </Listeners>
                </ext:ColorPalette>
      var tf = #{TriggerField2}; <-- any triggerfield
    Thanks!
  5. #5
    May 11, 2012, 6:00 PM
    You can save it as a Window property.

    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>
    
    <script type="text/javascript">
        var triggerHandler = function (field, trigger, index) {
            switch (index) {
                case 0:
                    field.getEl().applyStyles('background:white');
                    field.triggers[0].hide();
                    field.setValue('');
                    break;
                case 1:
                    Window1.show();
                    Window1.triggerField = field;
                    break;
            }
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
        
    <ext:TriggerField 
        runat="server" 
        Width="200" 
        Editable="false">
        <Triggers>
            <ext:FieldTrigger Icon="Clear" Qtip="Click to clear field" HideTrigger="true" />
            <ext:FieldTrigger Icon="Ellipsis" Qtip="Click to choose value" />
        </Triggers>
        <Listeners>
            <TriggerClick Fn="triggerHandler" />
        </Listeners>
    </ext:TriggerField>

    <ext:TriggerField 
        runat="server" 
        Width="200" 
        Editable="false">
        <Triggers>
            <ext:FieldTrigger Icon="Clear" Qtip="Click to clear field" HideTrigger="true" />
            <ext:FieldTrigger Icon="Ellipsis" Qtip="Click to choose value" />
        </Triggers>
        <Listeners>
            <TriggerClick Fn="triggerHandler" />
        </Listeners>
    </ext:TriggerField>
        
    <ext:Window 
        ID="Window1" 
        runat="server" 
        MinWidth="165" 
        MinHeight="125" 
        Resizable="false" 
        Title="Choose value" 
        Hidden="true" 
        Icon="ColorSwatch"
        Padding="3">
        <Items>
            <ext:ColorPalette runat="server">
                <Listeners>
                    <Select 
                        Handler="var win = this.ownerCt;
                                     tf = win.triggerField;

                                 tf.getEl().applyStyles('background:#' + color);
                                 tf.triggers[0].show();
                                 tf.setValue('#' + color);
                                 
                                 win.hide();" />
                </Listeners>
            </ext:ColorPalette>
        </Items>        
    </ext:Window>
</body>
</html>
  6. #6
    May 11, 2012, 6:04 PM
    how to send the item you are calling the function?

    im trying:

     <script type="text/javascript">
         var SeleccionarColor = function () {
            var tf = #{wnPaletaColores.param1};
                                tf.getEl().applyStyles('background:#' + color);
                                tf.triggers[0].show();
                                tf.setValue('#' + color);
                                #{wnPaletaColores}.hide();
         };
         var MostrarVentana = function(triggerfield)
         {
         #{wnPaletaColores}.param1 = triggerfield; 
         #{wnPaletaColores}.show(); 
         };
    </script>
    <ext:TriggerField ID="TriggerField2" runat="server" Width="120" Editable="false"
                                Text="Escoger Color" Icon="ColorSwatch">
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear" Qtip="Click Para Borrar el Color" HideTrigger="true" />
                                    <ext:FieldTrigger Icon="Ellipsis" Qtip="Click Para Escoger un Color" />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Fn="MostrarVentana(this)"/>
                                    
                                </Listeners>
                            </ext:TriggerField>
    <ext:Window ID="wnPaletaColores" runat="server" MinWidth="165" MinHeight="125" Resizable="false"
                Title="Escojer Valor" Hidden="true" Icon="ColorSwatch" Padding="3" Modal="true">
                <Items>
                    <ext:ColorPalette ID="ColorPalette1" runat="server">
                        <Listeners>
                            <Select Fn="SeleccionarColor"/>
                        </Listeners>
                    </ext:ColorPalette>
                </Items>
            </ext:Window>
    but not work u_u, help please,
  7. #7
    May 11, 2012, 6:10 PM
    OH, your answer first, ok, im trying your code.
  8. #8
    May 11, 2012, 8:31 PM
    Hi, im trying but this failed :(, 

     <script type="text/javascript">
         var triggerHandler = function (field, trigger, index) {
                    #{wnPaletaColores}.show();
                    #{wnPaletaColores}.triggerField = field;
                     }

    </script>

         <ext:TriggerField ID="TriggerField2" runat="server" Width="120" Editable="false"
                                Text="Escoger Color" >
                                <Triggers>
                                    <ext:FieldTrigger Icon="Clear"  HideTrigger="true" />
                                    <ext:FieldTrigger Icon="Ellipsis"  />
                                </Triggers>
                                <Listeners>
                                    <TriggerClick Fn="triggerHandler" />
                                </Listeners>
                            </ext:TriggerField>
 <ext:Window ID="wnPaletaColores" runat="server" MinWidth="165" MinHeight="125" Resizable="false"
                Title="Escojer Valor" Hidden="true" Icon="ColorSwatch" Padding="3" Modal="true">
                <Items>
                    <ext:ColorPalette ID="ColorPalette1" runat="server">
                        <Listeners>
                             <Select Handler="var win = this.ownerCt; 
                                 tf = win.triggerField; 
                                 tf.getEl().applyStyles('background:#' + color); 
                                 tf.triggers[0].show(); 
                                 tf.setValue('#' + color); 
                                 win.hide();" /> 
                        </Listeners>
                    </ext:ColorPalette>
                </Items>
            </ext:Window>
    But i have an error:
    Microsoft JScript runtime error: 'triggerHandler' is undefined
    PD. Im using a master page and if i change the #{wnPaletaColores} for wnPaletaColores in the js function, the error is : 
    Microsoft JScript runtime error: 'wnPaletaColores' is undefined
  9. #9
    May 11, 2012, 9:10 PM
    i Used:
     <script type="text/javascript">
        var triggerHandler = function (field, trigger, index) {
            <%=wnPaletaColores.ClientId%>.show();
             <%=wnPaletaColores.ClientId%>.triggerField = field;
        }

    </script>
    And Work!, thanks all!

    PD. final question, y can add colors to the palette?.
  10. #10
    May 14, 2012, 7:03 AM
    Quote Originally Posted by egvt View Post 
     <script type="text/javascript">
         var triggerHandler = function (field, trigger, index) {
                    #{wnPaletaColores}.show();
                    #{wnPaletaColores}.triggerField = field;
                     }

    </script>
    But i have an error:
    Microsoft JScript runtime error: 'triggerHandler' is undefined
    You should wrap the script in <ext:XScript> control to get #{} syntax working when it is used within <script>.

    Example
    <ext:XScript runat="server">
    <script type="text/javascript">
        var triggerHandler = function (field, trigger, index) {
            #{wnPaletaColores}.show();
            #{wnPaletaColores}.triggerField = field;
        };
    </script>
</ext:XScript>
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] MVC example - FX Open tab
    By borja_cic in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 29, 2011, 1:57 PM
  2. [CLOSED] open window out of its parent
    By imaa in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 26, 2011, 6:07 AM
  3. [CLOSED] Determine desktopwindow open
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 16, 2010, 7:53 AM
  4. Open Tab through sub-tab
    By poveron in forum 1.x Help
    Replies: 3
    Last Post: Jul 30, 2010, 8:29 PM
  5. [CLOSED] Open file from grid
    By methode in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 29, 2008, 9:17 AM

Posting Permissions