Change Plugin Properties Dinamically

  1. #1

    [CLOSED] Change Plugin Properties Dinamically

    Hi!

    I'm using InputTextMask plugin in Ext.Net 1.0RC and i want to change Mask property at runtime.

    This is my aspx code:
    <ext:TextField ID="Time" runat="server"  FieldLabel="Time"
                    AnchorHorizontal="95%" ItemCls="required" AllowBlank="false" 
                    Regex="^(([0-1]?[0-9])|([2][0-3])):([0-5][0-9])$" RegexText="hh:mm" >
                    <Plugins>
                       <ux:InputTextMask ID="InputTextMask1" runat="server" Mask="99:99" />
                  </Plugins>
               </ext:TextField>
    I got a solution with server side code, but it's not suitable for my requirements.

    Does anybody have an idea of how to do it in client side code, or if it's possible?
    The idea is after modifying the option of a combo, execute a javascript and it changes the mask.

    Thanks.
    Last edited by David Pelaez; Dec 22, 2010 at 8:53 AM. Reason: CLOSED
  2. #2
    Hi,

    Call .destroy() for the plugin.
    InputTextMask1.destroy();
    And add a new plugin.

    Example
    var mask = new Ext.ux.netbox.InputTextMask({...});
    TextField1.plugins.add(mask);
    mask.init(TextField1);
  3. #3
    When I call .destroy() mthod on this plugin, it crashes.

    And TextField1.plugins only have indexOf() and remove() methods when i inspect it.

    Is it correct? Or I do it something wrong?
  4. #4
    Hi,

    Oh, there is no .destroy() method in this plugin.

    I have wrote this method. I have not fully tested my code, so, I can missed something to destroy. So, feedback would be appreciated.

    Here is a full sample to test. Firstly - click on Destroy, then - on Add.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Assembly="Ext.Net.UX" Namespace="Ext.Net.UX" TagPrefix="ux" %>
    
    <!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 destroy = function(maskPlugin) {
                var field = maskPlugin.field;
                field.un('render', maskPlugin.assignEl, maskPlugin);
                field.un('blur', maskPlugin.removeValueWhenInvalid, maskPlugin);
                field.un('focus', maskPlugin.processMaskFocus, maskPlugin);
    
                field.getEl().un('keypress', maskPlugin.processKeyPress, maskPlugin);
                field.getEl().un('keydown', maskPlugin.processKeyDown, maskPlugin);
                if (Ext.isSafari || Ext.isIE) {
                    field.getEl().un('paste', maskPlugin.startTask, maskPlugin);
                    field.getEl().un('cut', maskPlugin.startTask, maskPlugin);
                }
                if (Ext.isGecko || Ext.isOpera) {
                    field.getEl().un('mousedown', maskPlugin.setPreviousValue, maskPlugin);
                }
                if (Ext.isGecko) {
                    field.getEl().un('input', maskPlugin.onInput, maskPlugin);
                }
                if (Ext.isOpera) {
                    field.getEl().un('input', maskPlugin.onInputOpera, maskPlugin);
                }
    
               if (Ext.isArray(field.plugins)) {
                    field.plugins.remove(maskPlugin);
                } else {
                    field.plugins = null;
                }
            };
    
            var addMask = function(field, cfg) {
                var mask = new Ext.ux.netbox.InputTextMask(cfg);
                field.plugins = mask;
                mask.init(field);
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField 
            ID="TextField1" 
            runat="server" 
            Regex="^(([0-1]?[0-9])|([2][0-3])):([0-5][0-9])$"
            RegexText="hh:mm">
            <Plugins>
                <ux:InputTextMask ID="InputTextMask1" runat="server" Mask="99:99" />
            </Plugins>
        </ext:TextField>
        <ext:Button runat="server" Text="Destroy">
            <Listeners>
                <Click Handler="destroy(InputTextMask1);" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Add new mask">
            <Listeners>
                <Click Handler="addMask(TextField1, {mask: '9:9'})" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 22, 2010 at 9:40 AM. Reason: Refactoring code
  5. #5
    It works great!

    Finally I add it like a method in the plugin like this to make it easier to use without coding this functions out of the plugin.

    changeMask: function (newMask) {
            var maskPlugin = this;
            var field = maskPlugin.field;
    
            field.un('render', maskPlugin.assignEl, maskPlugin);
            field.un('blur', maskPlugin.removeValueWhenInvalid, maskPlugin);
            field.un('focus', maskPlugin.processMaskFocus, maskPlugin);
    
            field.getEl().un('keypress', maskPlugin.processKeyPress, maskPlugin);
            field.getEl().un('keydown', maskPlugin.processKeyDown, maskPlugin);
    
            if (Ext.isSafari || Ext.isIE) {
                field.getEl().un('paste', maskPlugin.startTask, maskPlugin);
                field.getEl().un('cut', maskPlugin.startTask, maskPlugin);
            }
    
            if (Ext.isGecko || Ext.isOpera) {
                field.getEl().un('mousedown', maskPlugin.setPreviousValue, maskPlugin);
            }
    
            if (Ext.isGecko) {
                field.getEl().un('input', maskPlugin.onInput, maskPlugin);
            }
    
            if (Ext.isOpera) {
                field.getEl().un('input', maskPlugin.onInputOpera, maskPlugin);
            }
    
            delete field.plugins;
    
            maskPlugin = new Ext.ux.netbox.InputTextMask({ mask: newMask });
            field.plugins = maskPlugin;
            maskPlugin.init(field);
        }
  6. #6
    Hi,

    Sure, it would be best to add this method in the plugin's core.

    Please note that I improved code for supporting case when there are several plugins. So, I would suggest you to replace
    delete field.plugins;
    with

    if (Ext.isArray(field.plugins)) {
        field.plugins.remove(maskPlugin);
    } else {
        field.plugins = null;
    }
  7. #7
    Oh great!

    I doesn't think in this option that you say.

    Thanks!
  8. #8
    Hi David,

    You can be interested in this thread which is related to the current one.
    http://forums.ext.net/showthread.php?13752

Similar Threads

  1. [CLOSED] change fieldlabel of compositefield dinamically
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 21, 2012, 8:44 AM
  2. [CLOSED] Change a UX InputTextMask dinamically
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Nov 07, 2011, 4:31 PM
  3. [CLOSED] How to change the css class properties dynamically
    By ISI in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 04, 2011, 10:26 AM
  4. [CLOSED] Change button icon and tooltip dinamically
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 18, 2011, 3:33 PM
  5. Change Plugin Properties Dinamically
    By David Pelaez in forum 1.x Help
    Replies: 1
    Last Post: Dec 16, 2010, 12:09 PM

Tags for this Thread

Posting Permissions