--- 博客已迁移至:

  重庆快三平台app—主页-彩经_彩喜欢logJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks
  • 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="control重庆快三平台app—主页-彩经_彩喜欢tn">

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

width="16" height="16"


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

width="16" height="16"



dataIndex: 'company'}
    • Then you would setup an event handler on the click event.
grid.on('click', function(e) {

var btn = e.getTarget('.control重庆快三平台app—主页-彩经_彩喜欢tn');

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 - ' +;


case 'go':

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




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

.control重庆快三平台app—主页-彩经_彩喜欢tn img {

padding-left: 4px;

cursor: pointer;


    • 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  :
posted on 2009-11-30 14:57 seal 阅读(214) 评论(0)  编辑  收藏 所属分类: EXTJS