PDA

View Full Version : Add two button action in grid column



jo_Rid
12 Aug 2010, 8:44 PM
Hi all,

i try to create grid panel that have Action column, ID column, Name column, Company column. in grid, i want to every row in grid have 2 button in Action column by default, sample: Edit and Delete button.

this is my completed code:

Ext.BLANK_IMAGE_URL = 'ExtResources/resources/images/default/s.gif';

function actionButton(data, cell, record, rowIndex, columnIndex, store, grid) {

linkRender = String
.format(
'<a href="javascript:ShowDetail(\'{0}\', \'{1}\', \'{2}\', \'{3}\', \'{4}\', \'{5}\', \'{6}\', \'{7}\', \'{8}\', \'{9}\');">'
// + '<div id="inbox-action" style="cursor: hand"
// title="Change"></div>'
+ '<div id="inbox-action" style="cursor: hand" title="Change">A</div>'
+ '<div id="inbox-action" style="cursor: hand" title="Display">B</div>'
+ '</a>', record.data.URL, record.data.AppID,
record.data.TicketNumber, record.data.ProcessID,
record.data.OtherInfo1, record.data.OtherInfo2,
record.data.OtherInfo3, record.data.OtherInfo4,
record.data.OtherInfo5, record.data.RequestType);

return linkRender;
};

Ext.onReady(function(){

var store = new Ext.data.JsonStore({
root: 'data',
totalProperty: 'total',
idProperty: 'Id',
remoteSort: true,
autoLoad: true,
baseParams: {
start: 0,
limit: 10,
sort: 'Name',
dir: 'ASC'
},
fields: [{
name: 'Action'
},{
name: 'Id'
}, {
name: 'Name'
}, {
name: 'Company'
}],
proxy: new Ext.data.HttpProxy({
url: 'DefaultHandler.ashx'
})
});

var viewport = new Ext.Viewport({
layout: 'anchor',
anchorSize: {
width: 800,
height: 600
}
});

var mainForm = new Ext.FormPanel({
id: 'mainForm',
header: false,
bodyStyle: 'padding: 5px 5px 5px 5px;',
labelWidth: 50,
anchor: '100% 100%',
unstyled: true
});

var mainPanel = new Ext.Panel({
id: 'mainPanel',
title: 'SDP ExtJS (Sencha)',
labelAlign: 'left',
labelWidth: 90,
layout: 'form',
hideLabel: true,
collapsible: true,
frame: true,
header: true,
bodyStyle: 'padding:5px 5px 5px',
buttonAlign: 'left',
items: [new Ext.grid.GridPanel({
store: store,
columns: [{
header: 'Action',
renderer : actionButton,
width: 150,
sortable: true,
dataIndex: 'Action'
},{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'Id'
}, {
id: 'colName',
header: 'Name',
width: 160,
sortable: true,
dataIndex: 'Name'
}, {
header: 'Company',
width: 160,
sortable: true,
dataIndex: 'Company'
}],
stripeRows: true,
//autoExpandColumn: 'colName',
height: 350,
//width: 600,
title: 'Simple Grid'
})]
});

mainForm.add(mainPanel);
viewport.add(mainForm);
viewport.doLayout();
});

this code is work, but the position of button is vertical. i want horizontal each row.
anybody can help me :D.

Thank's

Animal
13 Aug 2010, 2:22 AM
Ext Ext 3.3 (It's available in beta now) and an ActionColumn