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/

ExtJS Trouble-shooting

Uncaught Error: The following classes are not declared even if their files have been loaded: 'My.folder.File'. Please check the source code of their corresponding files for possible typos: 'app/folder/File.js ext-all-dev.js:9655
Ext.apply.onFileLoaded ext-all-dev.js:9655
(anonymous function) ext-all-dev.js:2953
Ext.apply.injectScriptElement.onLoadFn

This means that you required the file correctly, but that it's defined name did not match the file name. For example, if you require My.folder.File but define it like this:

Ext.define('My.folder.File2', {...});

more coming soon...

RowEditing Plugin: validateedit event

The rowediting plugin fires a validateedit event after its Update button is clicked.

It is fired before the record is populated with the form data.

Here is how to handle the validateedit event if you want to validate a model and show its validation errors:

The editor.editor.form reference is to a BasicForm and not a Form Panel.

validateedit: function(editor, e, eOpts){
    var newModel = e.record.copy(); //copy the old model
    newModel.set(e.newValues); //set the values from the editing plugin form

    var errors = newModel.validate(); //validate the new data
    if(!errors.isValid()){
      editor.editor.form.markInvalid(errors); //the double "editor" is correct
      return false; //prevent the editing plugin from closing
    }
}

ExtJS Faster Loading

Here's how to make your app appear to load faster. It's a trick used in iOS programming:

1. take a screenshot of your application, in its initial but loaded state *
2. blur or mask this image somewhat
3. load this image first, and set it as the HTML background image
4. load ExtJS and your application
5. start your application
6. the app will start and show its interface, and the viewport will cover the HTML background

To make sure an image loads first, put this script at the top:

(new Image()).src = 'path to your startup image';

To set it as the background image, add this style to your index page:

html {
  background-image: url('path to your startup image');
  background-size: 100%;
}

You should also, of course, use Sencha SDK Tools to compress and minimize your files.

* remove any user-specific or time-sensitive info