Grids - Action Column to behave like a Flyout Menu

[antonbabushkin]

Hi there,

I've been looking at using ExtJS for my project and can see that there is a way to embed "actioncolumns" inside of Grid columns. However, my "action" isn't just a single click, it actually needs to show a flyout menu (similar to the Menu control). Is there a direct way to do this in Ext? Or do I have to implement all this functionality myself?

Thanks!

[slemmon]

Something along these lines?

var menu = Ext.widget('menu', {
    items: [{
        text: 'Action 1'
    }, {
        text: 'Action 2'            
    }]
});


Ext.widget('grid', {
    renderTo: Ext.getBody()
    , width: 300
    , height: 300
    , columns: [{
        text: 'Product'
        , dataIndex: 'product'
        , flex: 1        
    }]
    , store: {
        fields: ['product']
        , data: [{
            product: 'Toaster'            
        }]       
    }
    , listeners: {
        itemclick: function (view, record, el, i, e) {
            menu.showAt(e.getXY());
        }
        , itemcontextmenu: function (view, record, el, i, e) {
            e.preventDefault();
            menu.showAt(e.getXY());            
        }        
    }
});​

[antonbabushkin]

Brilliant. Exactly what I was after. Much easier than I previously thought it would be

Thanks!

[slemmon]

No problem. Glad I could help.