• PivotGrids
• Calendar

While those will garner much attention, the ugly stepchild mentioned at the bottom of the press release is also very cool. The ActionColumn allows you to put icons inside a grid with an accompanying event handler.

This is something we use quite a bit in Flex, and its addition to ExtJS is exciting.

However, recent user feedback was, “If I know the unit I’m looking for, why can’t I just type it in and hit ENTER and skip the whole search feature to find the one I need?”

Doh.

Yes, I was making the users wait – even if for 1 second – for a list of possible matches to be displayed, when 90% of the time they know which one they want to open.

Luckily, I was able to briefly look at the documentation for ComboBox and find out how to accomplish this. You need to set the enableKeyEvents config property to true, and then hook into the keypress event and check for the user pressing the ENTER (or RETURN) key. When the ENTER key is pressed, prevent the query from being executed, and open the item the user entered.

var WidgetSearch = new Ext.form.ComboBox({
    minChars:           3,
    loadingText:        '',
    itemSelector:       'div.search-item',
    triggerClass:       'x-form-search-trigger',
    applyTo:            'search-field',
    enableKeyEvents:  true,
    store: new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'widgets.cfm'}),
        reader: new Ext.data.JsonReader({
            root:           'data',
            totalProperty:  'recordcount'
        }, [
            {name: 'widget_number', type: 'string'},
            {name: 'widget_name', type: 'string'}
        ])
    }),
    tpl: new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            '{widget_number} - {widget_name}',
        '</div></tpl>'
    ),
    onSelect: function(record){
        document.location.href = 'displayWidgetDetails.cfm&amp;wid=' + record.data.widget_number;
    },
    listeners:
    {
        // Hook into the keypress event to detect if the user pressed the ENTER key
        keypress: function(comboBox, e){
            if (e.getCharCode() == e.ENTER) {
                // Prevent the default query action since the user
                // believes she has entered a proper widget number
                comboBox.on('beforequery', function(q){q.cancel=true;},this);

                // Redirect browser to widget detail view
                document.location.href = 'displayWidgetDetails.cfm&amp;wid=' + WidgetSearch.getValue();
            }
        }
    }
});

Since I needed this functionality, I took a stab at it today, and here’s my simplistic example of how to do it.

First, I create a global variable named editedRow which will get updated when the afteredit event is fired on the GridPanel.

var editedRow;

var AutoGrid = new Ext.grid.EditorGridPanel({
    // Properties clipped for article;
    // view example for full code
});

// After any field is edited, make the row dirty
AutoGrid.on('afteredit', function(){
    if (!editedRow){
        editedRow = AutoGrid.getSelectionModel().getSelections();
    }
}, this);

Now that I’ve stored which row is dirty, every time the user clicks on another cell, I check a) there is a dirty row, and b) if the active row is the dirty row.

// Any time the user mouse downs on a cell,
// check to see if there are any dirty rows
AutoGrid.on('cellmousedown', checkForChanges, this);

function checkForChanges(){
    if (!editedRow){
        return true;      // No dirty rows
    } else {
        var selectedRow = AutoGrid.getSelectionModel().getSelections();
        var selectedRecord = selectedRow[0].data;
        var editedRecord;

        editedRecord = editedRow[0].data;

        if (selectedRecord.model != editedRecord.model){
            // Alert the user to save changes
            // See example for full code
        }
    }
}

Then if there is a dirty row, I can prompt the user and ask it to save its changes before editing another row.

View Dirty Row Example

Ok, inside a Sencha ExtJS DataGrid, I have assigned a ComboBox as the editor for one of the columns populated with its own Store of items. I’ve got a ColdFusion Component returning a query object, which is then converted into JSON with the ajaxCFC class.

var ItemCode = Ext.data.Record.create([
       {name: 'item_id', type: 'int'}
       {name: 'item_code', type: 'string'}
]);

var ItemCodesStore = new Ext.data.Store({
    autoLoad:false,
    proxy: new Ext.data.MemoryProxy(),
    reader: new Ext.data.JsonReader({ root: 'data'; }, ItemCode)
});

// Snippet from ColumnModel of DataGrid
header: 'Code',
dataIndex: 'existingCode',
width: 70,
editor: new Ext.form.ComboBox({
   mode: 'local',
   displayField: 'item_code',
   valueField: 'item_id',
   store: ItemCodesStore
})

