How to change the LoadMask text and target

How to change the default presence validation message

The default model "presence" validation message is "must be present", which is kinda ugly.

Here's how to change it to something better:

// set this near the beginning of your program:

Ext.data.validations.presenceMessage = "Required";

Using ExtJS and JQuery on the same page

This widget shows an ExtJS Panel and Image component, along with the JQuery DeepLiquid JCrop widget, which allows you to select a crop area on an image.

Try it out by dragging your mouse over the image. You can also move the "crop" around.

 

A function to concatenate field values in a store

Below is a function to concatenate the values in a field in a store. This is similar to Store.sum();

Ext.data.Store.override({
    
    concat: function(field, grouped, separator){
        
        if(typeof separator === 'undefined'){
            separator = ', ';
        }
        
        if (grouped && this.isGrouped()) {
            return this.aggregate(this.getConcat, this, true, [field, separator]);
        } else {
            return this.getConcat(this.data.items, field, separator);
        }    
    },
    
    getConcat: function(records, field, separator){
        var result = [];
        var i = 0;
        var len = records.length;
        
        for(; i < len; ++i){
            result.push(records[i].get(field));
        }
        return result.join(separator);
    }
});  
    

For example, if the store has a field 'email', with data 'a@b.ca' and 'b@c.com', then store.concat('email') would return 'a@b.ca, b@c.com'

How to capture the HTMLEditor's onpaste event

The key to capturing the onpaste event for the HTMLEditor component is to wait for its initialize event to fire and then add the onpaste handler to its document body:

{
xtype: 'htmleditor',
listeners: {
  initialize: function(cmp) {

    Ext.EventManager.addListener(

      cmp.iframeEl.dom.contentWindow.document.body

      , 'paste'

      , function(e, elem){
          console.log(arguments);
      });

    }
  }
}

How to simulate AJAX requests in JSFiddle

1. set the URL as /echo/json/  [you need that last slash]
2. if you are doing a read action (such as in Model.load) you need to set the proxy.actionMethods.read to "POST"
3. set "json" as an extraParam and pass the json string that you want echoed back
4. you can optionally set a delay in extraParams

Here is a little function to help you simulate an AJAX request for a proxy:

function sim(proxy, data, delay){

  if(typeof data !== 'string'){
    data = Ext.JSON.encode(data);
  }

  proxy.url = '/echo/json/';
  proxy.actionMethods.read = "POST";
  proxy.extraParams.json = data;
  proxy.extraParams.delay= typeof delay == 'undefined' ? 0 : delay;
}

//usage:

sim(MyModel.proxy, {name:"neil"}, 2);

MyModel.load(1, {
  callback: function(record, operation){ console.log( record.get('name'); ) }
});

Example:

//jsfiddle.net/el_chief/9ksWE/

/* this is a function to simulate ajax requests in jsfiddle

This is the Sencha Touch 2.01 compatible version
 */
function sim(proxy, data, delay) {
    if (typeof data !== 'string') {
        data = Ext.JSON.encode(data);
    }

    proxy.setUrl('/echo/json/');
    proxy.setExtraParams({
        json:data,
        delay: typeof delay === 'undefined' ? 0 : delay
    });
    proxy.setActionMethods({read:'POST'});
}

This blog, in French

The smart guys at Developpez.com (a very popular French dev portal) asked to translate and post some of my blog articles on their site. Here it is:

http://neilmcguigan.developpez.com/