panel keyboard event

[prajeesh_bs]

I have a panel. I need to delete the panel when delete button is pressed. i have tried the following code.

var delete= Ext.KeyMap(Ext.get(document), {
    key:46, //  Ext.EventObject.DELETE
   // ctrl:true,
    fn:function(e){
          //function for deleting the panel
    },
    stopEvent:true
});

this works quite well. But the problem is that i cant delete the characters entered in a textfield using delete key because the above function is invoked.

How can i make both functions work?

[prajeesh_bs]

when i dblclick the panel i get the id of that panel and when i press an extjs button i am destroying the panel using the id. wat i need is when i double click the panel and press the delete button of keyboard, the same function needs to be executed. Can anybody help?

[skirtle]

This example may help. My CSS styling is a bit rubbish but you should get the idea...

.delete-target .x-panel-header-text {
    color: red;
}

Ext.ns('My');

My.PanelDeleter = {
    deletePanel: function() {
        if (!this.deleteTarget || !this.deleteTarget.ownerCt) {
            return;
        }

        var ownerCt = this.deleteTarget.ownerCt;

        this.deleteTarget.ownerCt.remove(this.deleteTarget);
        ownerCt.doLayout();

        this.deleteTarget = null;
    },

    setTarget: function(deleteTarget) {
        if (this.deleteTarget) {
            this.deleteTarget.getEl().removeClass('delete-target');
        }

        this.deleteTarget = deleteTarget;
        deleteTarget.getEl().addClass('delete-target');
    }
};

new Ext.KeyMap(Ext.getBody(), {
    key: Ext.EventObject.DELETE,
    fn: function(key, ev){
        if (Ext.fly(ev.getTarget()).is('input')) {
            return;
        }

        My.PanelDeleter.deletePanel();
    }
});

new Ext.Panel({
    height: 500,
    renderTo: Ext.getBody(),
    width: 300,
    items: [
        {
            cls: 'deletable',
            flex: 1,
            items: {xtype: 'textfield'},
            title: 'Title'
        }, {
            cls: 'deletable',
            flex: 1,
            items: {xtype: 'textfield'},
            title: 'Title'
        }, {
            cls: 'deletable',
            flex: 1,
            items: {xtype: 'textfield'},
            title: 'Title'
        }
    ],
    layout: {
        align: 'stretch',
        defaultMargins: '5',
        padding: 5,
        type: 'vbox'
    },
    listeners: {
        afterrender: function(panel) {
            panel.getEl().on('click', function(ev, delegate) {
                My.PanelDeleter.setTarget(panel.getComponent(delegate.id));
            }, null, {delegate: '.deletable'});
        }
    }
});

[prajeesh_bs]

excellent Skirtle..
if (Ext.fly(ev.getTarget()).is('input')) {
return;
this was what i needed..once again thanks for ur solution

[prajeesh_bs]

i need a suggestion from ur side..

i have a dataview and i am showing some images inside it. Now i am doing pagination for the dataview. I dont need the default paging bar using extjs. What i need is a customised one. That is there will be an icon for showing previos page on the left side of dataview and an icon indicating next page on the right page. Is it possible to customize the paging bar in this way?