CODEWITHSUNDEEP
extjsextjs4
Sumon Bappi
Sumon Bappi

Reputation: 2019

How can I set a action column with accordion title in extjs 4

I have a accordion which shows the months of year. Now I want to add a pdf icon as an action column at the right side of accordion title which will print all the records of the year. But I am not able to do it. Can anyone help me on this please. Here is my code below:

Ext.define('Ext4Example.view.attendence.Timeperiod', {
    extend: 'Ext.form.Panel',
    alias: 'widget.timeperiod',
    id: 'timeperiod',
    region: 'west',
    border: true,
    width: 150,
    height: 396,
    split: true,
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: true,
        animate: true,
        activeOnTop: true,
        hideCollapseTool: true
    },
    initComponent: function () {
        var me = this;
        me.items = me.maccord();
        me.callParent(arguments);
    },
    mstore: function (year) {
        var data = [
            [1, year, 'January'],
            [2, year, 'February'],
            [3, year, 'March'],
            [4, year, 'April'],
            [5, year, 'May'],
            [6, year, 'June'],
            [7, year, 'July'],
            [8, year, 'August'],
            [9, year, 'September'],
            [10, year, 'October'],
            [11, year, 'November'],
            [12, year, 'December']
        ];
        var store = Ext.create('Ext.data.ArrayStore', {
            storeId: 'mstore',
            fields: [{
                name: 'id',
                type: 'int'
            }, {
                name: 'year',
                type: 'int'
            }, {
                name: 'month',
                type: 'string'
            }],
            data: data
        });
        return store;
    },
    mpanel: function (year) {
        var me = this,
            mpanel = new Ext.grid.Panel({
                border: false,
                viewConfig: {
                    stripeRows: true
                },
                hideHeaders: true,
                columns: [{
                    text: 'month',
                    dataIndex: 'month',
                    flex: 1]
                }],
            store: me.mstore(year),
            width: 150
            });
    return mpanel;
},
maccord: function () {
    var year = $ {
        (new Date()).format('yyyy')
    },
    limit = year - 5,
        me = this,
        maccord = [];
    for (year; year > limit; year--) {
        maccord.push({
            title: 'Year ' + year + {
                menuDisabled: true,
                sortable: false,
                xtype: 'actioncolumn',
                align: 'right',
                flex: 1,
                width: 22,
                items: [{
                    icon: "${resource(dir: 'images', file: 'PDF01001.png')}",
                    hide: true,
                    tooltip: 'Print Report of this Month?',
                    handler: function (grid, rowIndex, colIndex) {
                        alert('Printing');
                    }
                }]
            },
            ident: 'accordion-panel',
            items: me.mpanel(year)
        });
    }
    return maccord;
}
});

Upvotes: 0

Views: 721

Answers (1)

Krzysztof
Krzysztof

Reputation: 16140

Definetely what you try to do won't work. As far as I can see, you try to add Grid to the headet by concatenating it to title. What you can do is to provide header config for each accordion item. In that header you can put components, but they will be displayed before the title. Another way is to handler afterrender event and then add something to the headers.

Example: http://jsfiddle.net/HTBMy/2/

Upvotes: 3

Related Questions