PDA

View Full Version : Get element


Dig4Fire
21 Nov 2009, 5:13 AM
How to get the ul element?



Ext.onReady(function () {

Ext.select('h3').on('click', function (x,y) {

var el = Ext.get(y).next(); // doesn't work -> null

if (el.isVisible()) {
el.slideOut('t', {useDisplay: true});
} else {
el.slideIn();
}

});

});

</script>

</head>
<body>

<h3><a href="#">Chapter 1</a></h3>

<ul>
<li><a href="test1.htm">Test 1</a> </li>
<li><a href="test2.htm">Test 2</a> </li>
</ul>

<h3><a href="#">Chapter 2</a></h3>

<ul>
<li><a href="test3.htm">Test 3</a> </li>
<li><a href="test4.htm">Test 4</a> </li>
</ul>
Dig4Fire
21 Nov 2009, 5:34 AM
Has been settled.


var el = Ext.get(y).parent().next();
hello2008
22 Nov 2009, 9:17 PM
if you click the link within the title container (<h3>), target will be a link, then parent().next() is correct, if clicking <h3> only, target is just you want, then next() is correct.
Dig4Fire
23 Nov 2009, 2:06 AM
After a doubleclick on hr the ul elementis no more visible.

Any suggestions?
Dig4Fire
23 Nov 2009, 8:45 AM
Solved with jQuery


$("h3").click(function (el) {
$(el.target).parent().next().slideToggle();
});
jnicora
24 Nov 2009, 8:40 AM
there is no slide toggle, but i would go about this in a different way. i'd make my own slideToggle method



Ext.Element.prototype.slideToggle = function(){
var self = this;
if (this.isVisible()) {
this.lastHeight = this.getHeight();
this.shift({
height: 0,
useDisplay: true,
block: true,
callback: function(){
self.hide();
}
})
}
else {
this.show().shift({
height: this.lastHeight,
block: true,
useDisplay: true
});
}
};
then use this routine



Ext.onReady(function () {
Ext.select('h3').on('click', function (x,y) {
Ext.fly(y).parent().next().slideToggle();
});
});
and in my example i wrapped the UL's in DIV's because it seemed more symantec



<h3><a href="#">Chapter 1</a></h3>
<div>
<ul>
<li><a href="test1.htm">Test 1</a> </li>
<li><a href="test2.htm">Test 2</a> </li>
</ul>
</div>
<h3><a href="#">Chapter 2</a></h3>
<div>
<ul>
<li><a href="test3.htm">Test 3</a> </li>
<li><a href="test4.htm">Test 4</a> </li>
</ul>
</div>