var grid = new Ext.grid.GridPanel({
id: "grid1",
title: "GridPanel实例",
renderTo: "div1",
width: 500,
height: 300,
frame: true,
tbar: [{xtype:'label',text:'请输入关键词:'},{xtype:'textfield',id:'KeyWord'},{text:'搜索',handler:function(){alert("搜索")}}
],
。。。。。//其它配置项
})
var grid = new Ext.grid.GridPanel({ cm : new Ext.grid.ColumnModel([{header : '按钮,xtype : 'actioncolumn',width : 90,align : 'center',items : [{text: '按钮'}]}])})参考帮助文档: actioncolumn
Ext.create('Ext.data.Store', {storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
})
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex)
alert("Edit " + rec.get('firstname'))
}
},{
icon: 'extjs/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex)
alert("Terminate " + rec.get('firstname'))
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)