PDA

View Full Version : Having problems with dragging



eTronic
14 Jul 2010, 11:23 AM
http://qualcomm.fi.ncsu.edu/q2/

Nevermind what the application is itself. I'm testing some things out and getting familiar with Sencha Touch.

I am trying, however, to get the gold coins that are randomly generated on the page to be draggable. As you can see from my index.js file in there, I have set the coin (which is an extension of the Component class) to draggable. However, if you try to click and drag (you have to click just outside the image sometimes for it to work), it jumps to the far right of the screen and can't be dragged past a certain distance upward or leftward. It's best to see it in action to know what I am saying.

I want it to follow the cursor exactly when being dragged, and I can not seem to locate the problem.

Thanks for anyone who might be able to solve/help with this.

TommyMaintz
14 Jul 2010, 12:31 PM
The problem is that you are setting the position on an item inside the Coin class. Instead use x and y in the config of the Coin. I used inline style to make it position absolute, but you might want to add a cmpCls to your Coin class and add position: absolute in css to it. Anyway, the following code allows me to drag the coins properly.



Ext.ns('ClassA'); // Set namespace to ClassA

ClassA.Hand = Ext.extend(Ext.Component, {
constructor: function(config) {
var img = config.side ? 'rightHand' : 'leftHand'; // Side0: Left - Side1: Right

this.setPosition = function(side, vpos) {
this.update('<div style="position:absolute;' + side + ':0px;top:' + vpos + 'px;"><img src="img/a/' + img + '.png" /></div>');
}

ClassA.Hand.superclass.constructor.call(this, config)
}
});

ClassA.Coin = Ext.extend(Ext.Component, {
html: '<img src="img/a/img.png" />',
style: 'position: absolute;',

constructor: function(config) {
var img = 'coin';

/*this.setPosition = function(xpos, ypos) {
this.update('<div style="position:absolute;left:' + xpos + 'px;top:' + ypos + 'px;"><img src="img/a/' + img + '.png" /></div>');
}*/

ClassA.Coin.superclass.constructor.call(this, config)
},
draggable: true
});

ClassA.Panel = Ext.extend(Ext.Panel, {
constructor: function(config) {
var dataSets;
var hands, numHands;
var coins, numCoins;
var height = pageHeight()-100;
var width = pageWidth()-150;

dataSets = new Array(9);
dataSets[0] = [];
dataSets[1] = [];
dataSets[2] = [4,6,8,10,12,14,16,18,20,22,24,26,28,30];
dataSets[3] = [3,6,9,12,15,18,21,24,27,30];
dataSets[4] = [4,8,12,16,20,24,28,32,36];
dataSets[5] = [5,10,15,20,25,30,35,40,45];
dataSets[6] = [6,12,18,24,30,36,42,48];
dataSets[7] = [7,14,21,28,35,42];
dataSets[8] = [8,16,24,32,40,48];

this.refresh = function() {
this.destroy();

numHands = Math.ceil(Math.random()*7+1); // Between 2 and 8;
hands = new Array(numHands);

var maxCoins = dataSets[numHands].length;
numCoins = dataSets[numHands][Math.floor(Math.random()*maxCoins)];
coins = new Array(numCoins);

this.createHands();
this.createCoins();

config.reportTab.update({'query':'Number of Hands: '+numHands+'<br />Screen Width: '+pageWidth()+'<br />Screen Height: '+pageHeight()});

this.doLayout();
}

this.createHands = function() {
var k = 0;
var j = 0;

for (var i = 0; i < numHands; i++ ){
if (i < Math.ceil(numHands / 2)) {
hands[i] = new ClassA.Hand({side: 0});
hands[i].setPosition('left', 8 + Math.ceil(k * (height / (numHands / 2))));
k++;
} else {
hands[i] = new ClassA.Hand({side: 1});
hands[i].setPosition('right', 8 + Math.ceil(j * (height / (numHands / 2))));
j++;
}
this.add(hands[i]);
}
}

this.createCoins = function() {
for (var i = 0; i < numCoins; i++) {
coins[i] = new ClassA.Coin({
x: Math.ceil(Math.random()*width) + 100,
y: Math.ceil(Math.random()*height)
});
this.add(coins[i]);
}
}

this.destroy = function() {
this.removeAll();
}

ClassA.Panel.superclass.constructor.call(this, config);
}
});

Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var tools = new Ext.Panel({
title: 'Tools',
cls: 'tools',
scroll: 'vertical',
iconCls: 'settings',
tpl: [
'<tpl for=".">',
'<div class="dataBox">',
'<div class="sqlGenerated">',
'<h2>SQL Query</h2>',
'<p>{query}</p>',
'</div>',
'</div>',
'</tpl>'
]
});

var answer = new Ext.Panel({
title: 'Answer',
cls: 'answer',
scroll: 'vertical',
iconCls: 'favorites',
html: '<div class="modalBox"></div>',
tpl: [
'<tpl for=".">',
'<div class="modalBox">',
'<div class="sqlGenerated">',
'<h2>SQL Query</h2>',
'<p>{query}</p>',
'</div>',
'</div>',
'</tpl>'
]
});

var ca = new ClassA.Panel({
title: 'Class A',
cls: 'classa',
iconCls: 'user',
reportTab: tools
});

var refresh = function() {
ca.refresh();
};

var tabPanel = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
animation: {
type: 'fade',
cover: false
},
defaults: {
//scroll: 'vertical'
},
items: [ca,answer,tools]
});

var tabBar = tabPanel.getTabBar();
tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
},1);

tabBar.addDocked({
xtype: 'button',
ui: 'mask',
iconCls: 'home',
dock: 'left',
stretch: false,
align: 'center',
handler: refresh
},2);

refresh();
}
});


function pageWidth() {return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;} function pageHeight() {return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;} function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;} function posRight() {return posLeft()+pageWidth();} function posBottom() {return posTop()+pageHeight();}

eTronic
14 Jul 2010, 12:42 PM
Thank you! That works perfectly!