Capture the HTMLEditor's onpaste event

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, el){          // your action       });     }   } }

Concatenate field values in a ExtJS store

A function to concatenate field values in a store

 

This is a function to concatenate the values in a field of a store 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 'names', with data 'Me' and 'You', then store.concat('name') would return 'Me, You'

All about Ext JS

What is ExtJs

● ExtJS is a javascript  framework (client-side ) that enables developers to develop Rich   Internet  Application (RIA) (static  websites  or  data-driven applications) with a plethora of options.

 

● ExtJS has a huge collection of controls (ranging from textboxes to highly sophisticated UI Controls).

ExtJs History

● Started as extension to Yahoo's YUI! Framework in 2006 – YUI-Ext !

● By the end of the year, the library had gained so much in popularity that the name was changed simply to Ext, a reflection of its maturity and independence as a framework.
● A company was formed in early 2007, and Ext is now dual-licensed under the GPL v3 and a proprietary license.

Why ExtJs ?

● Most Developers don't like to design
● HTML isn’t pretty
● HTML isn’t functional
● ExtJs is the largest consistent library of extended components in a single package
● ExtJs is “baked in” to ColdFusion

Features of ExtJs :

● Ext is cross-browser compatible.
● Ext has a complete set of widgets.
● Ext looks great and it feels good.
● Ext is very well documented.
● Ext can be used both under a free and a commercial license.

Cross-browser compatible

Windows looks like OS windows 

Good Documentation

How do we begin?

● Download the latest copy of ExtJS from
http://www.sencha.com/products/extjs/download/

● Unzip using any file compression utility(Winzip / WinRAR).

● It is strongly recommended that you create a virtual directory for the unzipped folder (since certain examples work only if accessed via website / virtual directory).