title: ExtJS getClass() to dynamically hide/show icon
body: <p>Using Sencha Architect I am attempting a grid with an action column.  The column has two possible icons which are hidden or displayed depending on a value in the grid row.  This is a well documented use case and I have tried to follow the example code as closely as I can but simply cannot get it to work.  </p>
  
  <pre><code>            columns: [
              {
                  xtype: 'actioncolumn',
                  width: 50,
                  dataIndex: 'IsFilter',
                  items: [
                      {
                          getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                              var isFilter = r.get('IsFilter');
                              if (!isFilter) {
                                  return  "x-hide-display";
                              } else {
                                  console.log(r.get('Title') + ' sort');
                                  return "x-grid-center-icon";
                              }
                          },
                          icon: 'resources/Images/png/sort35.png'
                      },
                      {
                          getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                              if (v) {
                                  return "x-hide-display";
                              } else {
                                  console.log(r.get('Title') + ' filter');
                                  return "x-grid-center-icon";
                              }
                          },
                          icon: 'resources/Images/png/funnel6.png'
                      }
                  ]
              }
  </code></pre>
  
  <p>I know the logic works as I see the correct console messages.  Desired outcome is to show one icon or the other.  Instead, it always shows both icons. So, what am I doing wrong?</p>