Pages

Thursday, July 26, 2012

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'

Wednesday, July 18, 2012

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);
      });

    }
  }
}

Monday, July 16, 2012

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'});
}

Sunday, July 15, 2012

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/


Thursday, July 5, 2012

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...