- 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/