View Full Version : ActionColumn in grid

25 May 2011, 5:03 AM

im trying to make a button in a grid/cell and this button should make a reference to a tab -> formPanel, where the user is availible to edit the selected grid information after clicking it.

like i said, im new and i need some tips where can i start or how can i start, i dont want the user to change data in grid, it should be like "goto" button.

im using 3.3.1 and the grid is finished with the tab.

any suggestions ?

thanks !

26 May 2011, 1:39 AM
i just need how to start ?

26 May 2011, 2:42 AM
Can you clarify what it is you want to know? Is it: how to create a read-only grid? add a button a grid? add a rowselect handler that will display/update a form panel? Have you looked at the "Form with Embedded Grid (http://dev.sencha.com/deploy/ext-3.3.1/examples/form/form-grid.html)" example?

26 May 2011, 9:02 AM
loook at the this picture. the small icon should embedded the grid to a new tab with the form you show me for example, i dont see its code, where can i find it ?

thank you !

28 May 2011, 6:26 AM
i still dont know how tu set the icon as a button wich links the row of the grid to the upper tab in a formPanel.

i dont want to see any code (if possible would be great) but i woul like more understanding for the actionColumn and the embedded form and the getCmp.. i think a good tutorial would be great !!

28 May 2011, 7:06 AM
I used an icon class. Be aware that you'll have to specify the width in your css class because the class itself is for the image. Without a width your image won't be shown.

maybe this will help you:

{ header: 'Delete', xtype: 'actioncolumn', align: 'center', width: 30, sortable: false,
items: [{
iconCls: 'icon-delete-actionColumn',
scope: this,
handler: function(grid, rowIndex, colIndex) {
//do whatever you want here

the css class : .icon-delete-actionColumn{ background:url(/images/icons/icon-delete.png) no-repeat; width: 16px; }