Reseting ExtJS 2.1 GridView column sorting

Reseting ExtJS's GridView column sorting can be a bit tricky - the API doesn’t provide any way to do this. So we have to cook our own way.

To reset sorting state first we need to extend the Ext.grid.GridView class:

Ext.override(Ext.grid.GridView,
{
    // private
    _resetSortState: false,

    resetSortState: function()
    {
        this._resetSortState = true;
    },

    updateHeaderSortState: function()
    {
        if (this._resetSortState === true)
        {
            this._resetSortState = false;

            delete this.ds.baseParams['dir'];
            delete this.ds.baseParams['sort'];
            delete this.sortState;
            this.mainHd.select('td').removeClass(this.sortClasses);
            this.grid.fireEvent('sortchange', this.grid, null);
        }
        else
        {
            // ExtJS updateHeaderSortState function
            var state = this.ds.getSortState();
            if(!state){
                return;
            }
            if(!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)){
                this.grid.fireEvent('sortchange', this.grid, state);
            }
            this.sortState = state;
            var sortColumn = this.cm.findColumnIndex(state.field);
            if(sortColumn != -1){
                var sortDir = state.direction;
                this.updateSortIcon(sortColumn, sortDir);
            }
        }
    }
});

Include this snippet in your application. How to use it? I hooked it to my Ext.Toolbar.Button handler:

new Ext.Toolbar.Button(
{
	text: 'My Toolbar Button',
	handler: function()
	{
		myGrid.view.resetSortState();
		myStore.removeAll();
		myStore.load({params : {start : 0}});
	},
	scope: this
}));

That’s it! This code has been tested with ExtJS 2.1.

Filip Tepper · 5 December 2008 · ·

Pasting content into ExtJS's 1.1.1 HtmlEditor

ExtJS has its up and downsides, but is indeed agreat framework if you need out-of-the-box set of tools for complex layout development. However we’ve noticed that ExtJS’s HtmlEditor has problems with content that is pasted into the textarea (we used Firefox 2.0 on both Linux and Windows - never happened on OS X systems). After pasting some HTML the getRawValue method returns a string that doesn’t include the pasted content. This issue only occurs if after pasting the content HtmlEditor’s textarea is not modified - inserting any character (including whitespace) will prevent it.

The workaround is easy - you need to use the method syncValue. An excerpt from Ext’s documentation:

Protected method that will not generally be called directly. Syncs the contents of the editor iframe with the textarea.
Despite it being protected we can call it directly. If you’re facing the problem of missing content then use the following snippet to read data from HtmlEditor:

YourHtmlEditor.syncValue();
var content = YourHtmlEditor.getStylesheet() + "\n" + YourHtmlEditor.getRawValue();

We use it in our webmail module and it works like a charm (finally!).

Filip Tepper · 1 February 2008 · ·