[CLOSED] Call plugin

[ppettigrew]

Hi, I have found an ExtJs plugin on this site: http://www.sencha.com/forum/showthre...ht-Mask-Plugin

 
Ext.ux.Mask = function(mask) {
    var config = {
        mask: mask
    };
    Ext.apply(this, config);
};
Ext.extend(Ext.ux.Mask, Object, {
    init: function(c) {
        this.LetrasL = 'abcdefghijklmnopqrstuvwxyz';
        this.LetrasU = Ext.util.Format.uppercase(this.LetrasL);
        this.Letras  = this.LetrasL + this.LetrasU;
        this.Numeros = '0123456789';
        this.Fixos  = '().-:/ '; 
        this.Charset = " !\"#$%&\'()*+,-./0123456789:;<=>?@" + this.LetrasU + "[\]^_/`" + this.LetrasL + "{|}~";
        c.enableKeyEvents = true;
        c.on('keypress', function(field, evt) { return this.press(field, evt) }, this);
    },
    press: function(field, evt) {
        var value = field.getValue();
        var key = evt.getKey();
        var mask = this.mask;
        if(evt){
            var objDom = field.el.dom;
            if((objDom.selectionEnd - objDom.selectionStart) > 0){
                return true;    
            }
            var tecla = this.Charset.substr(key - 32, 1);
            if(key < 32 || evt.isNavKeyPress() || key == evt.BACKSPACE){
                return true;
            }
            if(Ext.isGecko || Ext.isGecko2 || Ext.isGecko3)
                if((evt.charCode == 0 && evt.keyCode == 46) || evt.isSpecialKey()) return true; // DELETE (conflict with dot(.))
            var tamanho = value.length;
            if(tamanho >= mask.length){
                field.setValue(value);
                evt.stopEvent();
                return false;
            }
            var pos = mask.substr(tamanho,1); 
            while(this.Fixos.indexOf(pos) != -1){
                value += pos;
                tamanho = value.length;
                if(tamanho >= mask.length){
                    evt.stopEvent();
                    return false;
                }
                pos = mask.substr(tamanho,1);
            }
            switch(pos){
                case '#' : if(this.Numeros.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
                case 'A' : if(this.LetrasU.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
                case 'a' : if(this.LetrasL.indexOf(tecla) == -1){evt.stopEvent(); return false;} break;
                case 'Z' : if(this.Letras.indexOf(tecla) == -1) {evt.stopEvent(); return false;} break;
                case '*' : field.setValue(value + tecla); break;
                default : field.setValue(value); break;
            }
        }
        field.setValue(value + tecla);
        evt.stopEvent();
        return false;
    }
});

This is work on ExtJs textfield but I want to use it on Coolite textfield.

In this code, can I call my plugin?

 
<ext:TextField>
                                                                                        
<Plugins>
               ...???...                                                                         
</Plugins>
                                                                                        
</ext:TextField>

Tnaks.

[Daniil]

Hello!

Please use the GenericPlugin control.

Example

<ext:TextField runat="server">
    <Plugins>
        <ext:GenericPlugin Path="pathToJSfile.js" InstanceName="nameOfPluginClass" />
    </Plugins>
</ext:TextField>

If you add a plugin script on the page you don't have to set the Path property.

[tlfdesarrollo]

Hi Daniil!

I tried to use this example but i need to know how to complete the InstanceName (Ext.ux.MonthPickerPlugin), which is the plugin name? how can i add it to the resources? because in the way it's comming i couldn't find it.

Regards!

Hello!

Please use the GenericPlugin control.

Example

<ext:TextField runat="server">
    <Plugins>
        <ext:GenericPlugin Path="pathToJSfile.js" InstanceName="nameOfPluginClass" />
    </Plugins>
</ext:TextField>

If you add a plugin script on the page you don't have to set the Path property.

[Daniil]

Hi,

I tried to use this example but i need to know how to complete the InstanceName (Ext.ux.MonthPickerPlugin), which is the plugin name?

In the example from the initial post the plugin class name is "Ext.ux.Mask".

The Ext.ux.MonthPickerPlugin also looks to be the correct name, but I need to look at the plugin sources to say for sure.

how can i add it to the resources?

You can set up Path for GenericPlugin or just use a <script> tag with a respective src attribute.

[tlfdesarrollo]

Ok, how can i add it to the ext.net resources?

	
		Ext.net.ResourceMgr.init({id:"ctl02",BLANK_IMAGE_URL:"/extjs/resources/images/default/s-gif/ext.axd",aspForm:"form1",theme:"blue"});Ext.onReady(function(){Ext.QuickTips.init();new Ext.form.TextField({id:"ctl03_txtMonthPicker",renderTo:"ctl03_txtMonthPicker_Container",plugins:this.ctl03_ctl00=new Ext.ux.Mask({})});});
Uncaught TypeError: undefined is not a function

Hi,



In the example from the initial post the plugin class name is "Ext.ux.Mask".

The Ext.ux.MonthPickerPlugin also looks to be the correct name, but I need to look at the plugin sources to say for sure.



You can set up Path for GenericPlugin or just use a <script> tag with a respective src attribute.

[Daniil]

Here is the example of custom plugin server control.
http://forums.ext.net/showthread.php...ll=1#post63023

[tlfdesarrollo]

As follows way, the selector of months is working properly:

<ext:DateField runat="server" ID="dtpPanel">
    <Plugins>
        <ext:GenericPlugin runat="server" InstanceName="Ext.ux.MonthPickerPlugin" />
    </Plugins>
</ext:DateField>

but, when the month is selected, the date field show the complete date, i.e. "15/02/2012".
I would like that the date field show only month and year selected i.e. "02/2012".
Is this possible?

thanks daniil!

Here is the example of custom plugin server control.
http://forums.ext.net/showthread.php...ll=1#post63023

[tlfdesarrollo]

I just realized that this is possible with the format property of DatePanel... :)

thanks daniil!

As follows way, the selector of months is working properly:

<ext:DateField runat="server" ID="dtpPanel">
    <Plugins>
        <ext:GenericPlugin runat="server" InstanceName="Ext.ux.MonthPickerPlugin" />
    </Plugins>
</ext:DateField>

but, when the month is selected, the date field show the complete date, i.e. "15/02/2012".
I would like that the date field show only month and year selected i.e. "02/2012".
Is this possible?

thanks daniil!