PDA

View Full Version : panel keyboard event



prajeesh_bs
14 Jun 2011, 4:27 AM
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
14 Jun 2011, 8:45 PM
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
16 Jun 2011, 1:25 PM
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
17 Jun 2011, 1:36 AM
excellent Skirtle..
if (Ext.fly(ev.getTarget()).is('input')) {
return;
this was what i needed..once again thanks for ur solution:)

prajeesh_bs
17 Jun 2011, 1:46 AM
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?