This is straightforward code. The column represents the existingCode value in the DataGrid’s store, and when the user clicks on an individual cell, a ComboBox is rendered with possible values stored in ItemCodesStore.

My problem is that I want the item_code value displayed at all times. By default, when a user selects an item from the ComboBox, the item_id value will be displayed, because even though I have set displayField:’item_code’ in the ComboBox, the DataGrid has no knowledge of this, and always shows the valueField.

What I had to do was write a custom renderer for that column that does a search in the ItemCodes store for a matching item_id and return the item_code to be rendered instead.

function CodeRenderer(val){
    var matching = ItemCodesStore.queryBy(
                      function(rec,id){
                         return rec.item_id == val;
                      });
    return (matching.items[0]) ? matching.items[0].data.item_code : '';
};

// Snippet from ColumnModel of DataGrid
header: 'Code',
dataIndex: 'existingCode',
width: 70,
renderer: CodeRenderer,
editor: new Ext.form.ComboBox({
   mode: 'local',
   displayField: 'item_code',
   valueField: 'item_id',
   store: ItemCodesStore
})

I cut a lot of corners in that project in order to get it out in time, but there was only one hack that has haunted me since I reluctantly pushed it into production: I returned a large HTML string from an AJAX call and inserted it directly into the DOM.

It was far easier, at the time, to simply loop through the highly complex query structures in my class and build the HTML structure there rather than build a JSON string and use a JavaScript parsing class to build the HTML on the browser.

Well, in a little twist of fate, there was an update scheduled for this application; and this time I had some extra time as the release date got pushed back a couple of weeks. Using that to my advantage, I finally was able to fine-tune that entire mechanism, including:

All in all, this particular section of the application now executes about 70% faster, is less resource intensive on the database, and is easier to use.

It’s a big monkey off my back. Not to mention that I always enjoy going back to code from previous projects and seeing how I can improve upon it since I’m always learning new tricks.

I’ve got an app in which users need access to a dataset that is larger than 10k records. Pagination to the rescue (plus a search feature which I covered in my Replacing data in Sencha ExtJS grid store article).  I’m giving the users the option of paging through the results 100 at a time if they so wish.

It ended up being simple to accomplish after scouring through the documentation and looking at related articles throughout the Web.

First you need to have a script that returns sets of 100 results. In my case, I have a ColdFusion Component that does a CFQUERY on the table. I simply pass in the number from which I want to start my resultset and it returns the next 100 rows. Convert your query to a JSON string using serializeJSON() in ColdFusion, or any method you wish.

Next, I created a ColdFusion page that accepts a start parameter – which is sent from the PagingBar object in ExtJS – and passes that along to the CFC. The resulting JSON string simply gets output.

<cfsetting enablecfoutputonly="true">

<cfparam default="" name="start">

<cfscript>
providers = application.widget.framework.getBean('Insurance').listInsurance(startRecord=start);
writeOutput(insurers);
</cfscript>

<cfsetting enablecfoutputonly="false">

Next, create a Store object with this page as its proxy, and a JsonReader to parse the results.

var Insurer = Ext.data.Record.create([
       {name: 'col1', type: 'int'},
       {name: 'col2', type: 'string'},
       {name: 'col3', type: 'string'},
       {name: 'col4', type: 'int'}
]);

var InsurerStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'liveQueries/insurance.cfm'}),
    reader: new Ext.data.JsonReader({ root: 'data', totalProperty:'totalRecords' }, Insurer)
});

Now you can create your PagingBar object with the Store object you created as its datastore.

var PagingBar = new Ext.PagingToolbar({
    pageSize: 100,
    store: InsurerStore,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: 'No insurers to display'
});

Lastly, attach your PagingBar to a DataGrid object with the bbar property. You also have the option of performing an initial search to show the first 100 record to the user by default. To do this, just call the load() event on your Store (shown below).

var InsurerGrid = new Ext.grid.GridPanel({
   store             : InsurerStore,
   sm                : new Ext.grid.RowSelectionModel({singleSelect:true}),
   cm                : InsurerColumnModel,
   renderTo          : 'insurer-grid',
   frame             : true,
   bbar              : PagingBar
});

InsurerStore.load({params:{start:0, limit:100}});

I decided to tinker around with the drag & drop capabilities of ExtJS and originally had the user click a button, which created a window, into which the user could drag an item from each data set and create the mapping. It worked very well and was a much better interaction than the previous version.

