一、理解Html DOM、Ext Element及Component
它们分别一层一层向高处抽象。
不管怎样,EXT代码都是最后以HTML代码形式呈现给浏览器的,而每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现。这便是对HTML的对一次抽象,当然为的是更好的操作浏览器内容。
Ext Element则是对Html DOM的再一次封装(当然各种JS框架封装方式不同,所具有的封闭方法也不尽一致),为的是进一步简易方便操作Html DOM。
Component各种Ext Element的组合再封装便构成了Component。
Ext Element是Ext的底层API,主要是由Ext或自定义组件调用的,而DOM是W3C标准定义的原始API,Ext的Element通过操作DOM 来实现页面的效果显示。
仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句 javascript才能完成。因此,Ext在DOM的基础上,创建了Ext Element,可以使用Element来包装任何DOM,Element对象中添加了一系列快捷、简便的实用方法。
对于终端用户来说,仅仅有Element是不够的,比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此,除了Element以外,Ext 还建立了一系列的客户端界面组件Component,我们在编程时,只要使用这些组件Component即可实现相关数据展示及交互等。在使用Ext开发的应用程序中,组件Component是最高层次的抽象,是直接给用户使用的。
在Ext中,组件渲染以后可以通过访问组件的el属性来得到组件对应的Element,通过访问Element的dom属性可以得到其下面的DOM对象。另外,我们可以通过通过Ext类的快捷方法getCmp、get、getDom等方法来得组件Component、Ext元素Element及DOM节点。比如:
总结:
由HTML DOM->Ext Element->Ext Component逐步抽象,
然而,渲染过程却相反,每一个组件在渲染render的时候,都会依次通过Element、DOM来生成最终的页面效果。
因此,必须在组件渲染后才可以使用Ext.get()获取Element。
例子:
var view=new Ext.Viewport();//创建了一个组件Component
view.el.setOpacity(.5);//调用Element的setOpacity方法
view.el.dom.innerHTML="Hello Ext";//通过Element的dom属性操作DOM对象
再看下面的代码:
var win=new Ext.Window({id:"win1",title:"我的窗口",width:200,height:200});
win.show();
var c=Ext.getCmp("win1");//得到组件win
var e=Ext.get("win1");//根据id得到组件win相应的Element
var dom=Ext.getDom("win1");//得到id为win1的DOM节点
正常:
login.show(); // 渲染后
alert(Ext.get('userName').getValue());
报错:
alert(Ext.get('userName').getValue()); //报空的错。
login.show();