In this post we’re focusing on adding buttons to a toolbar defined in the top region of the grid. It’s a simple approach and will show you that you can build malformed JSON objects via the APEX templates when the page is rendering and then on page load you can run some javascript to clean them up.

First step is to change our button template to the following (Note: you will need to put the #LINK# substitution string in your own handler javascript function):

{ "text": "#LABEL#",
  "handler": #LINK#
  #BUTTON_ATTRIBUTES#
}

And we then set any additional attributes in the button definition, in this example we are setting ‘iconCls’ to associate an image with the button. Note: we need to remember to add the preceding comma as its not defined in the template, as we may not want to add any additional attributes and hence the substitution string will replaced with null, the JSON object will remain clean without a trailing comma.

Second step is in our region header we need to define the button substitution strings

<div class="gridButtons#REGION_ID#" style="display:none;">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</div>

Note: we set the style “display:none” attribute to hide the DIV and its contents as we don’t want the user to see this because it contains our JSON button objects.

For the third step we then add a piece of javascript after the DIV in the region template which will fetch the innerHTML, strip any HTML tags, and will put the comma separators in between the button JSON objects.

<script type="text/javascript">
var tbar#REGION_ID# = new Array();
Ext.select('div[class=gridButtons#REGION_ID#]').each(function(el) {
   var buttons = eval("("+ "[" + new String(Ext.util.Format.stripTags(el.dom.innerHTML)).replace(/\}\{/g,"\},\{") + "]" + ")");
   tbar#REGION_ID# = buttons;
});

The reason why we strip tags in the above javascript is because of quick edit links appearing in development mode which would otherwise cause an error. Once the javascript has been called during page loading on the client we will have an array object called tbar#REGION_ID# which contains our button definitions/objects. We the simply set the “tbar” attribute of the grid to use our JSON array object e.g.

    // create the Grid
    grid#REGION_ID# = new Ext.grid.GridPanel({
        ..........
        tbar:        tbar#REGION_ID#,
        ..........
    });

And that’s it, pretty straight forward and simple. The great thing about this approach is that we don’t have to rely on the templates generating perfect JSON objects for us (sometimes it’s not possible), of course it would be better if they did but at this stage we have to work within the current limitations. Again there’s always a trick we can use in almost every case because we have processing occurring server side and client side.