Ola Bildtsen

ExtJS 4: Combobox with multiple auto-complete values

Ola Bildtsen — Tue, 15 May 2012 15:43:45 +0000

I was looking for a simple way to have a text field that uses auto-complete and allows for multiple values. As an example, consider a text field that needs to hold several email addresses where each address is auto-completed. I ran across the Boxselect for ExtJS 4 implementation and gave that a whirl. Trouble is it doesn’t allow for non-selected values (no free text) and it seemed like overkill for our purposes. We just wanted a simple comma-separated list like in this JQuery UI autocomplete example.

Turns out it’s rather straight-forward to emulate the JQuery UI autocomplete example by simply handling some events from the ExtJS Combobox component. We set up a Combobox in the view with a remote store, like so:

    {
        xtype: 'combobox',
        itemId: 'emails',
        name: 'emails',
        minChars: 1,
        store: 'EmailSuggestionStore',
        displayField: 'email',
        typeAhead: true,
        queryMode: 'remote',
        hideTrigger: true,
        selectOnFocus: true,
        emptyText: 'Add users\' email addresses here, separated by commas'
    }

Then we need to intercept some of the events that the Combobox fires, in order to make the multiple values work the way we want. The controller code looks like this:

            'myWindow #emails': {
                'change': function(cmp) {
                    if (!(cmp.getValue() && cmp.getValue().length > 0)) {
                        // We didn't want the picker to remain open if the user backspaces to empty
                        cmp.collapse();
                    }
                },
                'beforeselect': function(cmp, record, index, opts) {
                    var terms = cmp.getValue().split( /,\s*/ );
                    terms.pop();
                    terms.push(record.get('email'));
                    terms.push("");
                    cmp.setValue(terms.join( ", " ));
                    cmp.collapse();
                    // We've handled the updating of the field, return false to cancel the default behavior
                    return false;
                },
                'beforequery': function(queryEvent, opts) {
                    var terms = queryEvent.query.split( /,\s*/ );
                    queryEvent.query = terms[terms.length - 1];
                    return (queryEvent.query && queryEvent.query.length > 0);
                }
            }

ExtJS 4.0.7: Getting default GridPanel multiSelect behavior when using ‘gridviewdragdrop’ plugin

Ola Bildtsen — Fri, 24 Feb 2012 19:19:07 +0000

With ExtJS 4 comes the nice feature of being able to set up dragging from a GridPanel by simply specifying the ‘gridviewdragdrop’ plugin on the viewConfig, like so:

...
multiSelect: true,
viewConfig: {
    copy: true,
    plugins: {
        ptype: 'gridviewdragdrop',
        dragGroup: 'myDDGroup',
        enableDrop: false
    }
},
...

But when the ‘gridviewdragdrop’ plugin is added, one default feature of the normal GridPanel selection model goes away: if multiple items are selected in the grid and one of those selected items is clicked, all the others should be deselected and that one items should remain selected. With the plugin added, a click on one of the selected items does nothing — all items remain selected. This behavior is due to the following snippet from Ext.view.DragZone:

    onItemMouseDown: function(view, record, item, index, e) {
        if (!this.isPreventDrag(e, record, item, index)) {
            this.handleMouseDown(e);
 
            // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
            // if the mousedowned record is selected
            if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) {
                return false;
            }
        }
    },

As the comment states, the event is cancelled in order to prevent the deselect of the multiple selected items before the drag happens. One way to get around this and reinstate the default select behavior is to override Ext.view.DragZone like this:

Ext.view.DragZone.override({
 
    singleSelectRecord: null,
 
    onItemMouseDown: function(view, record, item, index, e) {
        if (!this.isPreventDrag(e, record, item, index)) {
            this.handleMouseDown(e);
 
            this.singleSelectRecord = null;
            if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) {
                if (view.getSelectionModel().getCount() > 1) {
                    // Default behavior of the dragzone is to simply return false.  But that cancels the default grid
                    // behavior of selecting the one thing if multiple things were selected.  So instead, save the
                    // record here and do the default grid behavior if a drag is never initiated.
                    this.singleSelectRecord = record;
                }
                return false;
            }
        }
    },
 
    onStartDrag: function(x, y) {
        // Drag was initiated, so don't do default grid behavior (see above)
        this.singleSelectRecord = null;
    },
 
    onMouseUp: function(e) {
        if (this.singleSelectRecord) {
            // Drag was not initiated, and we have a record (see above), so now do the default grid behavior
            this.view.getSelectionModel().select(this.singleSelectRecord);
            this.singleSelectRecord = null;
        }
    }
 
});

The comments in the code should speak for themselves, but in essence we’re retaining the record for which we cancelled the default select behavior and then acting on it if the drag was never initiated before the next mouseup event.

Updated DropZone example for Ext JS 4.0

Ola Bildtsen — Tue, 14 Feb 2012 20:37:10 +0000

Since the example of a custom DropZone for a GridPanel in the 4.0.7 API docs is out of date (and doesn’t work), and I wasn’t able to find a working example, here’s a simplified example of a custom DropZone for a GridPanel. This listener is attached to the GridPanel component, and notice that we need to do it in afterrender, not render:

...
                'afterrender': function(cmp) {
                    this.dropZone = new Ext.dd.DropZone(cmp.getView().getEl(), {
 
                        getTargetFromEvent: function(e) {
                            return e.getTarget(cmp.getView().itemSelector);
                        },
 
                        onNodeOver : function(target, dd, e, data){
                            return Ext.dd.DropZone.prototype.dropAllowed;
                        },
 
                        onNodeDrop : function(target, dd, e, data){
                            var record = cmp.getView().getRecord(target);
                            return true;
                        }
                    });
                }
