Ext Js3.2中Ext.Element类的学习
1：基本知识
Ext Js中最基本的元素是Ext.Element, 它是构成Ext.Js组件的元素，介于纯DOM和Component之间，它实在标准HTML元素上进行的高级封装，可以在上面添加如事件监听器，对DOM操作，对CSS操作等内容
W3C标准是通过document文档对象来获得DOM树内的某个元素，常用的方法如下：
var x = document.getElementById('test'); //通过id来获得
var y = document.getElementsByName('test'); //获得name为test的元素
var z = document.getElementsByTagName('input'); //获得标签为input的节点集合
通过调用Ext.get()/fly()方法返回一个Ext.Element对象，而不是普通的HTML DOM元素，Element除了提供一个快捷的，跨浏览器的接口外，还提供了高速缓存(cache)的机制，访问DOM元素时首先从缓存中查找，如果命中匹配对象就立即返回该对象，这样在多次访问同一对象的效率上有明显的优势
var extDom = Ext.get("test");
var eleDom = document.getElementById("test");
alert(extDom == eleDom); //打印true即为同一对象 程序实际运行时打印的是false
var extDom = Ext.get("test").dom;
var eleDom = document.getElementById("test");
alert(extDom == eleDom); //打印true即为同一对象 程序运行时打印的是true
出现上述差别的原因是Ext.get方法返回的是Ext.Element对象，而document.getElementById()返回的是Document对象。
Ext.get方法是静态方法Ext.Element.get的简写形式，该方法接收一个混合的参数，混合的意思表明该参数可以是字符串，HTML元素；返回的是Ext.Element的对象
与document.getElementById()方法一样，Ext.getDom方法获取HTML标准元素，不过方法的参数可以较为灵活，参数可以是DOM结点的id，DOM结点对象或者DOM结点对于的Ext Js元素（Element)等，用法如下：
var e = new Ext.Element('test');
alert(Ext.getDom("test")); //通过id获得对象
alert(Ext.getDom(e)); //自动转化Ext.Element对象为标准HTML对象
alert(Ext.getDom(e.dom)); //直接返回HTML对象
还有一些常用的方法：
Ext.getCmp：该方法用于获取一个Ext Js组件，该方法只接受一个参数，即为该组件的id
Ext.getBody：该方法是把document.body对象封装成Ext Js对象返回，该方法不带任何参数
Ext.getDoc：该方法把当前HTML文档对象，即document对象封装成Ext Js的Element对象返回，该方法不带任何参数
2：Ext.Element的一些方法
*show( [Boolean/Object animate] ) : Ext.Element
Ext.onReady(function () {
var test = Ext.get('test').show(true); //表示在该页面显示此元素
});
Ext.onReady(function () {
var test = Ext.get('test').hide(true); //表示在该页面隐藏此元素
});
Ext.onReady(function () {
var test = Ext.get('test').setOpacity(1);
});
visible: BooleanWhether the element is visibleanimate: Boolean/Object(optional) True for the default animation, or a standard Element animation config object
<script type="text/javascript">
Ext.onReady(function () {
Ext.fly('yxn').setVisibilityMode(Ext.Element.DISPLAY); //设置显示格式为display
Ext.fly('yxn').setVisible(false); //若为true，相当与show，否则为hide
});
</script>
</head>
<body>
<div id="wzy">wzy</div>
<div id="wzy">setVisibilityMode 测试</div>
<div id="yxn">display</div>
<div id="gdd">visibility</div>
</body>
程序效果图：