I showed it to a colleague, and he actually thought of a way to make it better. Why not simply allow the user to click and drag an item from one grid to the item on the other grid to which she wanted to map it? Even better. However, when I started to think about the code I would need, I couldn’t think of how to determine which item in the “drop” data grid was the actual target.

Let’s say you have automobiles in one grid, and colors in another. You could let the user drag a color from the second grid onto a specific model of vehicle on the first, but the trick is determining onto which model the user dropped the color.

If I was able to detect the model, I could then show a new window with the requested mapping so that the user could verify her choice.

After some digging around, I discovered that the Grid object’s view has a findRowIndex() method which accepts an Element as an argument. Since the notifyDrop event provides the e.target() property, that was all I needed. I could get the row index, and then retrieve the corresponding item from the data store.

// Determine the row on which the color was dropped
targetRow = TargetGrid.getView().findRowIndex(e.target);
targetDataItem = TargetGrid.store.data.items[targetRow];

You can check out the sample code that shows how to determine the target grid element on my Drag & Drop Target Detection example page.

To make it easier on my users, I put a Ext.form.ComboBox in the toolbar of the grid which can be used by the users to search for records. The problem I was having was twofold:

1. The ComboBox has one Ext.data.Store and the data grid has another one that is used to display the default, first 100 records in the table.
2. The ComboBox displays its results in a list beneath itself by default, but I wanted the results displayed in the grid.

The second problem was easy enough to solve. When the list is shown it raises the expand event, so I capture that and immediately close it again with the collapse() method.

However, having the data grid, in essence, be able to display the contents of two different Stores was a bit more problematic since Ext.grid.GridPanel doesn’t have a setStore() method (which, I suppose, I could have implemented). My solution was to copy the contents of the search results into the store used by the GridPanel. This way, the user can still page the entire data set if she so wishes, but search results will override the Store when it is done.

// Create the data store for all things found with the search bar with each row represented by a Thing
var ProviderSearchStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'liveQueries/searchForStuff.cfm'}),
    reader: new Ext.data.JsonReader({ root:'data',totalProperty:'recordcount'}, Thing)
});

// Since the grid is using the ProviderStore, when the store for the
// search feature is populated, clear out the grid's store and populate
// it with the records retrieved in the search
SearchStore.on('load',
    function()
    {
        var allRecords = SearchStore.getRange();
        DefaultStore.removeAll();
        DefaultStore.add(allRecords);
    });

/*
 * When the list of results is shown, immediately collapse it since we're
 * showing the results in the grid
 */
combo.on('expand', function(){ combo.collapse(); });

// Create the data store for all insurers with each row represented by an Insurer
var DefaultStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'liveQueries/getStuff.cfm'}),
    reader: new Ext.data.JsonReader({ root:'data', totalProperty:'totalRecords' }, Thing)
});

// Create the grid to show insurers
var grid = new Ext.grid.GridPanel({
    store: DefaultStore,
    renderTo: 'grid-div',
    title:'Stuff',
    frame:true,
	bbar: PagingBar,
	tbar:[
            {text:'Search for insurer'},
            new Ext.Toolbar.Spacer(),
	    ProviderSearch
    ]
});

Here’s what the final control looks like. As you see, I searched for ‘ZA’, which returned only one result, which is now shown in the grid. Below, you can see that the original data set is still being stored in the paging toolbar’s data store, so just by clicking the refresh button, the first 100 rows in the table will be displayed again.

I’ve got a list of several thousand insurance plans I need to display to the users of one of my applications. I originally implemented a standard Ext.PagingToolbar to add to the footer of my data grid, but I’ve never been a fan of that navigation pattern, and I suspect that my users wouldn’t be either.

I then thought of sites like Google Reader that automatically retrieves the next set of records as soon as it detects that you’ve scrolled to a certain place in the reading element. A quick trip to my friend Google uncovered an article on The Code Project by Jason Witty that provided an example of just this technique.

A quick adaptation to my application provided a working example:

var emptyData;

// Set default scroll variables.
var currentpos = 0;
var currentpage = 1;

// Set constants.
//itemsperpage: number of records that appear on each page of content.
var itemsperpage = 100;

// Number of pages of content to fetch when offset reached.
var pagestofetch = 1;

// Number of pixel interval to fire handler request. You'll need to adjust this value
// depending on the location and size of your data grid
var scrolloffset = 1800;
var scrolloffsetinterval = 1800;

