PDA

View Full Version : Bug or Error?



ssdesign
6 Aug 2010, 7:46 AM
Hi,
I encountered something strange today.

I am reating a row on buttons like this:


var shapeitems = [];
for(var j=1; j<=buttonsArray; j++)
{
var myButton = new Ext.Button({
minWidth: '56',
minHeight: '56',
border: '0',
cls: 'mtBtn',
style: {
border: 0
},
id: j,
handler: tapHandler,
})
myButton.addClass("mDBtn"+j);
shapeitems.push(myButton);
}
shapeitems[0].addClass("disabledShapes");
shapeitems[0].disable(true);

Then I use the shapeitems array in another function:

{
height:82,
width: 507,
//html: '<div style="background-color: #a9a9a9; height: 50px">&nbsp;</div>',
cls: 'bottomBG',
layout: {
type: 'hbox',
width: '507',
height: '82'
//align: 'stretch'
},
scroll: {
direction: 'horizontal',
scrollbars: true
},
items: [bt]
},

In the last line above, "bt" is same as "shapeitems". Just using another name for it after passing it to another function.

The expected outcome is a horizontal strip of buttons with the first button disabled.

Now the strange thing is, this works perfectly fine in Google Chrome, but in Safari on Mac or even iPad simulator in XCode, the buttons are arranged in 'reverse order'. The first button is to the extreme right (hence out of the screen).

When I inspect the HTML, the divs are arranged n reverse order too.
50-49-48-47-... etc.

You can see that I am using 'hbox' here.

I tried changing it to a vertical column of buttons using 'vbox' and it shows correctly in both Safari and Chrome.

Can anyone help me reproduce this or tell me if I am doing anything wrong?

Thanks a lot.

Considerate
6 Aug 2010, 8:36 AM
shapeItems seem to be an array that should include all your buttons, right?
In that case you would write

items: bt
unless you want to have the shapeItems as the first item to contain all buttons.

ssdesign
6 Aug 2010, 9:36 AM
I tried both
bt and [bt]

Both ways the horizontal strip contains buttons in reverse order :(

ssdesign
9 Aug 2010, 9:43 AM
hi, anybody able to help me with this?
or anyone encountered similar issue?

evant
9 Aug 2010, 5:29 PM
As @Considerate wrote, [bt] would be incorrect, since bt is an array. However I just ran:



Ext.setup({
onReady: function(){
var someList = ['a', 'b', 'c'],
buttons = [],
button;

for(var i = 0, len = someList.length; i < len; ++i){
button = new Ext.Button({
text: someList[i]
});
buttons.push(button);
}

new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: buttons
});
}
});


On both Chrome and the iPad and the buttons appear in alphabetical order as I would expect.

ssdesign
10 Aug 2010, 6:49 PM
Hi,
Maybe something wrong with my code?

Here is the minimum code to replicate this problem that I am facing.
Can someone test it in Safari on iPad and Xcode with Phonegap (iPad simulator)?

When I run this code, I expect the buttons to be arranged in increasing order of number (1,2,3,4,5....).
Whereas the result I get it the other way round (50, 49, 48, 47, .....).

(btw. the buttons are numbered correctly in Google Chrome).


index.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon-precomposed" href="resources/icon.png" />
<link rel="apple-touch-startup-image" href="resources/phone_startup.png" />
<link rel="stylesheet" href="resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="ext-touch.js"></script>
<script type="text/javascript" src="test.js"></script>
<style type="text/css" media="screen">
.mainBG{
background:#CCCCCC;
}
.boxPad {
margin-left: 26px;
}
.bottomBG{
background:#a9a9a9;
}
.disabledShapes{
width:56px;
height:56px;
margin:0px;
padding:0px;
color:#FF0000;
border:#FF0000 solid 2px;
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

</style>
</head>
<body>

</body>
</html>

test.js

Ext.ns('IApp', 'database');
//
IApp.Index = {
index : function(bt) {
new Ext.Panel({
fullscreen: true,
scroll: {
direction: 'both',
scrollbars: true
},
layout: {
type: 'vbox',
width: 768,
height: 1024,
align: 'left',
cls: 'mainBG'
},
items: [{
height: 116,
width: 768,
cls: 'boxPad',
html: '12345'
},
{
height:82,
width: 507,
cls: 'bottomBG',
layout: {
type: 'hbox',
width: '507',
height: '82'
},
scroll: {
direction: 'horizontal',
scrollbars: true
},
items: bt
}
]
})
}
};

/////////////////////////////////////////////////
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var tapHandler = function(button, event){
for(var i=1; i<=50; i++){
if(shapeitems[i-1].id == button.id)
{
shapeitems[i-1].addClass("disabledShapes");
shapeitems[i-1].disable(true);
}
else
{
shapeitems[i-1].removeClass("disabledShapes");
shapeitems[i-1].enable(true);
}
}
}

this.shapeitems = [];
for(var j=1; j<=50; j++)
{
var myButton = new Ext.Button({
minWidth: '56',
minHeight: '56',
border: '0',
cls: 'mtBtn',
text: j,
style: {
border: 0
},
id: j,
handler: tapHandler,
})
shapeitems.push(myButton);
}
shapeitems[0].addClass("disabledShapes");
currentShape = 1;
shapeitems[0].disable(true);
IApp.Index.index(shapeitems);
}
});

ssdesign
22 Aug 2010, 6:45 PM
Hi,
Was anybody able to try the code I pasted above?

I still can't figure out what it is happening like this.

Thanks

evant
22 Aug 2010, 7:03 PM
The id's should be strings, not numeric.

ssdesign
22 Aug 2010, 7:55 PM
Great,
thanks for pointing out my error, I had missed it :P