如何在ExtJs分组网格标题中插入文件上传按钮?
我有ExtJs网格,现在需要在标题中添加文件上传按钮。
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'filename'},
{name: 'size'},
{name: 'action'},
{name: 'document'}
]);
var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'filename', direction: "ASC"},
groupField:'document'
});
var grid = new xg.GridPanel({
store: store,
columns: [
{id:'filename',header: "File Name", width: 60, sortable: true, dataIndex: 'filename'},
{header: "Size", width: 20, sortable: true, dataIndex: 'size'},
{header: "Action", width: 20, sortable: true, dataIndex: 'action'},
{header: "Document", width: 20, sortable: true, dataIndex: 'document',hidden:'true'}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
renderTo: document.body
});
});
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',1,'Delete', 'Invoice'],
['Alcoa Inc',29.01,'View', 'Invoice'],
['Altria Group Inc',83.81,'Download', 'Invoice'],
['American Express Company',52.55,'View Download', 'SOP'],
['American International Group, Inc.',64.13,'View Download', 'GSP'],
['Caterpillar Inc.',67.27,'View Download', 'GSP'],
['Citigrup, Inc.',49.37,'View Download', 'SOP'],
['Johnson & Johnson',64.72,'View Download', 'Other'],
['Merck & Co., Inc.',40.96,'View Download', 'Other'],
['Walt Disney Company (The) (Holding Company)',29.89,'View Download', 'GSP']
];
现在需要GroupingView中的文件上传按钮如何。
答案 0 :(得分:1)
通过startGroup更改groupTextTpl 例如:
startGroup : new Ext.XTemplate(
'<div id="{groupId}" class="x-grid-group {cls}">',
'<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}"><div class="xgrid-group-title" style="position:relative;">',
"<div style='float:left;'>{text} ({[values.rs.length]} {[values.rs.length > 1 ? 'Registros' : 'Registro']}) </div><div><img src='img/desktop/images/prueba/completar.png' class='x-action-col-icon x-action-col-0' ext:qtip='Completar' onclick='cambiarEstado(\""+id+"\",\""+1+"\");'/></div>",
'</div></div>',
'<div id="{groupId}-bd" class="x-grid-group-body">'
)
通过这种方式,您可以控制组
的设计