// Create the column model to display only the data needed for the users
var InsurerColumnModel = new Ext.grid.ColumnModel([{
       id:'col1',
       header: "Abbreviation",
       dataIndex: 'col1',
       width: 120
    },{
       id:'col2',
       header: "Name",
       dataIndex: 'col2',
       width: 240
    },{
       id:'col3',
       header: Group",
       dataIndex: 'col3',
       width: 120
    }
]);

// Create a JSON Store to hold the data elements
var ScrollingProviderStore = new Ext.data.JsonStore({
	data:     emptyData,
	root:     'data',
	fields:   Insurer
});

// Create the grid to display each insurer
var InsurerGrid = new Ext.grid.GridPanel({
    store: ScrollingProviderStore,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    cm: InsurerColumnModel,
    renderTo: 'insurer-display-grid',
    stripeRows: true,
    width:'auto',
    height:350,
    autoScroll: true,
    autoExpandColumn:'col2',
    title:'Insurance Plans',
    frame:true
});

// Create an event listener for when the user scrolls the grid
InsurerGrid.addListener('bodyscroll',scrollListener);

// Fires when grid is scrolled
function scrollListener(scrollLeft, scrollTop){
    // Only handle scroll downs past highest position.
    if ( scrollTop > currentpos )
    {
        // Check if we should get more data
        if ( scrollTop >  scrolloffset )
        {
            // Store current grid scroll state.
            var state = InsurerGrid.getView().getScrollState();

            // Adjust scroll offset
            scrolloffset = scrollTop + scrolloffsetinterval;

            // Adjust current page
            currentpage = currentpage + 1;

            $.AjaxCFC({
	        url: "ajaxCFC/ajax.cfc",
	        factory: "application.framework",
	        bean: "Insurance",
	        method: "listProviders",
	        data: { 'start': currentpage },
	        timeout:30000,
	        useDefaultErrorHandler: false,
	        success: function(result) {
	            var insurers = eval("(" + result + ")");
	            ScrollingProviderStore.loadData(insurers,true);

                    // Restore the scrollbar state back to where the user
                    // triggered the load.
                    InsurerGrid.getView().restoreScroll(state);
	        },
                error: function(results) {
	            Ext.MessageBox.alert("Failed", "Failed to retrieve insurers. Please try again.");
	        }
	   });
        }

        currentpos=scrollTop;
    }
};

One little tidbit that I thought I’d pass along is a simple trick that most Javascript developers know how to do, but may trip up someone just getting into advanced Javascript development with some of the major libraries out there.

Knowing the proper scope of your Javascript variables is a task that everyone who’s worked with the language knows is important. Using libraries like jQuery and ExtJS make it a bit tricker. An example is when you want to pass an entire argument collection from one function to another and then use that argument collection inside a closure for, say, an ExtJS MessageBox.

At first, you may have the desire to simply pass the argument array from the first function to the second.

function confirm(one, two, three, four) {
    Ext.MessageBox.show({
        title: 'Confirmation',
        msg: 'Please confirm that you want to delete this.',
        buttons: Ext.MessageBox.YESNO,
        fn: function (btn) {
           if(btn == 'yes') doAction(arguments);
        }
    });
}

function doAction(one, two, three, four) {
    $.AjaxCFC({
        url: "com/acme/Widget.cfc",
        method: "delete",
        data: { 'one':one,
                'two':two,
                'three':three,
                'four':four
        }
    });
}

But the execution block that actually calls the doAction() method in within a closure inside the main confirm() method. What this means is that the argument array actually contains the arguments for that anonymous function to handle the button click on the confirmation message.

What you need to do is preserve the arguments collection in a variable scoped to the confirm() method – which is available to the closure (one of the strengths of Javascript) – which can then be passed to the doAction() method.

You then use the apply() method on the function (the apply() method allows you to pass the arguments array) and pass that holding variable.

function confirm(one, two, three, four) {
    var args = arguments;

    Ext.MessageBox.show({
        title: 'Confirmation',
        msg: 'Please confirm that you want to delete this.',
        buttons: Ext.MessageBox.YESNO,
        fn: function (btn) {
           if(btn == 'yes') doAction.apply(this, args);
        }
    });
}

function doAction() {
    var args = arguments;

    $.AjaxCFC({
        url: "com/acme/Widget.cfc",
        method: "delete",
        data: { 'one':args[0],
                'two':args[1],
                'three':args[2],
                'four':args[3]
        }
    });
}

Javascript is such a beautiful and powerful language. I have to say I’ve missed working with it.