PDA

View Full Version : long press?



dubberlydesign
27 Oct 2010, 5:04 PM
Is there a way to specify a long press in sencha? I'd like to create a popup when a user presses and holds an image.

davidkaneda
28 Oct 2010, 10:10 AM
There is a 'taphold' event you can bind to, which continuously sends the amount of time it's been pressed.

dubberlydesign
28 Oct 2010, 10:54 AM
I tried to bind it like this:

_this.$this.bind('taphold', _this.mouseDownHandler);

which didnt work. I heard that you can only use touch events on "containers". Is that true?

Does anyone have an example of a taphold working?

anilvardhan.p
2 Mar 2014, 8:23 PM
Hi,
How i can apply "TapHold" event for my drag items.
My requirement is i need drag event should aply after longpress. By changing the items i'm saving the order.

here is my code.



this.callParent(arguments);



if(localStorage.slots == null)
{
jsonSlots = [{"id":1, action: 'aboutus',"baseCls":"image-aboutus-list","cls":"image-aboutus","pressedCls":"image-aboutus-pressed"},
{"id":2, action: 'personalization',"baseCls":"image-personalize-list","cls":"image-personalize","pressedCls":"image-personalize-pressed"},
];
localStorage.slots = JSON.stringify(jsonSlots);
}
this.setDragItems(JSON.parse(localStorage.slots));
//this.down('titlebar').setTitle(this.getTitle());


// define draggable sections
//var head = {xtype:'panel',scrollable: true, items:[]};
var layoutItems = [];

var sections = this.getDragItems();
this.numItems = sections.length; // cache num items for spacing calculation
var draggable = {};


for (var i=0; i<sections.length; i++) {





draggable = {
xtype: 'draggablesetting',
hidden: false,
initialIndex: i,
draggable: {
direction: 'vertical',
listeners: {
drag: this.onDrag,
dragend: this.onDrop,
dragstart: this.onDragStart,
scope: this
}

},

itemId: 'draggable' + i,
menuCls: sections[i].cls,
menuPressedCls: sections[i].pressedCls,
action: sections[i].action,
baseCls: sections[i].baseCls,
sectionId: sections[i].id
},

layoutItems.push(draggable);


}

this.add(layoutItems);




Ext.Function.defer(this.initializeDraggables,250,this);




for initialization

initializeDraggables: function() {

this.slots = [];
// var cmps = Ext.ComponentQuery.query("draggablesetting");




var els = Ext.select("div.draggablesetting");
var me = this;
for (var i=0; i<els.elements.length; i++) {


var el = Ext.get(els.elements[i]);


var tf = 'translate3d(0px, ' + (( i * this.spacing) + 1) + 'px,0px)';


this.slots[i] = el;




Ext.Anim.run(el, new Ext.Anim({
autoClear: true,
easing: 'ease-in',
duration: 500,
from: {
'-webkit-transform': 'translate3d(0px,0px,0px)',
'opacity': 0.0
},
to: {
'-webkit-transform': tf,
'opacity' : 1.0
},
after: function(el) {
var cmp = Ext.getCmp(el.getId());
cmp.getDraggable().setOffset(0,cmp.getInitialIndex() * me.spacing);
}
}));


}
},


for drag events,

onDrag: function(dd, e, offsetX, offsetY, eOpts) { el = dd.getElement();


var oldslot = this.slot;
var slot = Ext.Number.constrain(Ext.Number.toFixed(offsetY / this.spacing,0),0,this.slots.length);




if (slot != this.slot && slot >= 0) {
this.slot = slot;




var tf1 = 'translate3d(0px, ' + ( this.slot * this.spacing) + 'px,0px)';
var tf2 = 'translate3d(0px, ' + ( oldslot * this.spacing) + 'px,0px)';


Ext.Anim.run(this.slots[this.slot], new Ext.Anim({
autoClear: false,
easing: 'ease-in',
duration: 500,
from: {
'-webkit-transform': tf1
},
to: {
'-webkit-transform': tf2
}
}));


var temp = this.slots[this.slot];
this.slots[this.slot] = el;
this.slots[oldslot] = temp;
}
},


onDrop: function(el, e, offsetX, offsetY, eOpts) {


var slotArray = [];

for (var i=0; i<this.slots.length; i++) {

//console.log(this.slots[i]);
var cmp = Ext.getCmp(this.slots[i].getId());
var slotJson = {id: cmp.getSectionId(), baseCls: cmp.getBaseCls(), cls: cmp.getMenuCls(), pressedCls: cmp.getMenuPressedCls(), action: cmp.getAction()};
slotArray[i]=slotJson;
//console.log(cmp.getSrc());
cmp.getDraggable().setOffset(0,i * this.spacing);
}
localStorage.slots = JSON.stringify(slotArray);
Ext.getCmp('favoritepanel').setScrollable(true);
},


onDragStart: function(el, e, offsetX, offsetY, eOpts) {
this.slot = Ext.Number.toFixed(offsetY / this.spacing,0);
Ext.getCmp('favoritepanel').setScrollable(false);
},


resetSettings: function(settings) {


// roll back up
for (var i=0; i<this.slots.length; i++) {


Ext.Anim.run(this.slots[i], new Ext.Anim({
autoClear: false,
easing: 'ease-in',
duration: 400,
from: {
'-webkit-transform': this.slots[i].getStyle('-webkit-transform')
},
to: {


'-webkit-transform': 'translate3d(0px,0px,0px)'
}
}));
}


Ext.Function.defer(function() {
var draggables = this.query('draggablesetting');
for (var i=0; i<draggables.length; i++) {
draggables[i].destroy();
}

this.initialize();


},400,this);
}


Please suggest me where i cna change in my code to initialize "TapHold" to drag.