Ext JS: Generating a Checkbox Group from a Store

February 12, 2015 Leave a comment

Ext JS checkbox groups enable you to group checkboxes into a single logical field. Since these checkboxes are often times dynamically generated from a store, I thought that it might make sense to extend the class with some store binding. Here’s my first, lightly tested attempt:

 Ext.define('Ext.ux.CheckboxStoreGroup', {
    extend: 'Ext.form.CheckboxGroup',
    alias: 'widget.checkboxstoregroup',
    config: {
        store: null,
        labelField: 'label',
        valueField: 'id',
        checkedField: 'checked',
        columns: 3,
        boxFieldName: 'mycheckbox'
    applyStore: function(store) {
        if (Ext.isString(store)) {
            return Ext.getStore(store);
        } else {
            return store;
    updateStore: function(newStore, oldStore) {
        if (oldStore) {
            store.removeEventListener('datachanged', this.onStoreChange, this)
        newStore.on('datachanged', this.onStoreChange, this);
    onStoreChange: function(s) {
        var vField = this.getValueField();
        var lField = this.getLabelField();
        var cField = this.getCheckedField();
        var fName = this.getBoxFieldName();
        var rec = null;
        for (var i=0; i<s.getCount(); i++) {
            rec = s.getAt(i);
                xtype: 'checkbox',
                inputValue: rec.get(vField),
                boxLabel: rec.get(lField),
                checked: rec.get(cField),
                name: fName
    initComponent: function() {
        this.on('afterrender', this.onAfterRender);
    onAfterRender: function() {   
        if (this.getStore().totalCount) {

You can test and play around with the code here:


Categories: Ext JS 4, Ext JS 5

Using Brackets for Ext JS Development

February 12, 2015 3 comments

Recently I evaluated using Brackets, a free, open-source, multiplatform-editor as a potential replacement for Sublime Text in our Javascript training courses.
Brackets has a lot going for it:

  • It’s free
  • Installation is simple
  • It’s open source
  • Projects are directory-based, just like Sublime
  • It has a js linter built in
  • It has some intellisense
  • It does *not* auto-complete array and object syntax (brackets and curly braces)
  • It supports scss (Sassy CSS)
  • Performance doesn’t completely suck
  • It’s supports 3rd Party Plugins
  • It’s available for multiple OS.

And while it doesn’t fully support Sencha’s massive Ext JS library, it should help students quickly identify syntax problems with their json configs. I was able to configure Bracket’s built-in JS Linter to ignore nearly all of its “false-positive” errors and warnings.

The trick is to modify Bracket’s preferences file (Debug > Open Preferences File) as follows:

    "linting.collapsed": false,
    "themes.theme": "light-theme",
    "jslint.options": {
        "plusplus": true,
        "devel": true,
        "predef": [
        "sloppy": true,
        "browser": true,
        "white": true
    "useTabChar": false

You’ll need to restart Brackets for these changes to take effect.

So if you’re looking for a change of pace from using Sublime, or money is tight and you can’t afford JetBrains WebStorm or Sencha Architect, it’s worth giving Brackets a try.

Download Brackets at http://brackets.io/

Happy coding!

Categories: Ext JS 5, JavaScript

Fig Leaf Software’s Ext JS 5 Fiddles

February 9, 2015 Leave a comment
Categories: Ext JS 5 Tags: ,

I Can’t Fight This Framework Anymore…

January 26, 2015 4 comments

I can’t fight this framework any longer.
It seems like such a really great gizmo
What started out as a small ZIP
Has grown larger.
And its learning curve will make my work go slow

I tell myself that I can’t hold out forever.
Friends said there is no reason for my fear.
I feel so secure when I read their forums
It should give my work direction,
And make everything so clear.

And even as I ponder,
Converting every app in sight
Its docs make my brow furrow
As I code late into the night
But I’m getting closer than I ever thought I might.

And I can’t fight this framework anymore.
Writing my own code is such a chore.
Gotta learn before my job gets shipped offshore
And stays in Eastern Europe forever

And I can’t fight this framework anymore.
I’ve forgotten what I started fighting for.
It’s time to put my app into the store,
And delete the backdoors, forever.

Cause I can’t fight this framework anymore.
I’ve forgotten what I started fighting for.
Tired of my ux being an eyesore
Gonna show my boss I am hardcore!
Baby, I can’t fight this framework anymore.

Categories: Humor

Converting an Ext 5 Grid to Excel Spreadsheet

December 26, 2014 Leave a comment

A slightly belated holiday gift — my Ext JS Grid to Excel code, now updated for Ext JS 5!

Features include:

  • Group support
  • Handling of numeric vs string data types
  • Post back to an app server for browsers that don’t support client-side downloads



    Excel.js - convert an ExtJS 5 grid into an Excel spreadsheet using nothing but
    javascript and good intentions.

    By: Steve Drucker
    Dec 26, 2014
    Original Ext 3 Implementation by: Nige "Animal" White?
    Contact Info:

    e. sdrucker@figleaf.com
    blog: druckit.wordpress.com
    linkedin: www.linkedin.com/in/uberfig
    git: http://github.com/sdruckerfig
    company: Fig Leaf Software (http://www.figleaf.com / http://training.figleaf.com)

    Invocation:  grid.downloadExcelXml(includeHiddenColumns,title)

    Upgraded for ExtJS5 on Dec 26, 2014


var Base64 = (function() {
    // Private property
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    // Private method for UTF-8 encoding

    function utf8Encode(string) {
        string = string.replace(/\r\n/g, "\n");
        var utftext = "";
        for (var n = 0; n < string.length; n++) {
            var c = string.charCodeAt(n);
            if (c < 128) {
                utftext += String.fromCharCode(c);
            } else if ((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            } else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
        return utftext;

    // Public method for encoding
    return {
        encode: (typeof btoa == 'function') ? function(input) {
            return btoa(utf8Encode(input));
        } : function(input) {
            var output = "";
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
            var i = 0;
            input = utf8Encode(input);
            while (i < input.length) {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                output = output +
                    keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                    keyStr.charAt(enc3) + keyStr.charAt(enc4);
            return output;

Ext.define('MyApp.overrides.view.Grid', {
    override: 'Ext.grid.GridPanel',
    requires: 'Ext.form.action.StandardSubmit',

        Kick off process

    downloadExcelXml: function(includeHidden, title) {

        if (!title) title = this.title;

        var vExportContent = this.getExcelXml(includeHidden, title);

          dynamically create and anchor tag to force download with suggested filename 
          note: download attribute is Google Chrome specific

        if (Ext.isChrome) {
            var gridEl = this.getEl();
            var location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(vExportContent);

            var el = Ext.DomHelper.append(gridEl, {
                tag: "a",
                download: title + "-" + Ext.Date.format(new Date(), 'Y-m-d Hi') + '.xls',
                href: location



        } else {

            var form = this.down('form#uploadForm');
            if (form) {
            form = this.add({
                xtype: 'form',
                itemId: 'uploadForm',
                hidden: true,
                standardSubmit: true,
                url: 'http://webapps.figleaf.com/dataservices/Excel.cfc?method=echo&mimetype=application/vnd.ms-excel&filename=' + escape(title + ".xls"),
                items: [{
                    xtype: 'hiddenfield',
                    name: 'data',
                    value: vExportContent




        Welcome to XML Hell
        See: http://msdn.microsoft.com/en-us/library/office/aa140066(v=office.10).aspx
        for more details

    getExcelXml: function(includeHidden, title) {

        var theTitle = title || this.title;

        var worksheet = this.createWorksheet(includeHidden, theTitle);
        if (this.columnManager.columns) {
            var totalWidth = this.columnManager.columns.length;
        } else {
             var totalWidth = this.columns.length;

        return ''.concat(
            '<?xml version="1.0"?>',
            '<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40">',
            '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Title>' + theTitle + '</Title></DocumentProperties>',
            '<OfficeDocumentSettings xmlns="urn:schemas-microsoft-com:office:office"><AllowPNG/></OfficeDocumentSettings>',
            '<ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">',
            '<WindowHeight>' + worksheet.height + '</WindowHeight>',
            '<WindowWidth>' + worksheet.width + '</WindowWidth>',


            '<Style ss:ID="Default" ss:Name="Normal">',
            '<Alignment ss:Vertical="Bottom"/>',
            '<Font ss:FontName="Calibri" x:Family="Swiss" ss:Size="12" ss:Color="#000000"/>',

            '<Style ss:ID="title">',
            '<Borders />',
            '<Font ss:Bold="1" ss:Size="18" />',
            '<Alignment ss:Horizontal="Center" ss:Vertical="Center" ss:WrapText="1" />',
            '<NumberFormat ss:Format="@" />',

            '<Style ss:ID="headercell">',
            '<Font ss:Bold="1" ss:Size="10" />',
            '<Alignment ss:Horizontal="Center" ss:WrapText="1" />',
            '<Interior ss:Color="#A3C9F1" ss:Pattern="Solid" />',

            '<Style ss:ID="even">',
            '<Interior ss:Color="#CCFFFF" ss:Pattern="Solid" />',

            '<Style ss:ID="evendate" ss:Parent="even">',
            '<NumberFormat ss:Format="yyyy-mm-dd" />',

            '<Style ss:ID="evenint" ss:Parent="even">',
            '<Numberformat ss:Format="0" />',

            '<Style ss:ID="evenfloat" ss:Parent="even">',
            '<Numberformat ss:Format="0.00" />',

            '<Style ss:ID="odd">',
            '<Interior ss:Color="#CCCCFF" ss:Pattern="Solid" />',

            '<Style ss:ID="groupSeparator">',
            '<Interior ss:Color="#D3D3D3" ss:Pattern="Solid" />',

            '<Style ss:ID="odddate" ss:Parent="odd">',
            '<NumberFormat ss:Format="yyyy-mm-dd" />',

            '<Style ss:ID="oddint" ss:Parent="odd">',
            '<NumberFormat Format="0" />',

            '<Style ss:ID="oddfloat" ss:Parent="odd">',
            '<NumberFormat Format="0.00" />',



        Support function to return field info from store based on fieldname


    getModelField: function(fieldName) {

        var fields = this.store.model.getFields();
        for (var i = 0; i < fields.length; i++) {
            if (fields[i].name === fieldName) {
                return fields[i];

        Convert store into Excel Worksheet

    generateEmptyGroupRow: function(dataIndex, value, cellTypes, includeHidden) {

        var cm = this.columnManager.columns;
        var colCount = cm.length;
        var rowTpl = '<Row ss:AutoFitHeight="0"><Cell ss:StyleID="groupSeparator" ss:MergeAcross="{0}"><Data ss:Type="String"><html:b>{1}</html:b></Data></Cell></Row>';
        var visibleCols = 0;

        // rowXml += '<Cell ss:StyleID="groupSeparator">'

        for (var j = 0; j < colCount; j++) {
            if (cm[j].xtype != 'actioncolumn' && (cm[j].dataIndex != '') && (includeHidden || !cm[j].hidden)) {
                // rowXml += '<Cell ss:StyleID="groupSeparator"/>';

        // rowXml += "</Row>";

        return Ext.String.format(rowTpl, visibleCols - 1, Ext.String.htmlEncode(value));

    createWorksheet: function(includeHidden, theTitle) {
        // Calculate cell data types and extra class names which affect formatting
        var cellType = [];
        var cellTypeClass = [];
        if (this.columnManager.columns) {
            var cm = this.columnManager.columns;
        } else {
            var cm = this.columns;
        var colCount = cm.length;
        var totalWidthInPixels = 0;
        var colXml = '';
        var headerXml = '';
        var visibleColumnCountReduction = 0;

        for (var i = 0; i < cm.length; i++) {
            if (cm[i].xtype != 'actioncolumn' && (cm[i].dataIndex != '') && (includeHidden || !cm[i].hidden)) {
                var w = cm[i].getEl().getWidth();
                totalWidthInPixels += w;

                if (cm[i].text === "") {
                } else {
                    colXml += '<Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
                    headerXml += '<Cell ss:StyleID="headercell">' +
                        '<Data ss:Type="String">' + cm[i].text.replace("<br>"," ") + '</Data>' +
                        '<NamedCell ss:Name="Print_Titles"></NamedCell></Cell>';

                    var fld = this.getModelField(cm[i].dataIndex);
                    switch (fld.$className) {
                        case "Ext.data.field.Integer":
                        case "Ext.data.field.Number":
                        case "Ext.data.field.Boolean":
                        case "Ext.data.field.Date":
        var visibleColumnCount = cellType.length - visibleColumnCountReduction;

        var result = {
            height: 9000,
            width: Math.floor(totalWidthInPixels * 30) + 50

        // Generate worksheet header details.

        // determine number of rows
        var numGridRows = this.store.getCount() + 2;
        if ((this.store.groupField &&!Ext.isEmpty(this.store.groupField)) || (this.store.groupers && this.store.groupers.items.length > 0)) {
            numGridRows = numGridRows + this.store.getGroups().length;

        // create header for worksheet
        var t = ''.concat(
            '<Worksheet ss:Name="' + theTitle + '">',

            '<NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + theTitle + '\'!R1:R2">',

            '<Table ss:ExpandedColumnCount="' + (visibleColumnCount + 2),
            '" ss:ExpandedRowCount="' + numGridRows + '" x:FullColumns="1" x:FullRows="1" ss:DefaultColumnWidth="65" ss:DefaultRowHeight="15">',
            '<Row ss:Height="38">',
            '<Cell ss:MergeAcross="' + (visibleColumnCount - 1) + '" ss:StyleID="title">',
            '<Data ss:Type="String" xmlns:html="http://www.w3.org/TR/REC-html40">',
            '<html:b>' + theTitle + '</html:b></Data><NamedCell ss:Name="Print_Titles">',
            '<Row ss:AutoFitHeight="1">',
            headerXml +

        // Generate the data rows from the data in the Store
        var groupVal = "";
        var groupField = "";
        if (this.store.groupers && this.store.groupers.keys.length > 0) {
            groupField = this.store.groupers.keys[0];
        } else if (this.store.groupField != '') {
             groupField = this.store.groupField;
        for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {

            if (!Ext.isEmpty(groupField)) {
                if (groupVal != this.store.getAt(i).get(groupField)) {
                    groupVal = this.store.getAt(i).get(groupField);
                    t += this.generateEmptyGroupRow(groupField, groupVal, cellType, includeHidden);
            t += '<Row>';
            var cellClass = (i & 1) ? 'odd' : 'even';
            r = it[i].data;
            var k = 0;
            for (var j = 0; j < colCount; j++) {
                if (cm[j].xtype != 'actioncolumn' && (cm[j].dataIndex != '') && (includeHidden || !cm[j].hidden)) {
                    var v = r[cm[j].dataIndex];
                    if (cellType[k] !== "None") {
                        t += '<Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><Data ss:Type="' + cellType[k] + '">';
                        if (cellType[k] == 'DateTime') {
                            t += Ext.Date.format(v, 'Y-m-d');
                        } else {
                            t += Ext.String.htmlEncode(v);
                        t += '</Data></Cell>';
            t += '</Row>';

        result.xml = t.concat(
            '<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">',
        return result;
Categories: Ext JS 5

CommonSpot Custom Field Crazyness!

November 1, 2014 1 comment

We were recently tasked by the University of Wisconsin, Eau-Claire to produce a series of advanced custom elements to help their content contributors generate a Pinterest-style image grid.

There are three major components to the element:

  1. An image editor that allows contributors to upload an image and then pan/zoom/crop to a specific image size.
  2. An editor that allows contributors to overlay caption on top of the cropped image.
  3. Output of multiple cropped & captioned images into a responsive, pinterest-style display

Creating the Image Editor Custom Field

Starting from a codebase with limited pan/zoom cropping functionality (http://danielhellier.com/imagecrop/), we refactored the jQuery component to support fixed-sized crop areas as well as implement a bounding box and also tied in a slider component to enable easy-to-use zooming. We also added in the capability to transmit the scaling/cropping coordinates to an application server for server-side processing.

[Click here to play around with the proof-of-concept]

Adding Text Captioning by using a Draggable, Editable <h3> Element

For this project, we needed to give contributors the ability to place a text overlay on the image. The word “and” would need to be automatically converted to uppercase and have a style applied via CSS. To enable the users to choose a color, we used the spectrum plugin for jQuery which generally worked as advertised.

You can make editable <div> segments by simply adding a contenteditable attribute to a block element as illustrated below. The cropped image was simply placed behind the <h3> in the container

<div id="#fqfieldname#-container" style="width: #adjustedWidth#px; height: #adjustedHeight#px">
  <div id="#fqfieldname#-preview" style="border: 1px solid black">

	<h3 class="POAeditablelabel"
            id="edittext-#fqFieldName#" contenteditable

	<img id="#fqfieldname#-image"
	  height: #stParams.nHeight#px;"
 	 <cfif poaAttribs.src is not ""> src="#poaAttribs.src#"</cfif>


We then applied jQuery UI’s draggable plugin to enable the user to drag the editable heading within it’s container:

	jQuery('##edittext-#fqFieldName#').draggable({ containment: 'parent', axis: 'y' })
  	.click(function() {
	  jQuery(this).draggable({ disabled: false });
	}).dblclick(function() {
	  jQuery(this).draggable({ disabled: true });

Creating a Pinterest-Style Render Handler

Leveraging the jQuery isotope and jQuery lazyload plugins, Fig Leaf’s developers were able to devise an algorithm that would automatically resize images into a “pinterest”-style image grid in order to minimize the right margin space that typically results from implementing these types of layouts as well as work with the dyanamic text overlays required by the customer.

Every time the browser is resized, we dynamically rewrite the image CSS classes and then reinvoke the isotope plugin. The key javascript function, executed on browser resize, is illustrated here:


function generateStyles() {
 // get pointer to stylesheet			
 var ss = $("#POADynamicStyles"); 
 var container = $("#POAcontainer");
 var width = container.width();
// set minimum width of images to 160, maximum width to 201
 var minWidth = 160, maxWidth = 201, iWidth = 0;
 // figure out the optimal number of cols, given the available space
 for (var numCols=2; numCols<15; numCols++) {
   iWidth = Math.ceil(width / numCols);
   // console.log('cols', numCols, 'width', iWidth);
   if (iWidth <= maxWidth && iWidth >= minWidth) {
  if (numCols == 15) {
    numCols = 3;
    console.log('auto sizing failed');
  // 10px margin around images
  var w1 = Math.floor(width / numCols) - 10;

  var reducePercentage = w1/250;
  var fontSize = reducePercentage * 2.7125;
  var lineHeight = 1;
  var heightOffset = 0;

  heightOffset = (-0.13 * (100 - (reducePercentage * 100)));

  var styles = ''.concat(
	'.item.w2  {width : {1}px;} \n',
	'.item.h2 {height: {1}px;} \n',
	'.item {width : {0}px; height: {0}px;}\n',
	'.item h3 {font-size: {2}rem; line-height: {3}; transform : translate(0px,{4}px)}'
   initIsotope(w1 + 10);

[You can view an early proof-of- concept by clicking here].

Would you like to know more?

Contact Fig Leaf Software’s Professional Services group at info@figleaf.com to discover how we can help you achieve your CMS implementation goals.

Categories: ColdFusion, JavaScript

Case Study: NACCHO Model Practices

October 10, 2014 Leave a comment

The National Association of City and County Health Officials engaged Fig Leaf Software to develop a dynamic form/workflow/collaboration application using web standards. We used Sencha’s Ext JS 4 javascript framework for the front-end development and Microsoft .NET/SQL Services on the back-end to create a 3-tiered REST-based architecture that positions them for future growth.

The Challenge

NACCHO’s Model Practices Program honors and recognizes outstanding local health practices from across the nation and shares and promotes these practices among local health departments (LHDs). Model and promising practices cut across all areas of local public health, including, but not limited to, community health, environmental health, emergency preparedness, infrastructure, governmental public health, and chronic disease.

Once practices are designated as model or promising, they are stored in the Model Practices Database so all LHDs can benefit from them. NACCHO began accepting Model Practices submissions in 2003. Since then, NACCHO has placed numerous model and promising practices in the searchable online Model Practice Database with more added each year.

Since 2003, the collection and review of submissions had largely been a manual process. LHD’s entered data through a web form which was ultimately downloaded into either a Microsoft Excel spreadsheet or Microsoft Access database. Submissions went through a two-stage content review and collaboration process, often involving four or more reviewers whose actions were coordinated by NACCHO personnel and tracked manually through a series of excel spreadsheets. Due to growth of the program, this labor-intensive process was deemed to be unsustainable and Fig Leaf Software was called in to design and implement a workflow system that would automate the submission, review, collaboration, and publication cycle.

Here’s a flow chart that we created as part of our specification process that models the review cycle:

Workflow process model

Workflow process model (click to enlarge)


Figure 1: 3-Tier Architecture

3-Tiered Architecture

A 3-tiered architecture segments your app into three distinct service layers:

  1. The User-Interface
    In the pre-smartphone days, organizations could settle on creating a single front-end that only supported desktop browsers. With the proliferation of mobile devices of all shapes, sizes, and capabilities, corporate IT must now consider developing multiple front-ends for their apps. At an absolute minimum, line-of-business apps should support desktop and tablet with reduced functionality available for phones. This requirement frequently requires that multiple front-end apps be developed in parallel, each accessing a common REST-based webservices api implemented at the business intelligence tier.We chose to develop the front-end using Sencha’s frameworks – Ext JS 4 and Sencha Touch for the following reasons:

    1. The toolkits are based on web-standards (javascript & html5)
    2. Sencha Toolkits use a well-defined client-side MVC architecture, helping to ensure coding standards among developer team members thereby leading to reduced future maintenance costs.
    3. Both frameworks have good tooling (Sencha Architect and Sencha Cmd)
    4. Consistency in the Desktop and Phone API’s means that we can rapidly develop a mobile phone GUI by repurposing the data model classes from the desktop GUI.
    5. Flexibility to upgrade in the future to the recently released Ext JS 5, which will enable us to support both desktop and tablet GUI’s from a single codebase.
    6. Ext JS 4 has full backwards compatibility with IE8 – an important consideration when we evaluated NACCHO’s target audience of municipal health departments.
  2. The Business Intelligence Tier
    This tier marshals resources from  “back-office” resources – enterprise databases, CRM, mail servers, and more. NACCHO’s I.T. group is in the process of migrating from Adobe ColdFusion to a Microsoft .NET platform as their corporate standard. We honored their preferences by creating a rich REST-based webservices API that could be invoked from virtually any client-side technology that can parse data in JavaScript Object Notation (JSON) format. This architecture gives NACCHO the flexibility to publish their API so that third-parties could easily develop a custom front-end or mashup that leverages the model-practices data. At Fig Leaf, we strongly believe in “open government” and actively seek opportunities to make .gov data resources available to other developers.
  3. The Database Tier
    NACCHO’s corporate standard is Microsoft SQL Server. We designed an efficient, normalized 20-table schema with referential integrity rules that enforce valid data input. Due to the dynamic nature of the application, MongoDB might have actually been a better choice from a development perspective – but since it wasn’t a corporate standard and we had already chosen .NET as the middleware, we went with “old reliable.” We use Microsoft Full Text indexing to drive the front-end keyword search.

Organizing Around Perspectives

NACCHO Model Practices has four different user roles:

  1. Casual browsers who want to search and retrieve Practices.
  2. Applicants who are submitting Practices for review
  3. Internal Reviewers on the NACCHO staff who parcel out Practices for review
  4. External Reviewers who review and comment on Practices as well as collaborate on forming an opinion as to whether a submission is a Model Practice, Promising Practice, or Neither
  5. Administrators who perform an initial review of submitted practices, create the submission form, create and run ad-hoc reports, and manage the overall review cycle.

To address the very different roles and responsibilities of the stakeholders, we organized the application around a series of “Perspectives”

The Browser Perspective

The Browser Perspective, as illustrated by Figure 2, enables users to easily apply filter criteria to search through NACCHO’s Model Practice database. The Ext JS 4 data grid automatically downloads records in the background as the user scrolls, reusing DOM elements on-the-fly to keep memory overhead at manageable levels. Search filters are applied automatically after a user stops typing in a field.


Figure 2: The Browse Perspective running in Satan’s favorite browser (IE 8)

Users can resize and rearrange grid columns. In addition, all of the sections of the layout can be expanded or collapsed in order to maximize available space. These settings persist between a user’s sessions, enabling them to create a personalized interface that only shows the information that they find to be helpful.

The Applicant Perspective

The Applicant Perspective, as illustrated in Figure 3, enables logged-in users to edit, save, and submit a Model Practice for review. Ext JS’ rich form field widgets, customizable validation, and flexible layouts enable us to dynamically assemble the form at runtime based on instructions that are read from the server. We also implemented a “Print” feature that redraws the form in a printer-friendly format with hard page-breaks that separate each section.

Figure 3: The Applicant Perspective

Figure 3: The Applicant Perspective. Yes, this works in IE 8 too!

In order to facilitate the editing of large blocks of text, we created an Ext JS extension that integrates the best-in-class TinyMCE 4 WYSIWYG editor and added a previous/next buttons at the bottom of the screen to help users navigate through the different tabbed-based sections.

The Administrator Perspective

The Administrator Perspective, depicted in figure 4, uses roles-based security to restrict access to administrator/reviewer functionality by role.

“Super Admins”, of course, have full run of the system but are primarily responsible for the following tasks:

  1. Reviewing the initial submissions and assigning them to an “internal reviewer”, a subject matter expert within NACCHO, who reads through the practice and decides whether it has been properly categorized.
  2. Designing forms
  3. Creating and running reports
  4. Auditing the review cycle
  5. Managing accounts
Assigning an initial reviewer

Figure 4: Assigning an initial reviewer

Using the Form Builder Perspective

Since NACCHO’s survey form changes from year-to-year, Fig Leaf Software designed the Model Practices application to enable non-technical admins to customize their forms without involving I.T. Form fields can be grouped into tab panels and we support collecting data via text input fields, wysiwyg editor (TinyMCE 4), select boxes, checkboxes, and radio buttons. Admins can set data validation rules to require input on select fields, restrict text input by word count, and more!

Admins can build custom forms without involving I.T.

Figure 5: Admins can build custom forms without involving I.T.

Running Reports

We’ve implemented several query-by-example reporting tools into the Model Practices application. Admins can quickly identify the status of practices in workflows and run statistical roll-ups on approved documents. Using Sencha Ext JS 4, we were able to easily  present data in a scalable grid and display aggregate statistics in a native web chart. We also developed a custom extension that allows users to export the information in any grid to Microsoft Excel, as illustrated in figure 7.

Figure 7: Executing reports, charting the results, and exporting to Microsoft Excel

Figure 7: Executing reports, charting the results, and exporting to Microsoft Excel


In rare cases, query-by-example interfaces might not be sufficient to enable administrators to extract the information that they require. To handle any reporting criteria that might come up in the future, we implemented the query builder, depicted in figure 8, that enables admins to create a dynamic filter for every field on any form. We’ll be posting the Query Builder code to GitHub before the end of the year.

The Query Builder enables admins to create and save custom reports.

Figure 8: The Query Builder enables admins to create and save custom reports.

 The Internal Reviewer Perspective

As illustrated in Figure 9, the Internal Reviewer’s job is to read through the submitted document and assign subject-matter experts (external reviewers) who will grade and judge the responses. If an Internal Reviewer decides that the submission has been incorrectly classified, they can reclassify it forward it back to the Administrator who, in turn, can pass it on to a different internal reviewer. This view uses a drag & drop, searchable grids that facilitate the assigning of external reviewers. We used a third-party extension, Ext.ux.grid.Filterbar, to define the “filter row” depicted in the “Search for Reviewers” grid control.

Internal reviewers read through the submissions and assign them to external reviewers for "grading"

Figure 9: Internal reviewers read through the submissions and assign them to external reviewers for “grading”

The External Reviewer Perspective

External reviewers are charged with reviewing the application and answering a series of targeted review questions that were defined in the Form Builder perspective. Responses that don’t meet the designated data validation criteria are denoted by a red [X] in the left-side tree control. Once they have completed commenting on applicant responses, they designate the application as being a “Model Practice,” “Promising Practice,” or “Neither.”

Figure X: Ranking and reviewing applicant responses

Figure 10: Ranking and reviewing applicant responses

The Reconciliation Perspective

If two or more external reviewers disagree as to whether an application is a “Promising Practice” or “Model Practice”, they are directed into the perspective, depicted in figure 11, where each reviewer can see all of the other reviewer’s responses and comments. They can also schedule a conference call from directly within the GUI to take place via VOIP (implemented by integrating the Twilio API) where they can hash out their differences. All external reviewers must ultimately reach consensus as to whether a submission is a “Model Practice”, “Promising Practice”, or “Neither”.

Figure: Comparing other reviewer's responses, scheduling a conversation, using VOIP

Figure 11: Comparing other reviewer’s responses, scheduling a conversation, using VOIP

Once the external reviewers reach consensus the applicants are notified via email of it’s final disposition and, if rated as a “Model Practice”, or “Promising Practice”, the application becomes accessible to the public on the web site.

Built using Sencha Architect

Sencha Architect, depicted in figure 12, enabled our development team to respond to changes in our customer’s requirements with agility as well as rapidly prototype and visualize new features. Using it’s deep integration with Sencha Cmd made it easy for us to create and post development, testing, and production builds.

Sencha Architect's visual designer enabled our development team to act with agility.

Figure 12: Sencha Architect’s visual designer enabled our development team to act with agility.

Futures – Mobile and More!

Model Practice Mobile Prototype

Model Practice Mobile Prototype

Using Ext JS for the project paid off handsomely when the customer asked us to develop a level-of-effort (LOE) for porting the search perspective over to a mobile-phone form factor. Using Sencha Architect and relying on the REST-based api that we produced during the desktop app development phase allowed us to create a quick proof-of-concept using Sencha’s Touch framework.

Would you like to know more?

Please contact us at info@figleaf.com to find out more about our custom application development services and how we can help you realize your visions of productivity enhancements across your enterprise in a cost-effective manner!

Categories: Ext JS 4

Get every new post delivered to your Inbox.

Join 594 other followers