PDA

View Full Version : using overCls with boxcomponent



aw1zard2
19 Oct 2009, 12:59 PM
I can't understand what I'm doing wrong but can't get overCls to work with this boxcomponent. It's been a long day so it might be something stupid but any help is welcomed. :)


Ext.onReady(function () {
var btns = new Array(9);
for (var i = 0; i < btns.length; i++) {
btns[i] = {
xtype: 'box',
autoEl: {
tag: 'a',
href: 'test.php?a='+(i+1),
id: 'btn'+(i+1),
cls: 'my_btn',
overCls: 'my_btn_over',
html: 'button '+(i+1)
}
};
};
var win = new Ext.Window({
title: 'Welcome guest user...',
autoEl: 'center',
closable: false,
border: false,
plain: true,
layout: 'table',
layoutConfig: {
columns: 3
},
bodyStyle: 'padding:0px 0px 0px 0',
items: [ btns ]
});
win.show(this);
});I did this small workaround to get it to work. Using onmouseover and onmouseout to change the images. But still can't understand what I'm doing wrong to not get overCls to work with it.


Ext.onReady(function () {
var btns = new Array(9);
for (var i = 0; i < btns.length; i++) {
btns[i] = {
xtype: 'box',
autoEl: {
tag: 'a',
href: 'test.php?a='+(i+1),
id: 'btn'+(i+1),
cls: 'my_btn',
onmouseover: 'this.style.backgroundImage="url(images/90btno.gif)";',
onmouseout: 'this.style.backgroundImage="url(images/90btn.gif)";',
html: 'button '+(i+1)
}
};
};
var win = new Ext.Window({
title: 'Welcome guest user...',
autoEl: 'center',
closable: false,
border: false,
plain: true,
layout: 'table',
layoutConfig: {
columns: 3
},
bodyStyle: 'padding:0px 0px 0px 0',
items: [ btns ]
});
win.show(this);
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs.php"></script>
<style type="text/css">
.my_btn {
display:table-cell;
width:90px;
height:90px;
background-image:url('images/90btn.gif');
vertical-align:middle;
text-align:center;
color:#fff;
text-decoration:none;
}
.my_btn_over {
background-image:url('images/90btno.gif');
}
</style>
<script type="text/javascript" src="test.js"></script>
</head>
<body style="background-color:#000;">
</body>
</html>

Animal
19 Oct 2009, 2:00 PM
Read your code properly.

What is overCls a config of?

aw1zard2
19 Oct 2009, 2:12 PM
LOL thanks I see it now. Welp thats a day for me time to goto bed.