Hi Glen,
As promised, this code is a bit more complex in .33, but I guess this isn't too bad... :) I think this should be pretty close to what you're looking for .33 style:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Ext v.33 Hide/Show</title>
<script type="text/javascript" src="_src/0.33/scripts/utilities.js"></script>
<script type="text/javascript" src="_src/0.33/scripts/ext-all-debug.js"></script>
<style>
.editable {display:none;}
</style>
<script>
YAHOO.ext.EventManager.onDocumentReady(function(){
getEl('doSwap').on('click', function(){
var doc = getEl(document);
var roNodes = doc.getChildrenByClassName('readOnly');
var edNodes = doc.getChildrenByClassName('editable');
for (var i=0; i<roNodes.length; i++){
roNodes[i].setDisplayed('none');
}
for (var i=0; i<edNodes.length; i++){
edNodes[i].enableDisplayMode('block').show(true, .5);
}
});
});
</script>
</head>
<body>
<h1>Ext v.33 Hide/Show</h1>
Some text: <div class="readOnly">Read-only 1</div>
<div class="editable"><input type="text" value="Editable 1" /></div>
More text: <div class="readOnly">Read-only 2</div>
<div class="editable"><input type="text" value="Editable 2" /></div>
<input type="button" value="Swap" id="doSwap" /></p>
</body>
</html>
So obviously, there's no nice selector functionality going on here. The reason is that in .33, yui-ext simply did not have a true selector library (in fact, you could optionally import cssQuery for that reason). That's precisely what led to DomQuery, so that starting with 1.0, Ext would have a native selector lib out of the box. I tried adapting the DomQuery class to run under .33, but it has too many dependencies on 1.0. You could maybe get it to work if you ported some functions from 1.0 directly into the DQ class, but I don't think I would bother and it may not even work anyway.
Here are a few things to note about the code:
* If you have a logical container node that is more specific than 'document' you should use it instead
* The 1.0 visual effects like highlight() were not built into Element in .33. If you wanted to do anything fancy visually, you'd probably want to look into the Actor class (but Actor has been deprecated in 1.0, so I probably wouldn't bother).
* The show/hide methods in .33 do support an animation parameter and duration, which allow you to fade in/out as shown in the .show(true, .5) -- I think this is similar to what you're after.
* Ext defaults to visibility mode (visibility:hidden), so we have to use display mode calls to flow the document correctly. Since hiding requires no anim, just call setDisplayed('none'). Since we want to animate the show though, we call enableDisplayMode first so that show will then use it correctly.
* This is a one-way conversion from hidden to displayed -- to toggle the elements multiple times, you could add in a call to .replaceClass() at the end of each chain to swap the class names as appropriate.
Anyway, hope this helps. One more thing, in my previous post, the 1.0 code was a bit verbose. Here's what the same code could look like under 1.0 using anonymous functions like I did in this example:
Ext.onReady(function() {
Ext.get('doSwap').on('click', function(){
Ext.select('.readOnly').setDisplayed('none');
Ext.select('.editable').fadeIn();
});
});
Brian