...

Preventing SWF reload in Ext JS 4 card layout

Ola Bildtsen — Thu, 02 Feb 2012 14:07:23 +0000

We have a SWF object in an Ext JS 4 card layout, and were getting annoyed that each time you switched away from that card the SWF would reload. Our layout is actually a nested card layout (two levels deep), so the problem was a little more complicated. I tried various ways around this with mixed success, the biggest issue being that it worked differently in Firefox and Chrome. After much searching I finally came across this post: http://www.sencha.com/forum/archive/index.php/t-22016.html. By applying the following to each card-layout panel (setting the defaults for its children/items), the SWF won’t reload in Chrome, Firefox, IE 8+, or Safari when hiding/showing the card:

...
                {
                    xtype: 'panel',
                    layout: {
                        type: 'card'
                    },
                    defaults: Ext.apply({
                        closable: false
                    },
                    Ext.isGecko ?
                        {
                            style: {
                                position:'absolute'
                            },
                            hideMode: 'visibility'
                        }
                        :
                        {
                            hideMode: 'offsets'
                        }
                    ),
                    items: [
...

Stark Security version 0.4.3 released

Ola Bildtsen — Fri, 20 Nov 2009 19:39:59 +0000

I’m pleased to announce the latest version of the Stark Security plugin for Grails has been released. Docs have been updated and release notes are available: http://grails.org/plugin/stark-security.

In short, this release upgrades to Spring Security 2.0.5, and contains a fix for configurable support for session fixation attack prevention.

Webcast: Introduction to Flex and AIR

Ola Bildtsen — Fri, 02 Oct 2009 17:29:08 +0000

I recently did a “tech talk” at work — an introduction to Adobe’s Flex and AIR. The presentation is geared to the techie with some UI-building experience but with little or no knowledge of Flex or FlexBuilder.

Although there are some high-level introductory/overview slides up front, the bulk of the presentation is a build-it-from-scratch session that shows how to use FlexBuilder to put together a simple Flex app (the obligatory Twitter client). It also shows how to work with a library project, and then goes on to create an AIR application using a shared component. Towards the end, I’m firing up FlexMonkey to show how to test the Flex app we built and how to generate the scripts and AS3 code needed to integrate those tests in a CI build.

The slides are here. There are not that many, but there are some useful links on the last slide.

The Flex projects built during the presentation are here.

Stark Security version 0.4.2 released

Ola Bildtsen — Tue, 27 Jan 2009 17:08:11 +0000

Readers of this blog and people on the grails user list noted some difficulties with UTF encoding with the previous release of the stark security plugin. I’m happy to announce this bug-fix release (version 0.4.2) which takes care of the UTF encoding problem, and also fixes another defect related to moving the User and Role domain classes into packages.

Please give it a whirl and let me know if you have any comments and/or questions!

Docs and release notes are here: http://www.grails.org/Stark+Security+Plugin

Stark Security Version 0.4 Released

Ola Bildtsen — Fri, 09 Jan 2009 17:33:52 +0000

This is the second release since my last post — since 0.2.x these are the highlight changes:

allow for simple listening/handling of Spring Security authentication/authorization events
allow the application to participate/intercept at various points of the Spring Security filter chain.
various defect fixes

Updated docs and release details are available here: http://www.grails.org/Stark+Security+Plugin

Stark Security Plugin version 0.2.2 Released

Ola Bildtsen — Fri, 05 Dec 2008 16:49:54 +0000

I’m pleased to announce the release of version 0.2 of the Stark Security plugin. Not a huge deal, but a few convenience enhancements:

Enable arbitrary password encoding algorithms, on a DAO provider basis
Allow for tweaks to authorization mappings in StarkSecurityConfig.groovy without app restart.
Let user install the plugin but defer configuration (this used to result in exceptions on app startup).

The 0.2.2 bug-fix release solves an issue with custom url mappings not responding to the authorization mappings in controllers. With this fix, any custom mappings in UrlMappings will resolve to the authorization mappings of the eventual controller target.

Documentation (including upgrade instructions, release notes, etc.) is here: http://www.grails.org/Stark+Security+Plugin

As always, comments/questions/suggestions are much appreciated!

Announcing Stark Security Plugin for Grails

Ola Bildtsen — Sat, 22 Nov 2008 22:33:21 +0000

I’m happy to announce the release of the new Stark Security plugin to the Grails plugins repository. It’s a cleaned-up (and, hopefully, simplified) edition of the alternative Spring Security plugin previously mentioned here. The main focus of this plugin is to provide a simple yet strong security solution, and it’s different from the standard acegi and jsecurity plugins in that it offers:

Lock-down or ‘pessimistic’ approach. Instead of leaving the web application open and relying on configured rules to lock down certain areas, the Stark Security plugin locks down everything by default. Developers open up access on a controller-method basis as they are coding the controllers.
Authorization mappings by convention. The determination of which roles can access which URLs is declared by convention in every controller, right next to the eventual URL end-points (controller methods). This makes for very straight-forward implementation and maintenance of the security rules.

Version 0.1 is available by simply running this from within your Grails project:

grails install-plugin stark-security

Documentation is available at the Stark Security Plugin page at the Grails plugins web site.