Question

How to insert file upload button in ExtJs group wise grid header?

I have ExtJs grid, and now need to add file uploader button in header.

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

Now need file upload button in GroupingView some how.

Answer 1

Change groupTextTpl by startGroup
For example:

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']})&nbsp;</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">'
)

With this you have control over the design of group