I would like to use a static member named 'name' in my class

I would like to use a static member named 'name' in my class :

app.js

Ext.define("MyClass", {       statics: {             myVar: "toto",             name: "could not be found"       } }); Ext.onReady(function(){       console.log("MyClass.myVar = ", MyClass.myVar);       console.log("MyClass.name = ", MyClass.name); });

output

MyClass.myVar = toto MyClass.name =

But this member is not set as you can see if you execute the previous code. "Ext.Base" has a method 'getName()' and I think this is the source of my problem.

The only workaround I have found for the moment is the following:

app.js

Ext.namespace('MyClass'); MyClass.myVar = "toto"; MyClass.name = "Could not be found"; Ext.onReady(function(){       console.log("MyClass.myVar = ", MyClass.myVar);       console.log("MyClass.name = ", MyClass.name); });

Ext JS 4: menu appears on the button and not on the top

I try to use a bottom toolbar on a panel. My button has a menu and when the menu is displayed (only the first time) it appears to down and hide the button. This is an example:

Ext.onReady(function(){
 Ext.create("Ext.Viewport", {
  layout: "fit",
  items: {
   xtype: "panel", title: "My Panel",
   bbar: {
    xtype: "toolbar", id: "mybbar",
    items: [{
     id: "myBtn", text: "button 1",
     //menuAlign: 'tl', ... doesn't work
     menu: {
      title: "MENU", 
      //buttonAlign: "left", ... doesn't work
      //defaultAlign: "myBtn", ... doesn't work
      items: [{text: "option 1"}, {text: "option 2"}, {text: "option 3"}]
     }
    }, {text: "button 2"}]
   },
   html: "content"
  }
 });
})

The only way to solve this problem I have found is to add a listener to the button with the following code:

{
 id: "myBtn", text: "button 1",
 menu: {
  title: "MENU", 
  items: [{text: "option 1"}, {text: "option 2"}, {text: "option 3"}]
 },
 listeners: {
  menushow: function(oBtn, oMenu){
   oMenu.alignTo(oBtn);
  }
 }
}

Force the alignment to the button when the menu is displayed.

ExtJs 4 ButtonGroup: add Office 2010 effect to selection

To add Office 2010 effect on icon selection; color background when you press an icon, add the following code to your CSS file:

    
.x-btn-default-toolbar-large-menu-active, .x-btn-default-toolbar-large-pressed
{
 /*original : background-image: -moz-linear-gradient(top, #bccfe5,#c5d6e7 48%,#95c4f4 52%,#9fc9f5);*/    
    background-image: -moz-linear-gradient(center top , #FFFAE1, #FFD66A 48%, #FCB743  52%, #FFF8B5);
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #FFFAE1), color-stop(48%, #FFD66A), color-stop(52%, #FCB743), color-stop(100%, #FFF8B5));
   background-image: linear-gradient(top, #FFFAE1,#FFD66A 48%,#FCB743 52%,#FFF8B5);
    border-color: #F9AE52;
}

Bug in Ext Calendar Pro 1.5 beta (with ExtJs4): October 2011 has 32 days

Add this code before your application code.

    
    Extensible.Date.add = function(dt, o) {
        if (!o) {
            return dt;
        }
        var ExtDate = Ext.Date,
            dateAdd = ExtDate.add,
            newDt = ExtDate.clone(dt);

        if (o.years) {
            newDt = dateAdd(newDt, ExtDate.YEAR, o.years);
        }
        if (o.months) {
            newDt = dateAdd(newDt, ExtDate.MONTH, o.months);
        }
        if (o.weeks) {
            o.days = (o.days || 0) + (o.weeks * 7);
        }
        if (o.days) {
            newDt = dateAdd(newDt, ExtDate.DAY, o.days);
        }
        if (o.hours) {
            newDt = dateAdd(newDt, ExtDate.HOUR, o.hours);
        }
        if (o.minutes) {
            newDt = dateAdd(newDt, ExtDate.MINUTE, o.minutes);
        }
        if (o.seconds) {
            newDt = dateAdd(newDt, ExtDate.SECOND, o.seconds);
        }
        if (o.millis) {
            newDt = dateAdd(newDt, ExtDate.MILLI, o.millis);
        }

        return o.clearTime ? ExtDate.clearTime(newDt) : newDt;
    }

source

JavaScript Benchmark test

Dans le cadre de performance de notre application Web, voici quelques site pour tester les performances JavaScript sur différents navigateurs Web.

http://jsbenchmark.celtickane.com/Run.aspx

http://www2.webkit.org/perf/sunspider-0.9/sunspider.html

Objects extended in ExtJS

If you try to extend Object with ExtJS and add some properties to the new class:

 MyClass = Ext.extend(Object, {
   p: 1
 }

When you will create a new instance of this class, you loose all your properties previously added.

 var obj = new MyClass ();
 console.log(obj.p); // will be 'undefined'

This is the issue:

 MyClass = Ext.extend(Object, {
   constructor : function(options){
     Ext.apply(this, options || {} );
   },
   p: 1
 });

And to extend again:

 MySecondClass = Ext.extend(MyClass, {
   constructor : function(options){
     //call the base constructor
     MyClass.superclass.constructor.call(this, options);
     this.r = this.q + this.p;
   },
   q: 2
 });

Ext JS Designer

Voici un screencast du futur framework 'Ext JS Designer', qui sera disponible début 2009 avec la version 3 Ext JS. Au premier regard, ça à l'air très intéressant :-)
http://www.screencast.com/users/JackSlocum/folders/Default/media/f7450651-778b-4bbc-9fc4-4e921a7a2705

Si vous ne connaissez pas encore le framework Ext JS (licence open-source et commerciale), je vous conseil d'aller faire un tour sur le site et de découvrir les quelques exemples de ce qui est possible de développer avec celui-ci:
http://extjs.com/

Tutorial sur les expressons régulières

Voici un article qui vous permettra de vous familiariser avec les expressions régulières (regular expressions) en JavaScript.
Une expression régulière est un moyen de confirmer la validité d'une chaîne de caractères. Prenons l'exemple d'un email :
- il doit comporter inclure le symbole '@' au centre de celui-ci.
- à gauche une chaîne de caractères comprenant des lettres ou des chiffres, séparés éventuellement par un point '.' ou un tiret '-'.
- à droite, un nom de domaine.
Toutes ces conditions pourraient être tratées avec un série de 'if' ou bien avec une 'simple' expression régulière qui est celle-ci:



Je vous laisse découvrir l'article afin de déchiffrer cette 'simple' expression:

http://www.15seconds.com/issue/010301.htm

Calendrier JavaScript

Voici un calendrier gratuit avec code source, très complet. Facile à mettre en place, il propose plusieurs skins (format CSS).



http://www.dynarch.com/projects/calendar/