Last time I wrote about ExtJS I was highlighting how our ExtJS theme helped make our grids engaging, intuitive and useful. This time I’m going to pick out an element of that article and show you how you can create your own “flag column”. This is a little “flair” that sits top right of a column to denote some attribute you can chose. In the last article we were using it to show records that had been marked as “favourites” or been “flagged” for review:


Grid rows





It’s surprisingly easy to create this component in such a way that it can used in many different ways. The core principal is to take a column component and modify it to our needs. Clearly this column needs to take up no additional space so some absolute positioning will be brought into play with our CSS. It also needs to react to the value of one or more fields in our model attached to our data store.

Here’s the source code for the full component and here’s the accompanying CSS.

Once you’ve downloaded those, take a moment to skim through them so we can highlight the important parts before moving on to actually implementing them in a grid.

Bear in mind that both the JS and the CSS are taken from our own implementation and may need tweaking to meet your own needs – this component is designed to work in our ExtJS them which is big, bold and beautiful! If you’re using the standard theme or something smaller than ours, you may need to scale the flag size down with your CSS.

The first thing we’ll look at is the tplRow. This template will represent the markup ExtJS renders for each flag in our component. The only thing I want to point out here is the “data-icon”. This is the way we implemented glyphs in ExtJS way before they were a thing in 4.x

tplRow : '\
  <tpl for="flags">\
    <div class="ux-row-flag-item {cls} <tpl if="text">ux-row-flag-text</tpl>" style="{hide}{style}">\
      <span class="ux-flag-cell-triangle"><i <tpl if="qtip">data-tooltip="{qtip}"</tpl> data-icon="{dataIcon}"></i></span>\

Following on from that you can see in the “processFlags” function we set up the data that will be passed into this tplRow:

var o = {
  cls : f.iconIndex ? '{' + f.iconIndex + '}' : (f.iconCls ? f.iconCls : ''),
  dataIcon: f.iconIndex ? '{' + f.iconIndex + '}' : (f.dataIcon ? f.dataIcon : ''),
  qtip : f.qtipIndex ? '{' + f.qtipIndex + '}' : (f.tooltip || f.qtip ? f.tooltip || f.qtip : ''),
  text : f.textIndex ? '{' + f.textIndex + '}' : (f.text ? f.text : ''),
  hide : f.hideIndex ? '<tpl if="' + f.hideIndex + '">' + ('display' === this.hideMode ? 'display:none' : 'visibility:hidden') + ';</tpl>' : (f.hide ? ('display' === this.hideMode ? 'display:none' : 'visibility:hidden;') : ''), align: f.align || 'right',
  style : ? : ''

The next thing we need to do is to add one of these columns to a grid:

  xtype     : 'gridflagcol',
  align     : 'right',
  cls       : 'grid-flag-col',
  width     : 0,
  hideMode  : 'display',
  flags: [{
    dataIcon   : '*',
    iconCls    : 'favourite',
    hideIndex  : 'hideFavouriteFlag',
    qtip       : 'Marked as a favourite'
    dataIcon   : 'x',
    iconCls    : 'flag',
    hideIndex  : 'hideFlaggedFlag',
    qtip       : 'Marked as flagged'

Of course it goes without saying that you should add this column as the last column in your grid 🙂

Lastly, we need to make sure that our model in our data store has fields that match the values of hideIndex we’ve defined for each flag:

  name    : 'hideFavouriteFlag',
  mapping : function( r ){
    return ( r && r.status != 'favourite' ) ? 1 : 0
}, persist: false},
  name    : 'hideFlaggedFlag',
  mapping : function( r ){
    return ( r && r.status != 'flagged' ) ? 1 : 0
}, persist: false},

Of course if we intend to update our grids and those statuses will change, we will need to manually update those fields and refresh the grid view so the flags update but that’s trivial.

So, have a look at the code and if you have any questions, criticisms (constructive only please!) or comments, please add them below 🙂 As before, this article is written for ExtJS 4.1.1 as that’s the version I’m still using day-to-day.

Next time we will look into how to create the floating and expanding row actions.