How to add a column with tools for each record?

How to add a column with tools for each record?

• Approach 1
  • Use the array grid example in your packaged download array-grid.js
  • Add an extra column to the column model definition and a custom renderer.

{header: "Controls", 



width: 60, 



sortable: false, 



renderer: function() {



return '<div class="controlBtn">



<img src="../shared/icons/fam/cog_edit.png"



width="16" height="16" 



class="control_edit">



<img src="../shared/icons/fam/folder_go.png"



width="16" height="16"



class="control_go"></div>';



}, 



dataIndex: 'company'}

• • Then you would setup an event handler on the click event.

grid.on('click', function(e) {



var btn = e.getTarget('.controlBtn');        



if (btn) {



var t = e.getTarget();



var v = this.getView();



var rowIdx = v.findRowIndex(t);



var record = this.getStore().getAt(rowIdx);            



var control = t.className.split('_')[1];



switch (control) {



case 'edit':



console.log('edit this record - ' + record.id);



break;



case 'go':



console.log('go to this record - ' + record.id);



break;



}            



}



}, grid);

• • Add the following CSS rule in array-grid.html to give some padding and change the cursor.

<style>



.controlBtn img {



padding-left: 4px;



cursor: pointer;



}



</style>

• • Using this same method you could add as many tools as you would like in the controls section and always give them the css class "controls_{toolname}". Ideally you would break this out into an XTemplate so that you could simply pass in whatever tools you would like to use and output them on the grid as well.
  
  

• Approach 2 utilizes a plugin as discussed here  :

http://rowactions.extjs.eu/