What's New?

[CLOSED] Colorbox textfield extension

  1. #1
    Jul 24, 2012, 2:34 PM

    [CLOSED] Colorbox textfield extension

    Hi,

    I have done an extension of textfield control to simulate a colorpicker with result painted inside the textfield.
    In older versions (1.x) works right in IE and FF, but right now, only works in FF.

    The idea is to capture focus event of textfield that simulates a click. At this moment a colorpicker is showed at left of the textfield, and when the user selects a color this color is the background of textfield.

    Well, to perform this I use a listener of textfield (focus) that opens the colorpicker like:
    C#
this.Listeners.Focus.Handler = string.Format("{0}.showBy({1}); {1}.blur();", colorMenuID, this.Element.Descriptor);

JS Result -> "ColorMenu.showBy(Color.el); Color.el.blur();"
    This works in FF but not in IE now, it seems that focus event was fired in click and focus with key tab moving in the form in FF and later in v1.x and in IE only when you move to this textfield with tab key.

    Any idea or workaround?
    Last edited by Daniil; Jul 31, 2012 at 12:28 PM. Reason: [CLOSED]
  2. #2
    Jul 24, 2012, 2:54 PM
    There is no public 'blur' method (blur method is private and it is used as handler of 'blur' event)
    Javascript doesn't allow to remove focus from particular field (only if focus another element)
  3. #3
    Jul 25, 2012, 6:44 AM
    Well, I'm focusing on the first statement of the handler.

    ColorMenu.showBy(Color.el);
    This one, or making a simple alert isn't firing at the same time in IE and FF.

    Do you need an example?
  4. #4
    Jul 25, 2012, 9:42 AM
    Hi,

    I don't think the showBy method focuses anything.

    You should call the focus method for some focusable thing.
  5. #5
    Jul 25, 2012, 12:00 PM
    No, I don't explained very well..

    When the focus event in textfield is raised, I execute

    ColorMenu.showBy(Color.el);
    In FF if I click inside the textfield, focus event is raised but not in IE. This is the difference that I would to resolve
  6. #6
    Jul 25, 2012, 12:15 PM
    Got it, thanks for clarification.

    Yes, it would be worth to look at your test case, because I am unable to reproduce using the sample below. The Focus is triggered under IE.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:TextField runat="server">
        <Listeners>
            <Focus Handler="alert('focus');" />
        </Listeners>
    </ext:TextField>
</body>
</html>
  7. #7
    Jul 25, 2012, 1:35 PM
    Hi,

    I revised your example an works.
    Now I look another time my plugin code and I have this that seems to block focus in IE with mouse click.

    Ext.define('Ext.ux.ColorBox', {
    extend: 'Ext.form.TextField',
    alias: 'widget.ColorBox',

    firstLoad: 0,
    xtype: 'sm-colorbox',

    initComponent: function () {
        Ext.ux.ColorBox.superclass.initComponent.call(this);

        this.addEvents(
                'selectstart',
                'mousedown'
        );
    },

    // private
    initEvents: function () {
        Ext.ux.ColorBox.superclass.initEvents.call(this);
        this.mon(this.getEl(), 'selectstart', this.onSelectStart, this);
        this.mon(this.getEl(), 'mousedown', this.onMouseDown, this);
    },

    onSelectStart: function () {
        //To catch text selection in IE
        return false;
    },

    onMouseDown: function () {
        //To catch text selection in Mozilla
        return false;
    },

... rest of methods
    I think that onSelectStart blocks me, I commented and now works likee in v1.x

    Thanks for all
  8. #8
    Jul 25, 2012, 2:04 PM
    Yes, I think returning false prevents the focus event to be fired.

Similar Threads

  1. FileUploadField Extension restriction
    By kutlu in forum 1.x Help
    Replies: 2
    Last Post: Jul 08, 2013, 10:39 AM
  2. [CLOSED] Textfield extension error
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 19, 2012, 2:44 PM
  3. [CLOSED] Call an AJAX function from the key map extension...
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 30, 2008, 9:57 AM
  4. Want to create extension off TwinTriggerField
    By jchau in forum 1.x Help
    Replies: 2
    Last Post: Oct 06, 2008, 12:47 PM

Tags for this Thread

Posting Permissions