所有Element(通过Ext.get,Ext.fly)都是Ext.dom.Element封装的对象
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>appendChild</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="appendChild.js"></script>
- </head>
- <body>
- <center>
- <div id="div01"></div><br/>
- </center>
- </body>
- </html>
- (function(){
- Ext.onReady(function(){
- function createChild(){
- var el = document.createElement("h5");
- el.appendChild(document.createTextNode("我是被追加的"));
- return el;
- }
- Ext.get("div01").appendChild(createChild());
- });
- })();
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>createChild</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="createChild.js"></script>
- </head>
- <body>
- <center>
- <div id="div01"></div><br/>
- </center>
- </body>
- </html>
- (function(){
- Ext.onReady(function(){
- Ext.getBody().createChild({
- tag:'li',
- id:'item1',
- html:'我是第一个节点'
- });
- });
- })();
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>element</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <link rel="stylesheet" type="text/css" href="css.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="element.js"></script>
- </head>
- <body>
- <center>
- <div id="div01">我是第一个div</div><br/>
- <input type="text" id="input01" value="abc"/>
- </center>
- </body>
- </html>
- (function(){
- Ext.onReady(function(){
- var div01 = Ext.fly("div01");//之前版本的写法 Ext.core.Element.fly
- //1.鼠标滑过的时候增加一个样式,滑出的时候移除样式
- div01.addClsOnOver("divC");
- //2.得到el的方法是Ext.get()
- //This method does not retrieve Components.
- //This method retrieves Ext.dom.Element objects which encapsulate DOM elements.
- //To retrieve a Component by its ID, use Ext.ComponentManager.get.
- var input01 = Ext.get("input01");
- var fn1 = function(){
- alert("单击B按钮调用这个函数");
- }
- input01.addKeyMap({key:Ext.EventObject.B,ctr:false,fn:fn1,scope:input01});
- input01.addKeyListener({key:Ext.EventObject.X,ctr:true},function(){
- alert("单击ctrl+X");
- },input01);
- });
- })();
- .divC{color:red}
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.dom.Helper</title>
- <link rel="stylesheet" type="text/css" href="css.css"/>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.dom.Helper.js"></script>
- </head>
- <body>
- <div class="divC">divC</div>
- </body>
- </html>
- Ext.onReady(function(){
- var p = Ext.create("Ext.panel.Panel",{
- width:400,
- height:300,
- html:'<p id="p1">hello world</p>',
- id:'myp01',
- title:'my panel',
- renderTo:Ext.getBody()
- });
- Ext.DomHelper.append(Ext.get("p1"),"<br/><div id='d'>我是被追加的</div>");
- Ext.DomHelper.applyStyles(Ext.get("p1"),"color:red");
- Ext.DomHelper.applyStyles(Ext.get("p1"),"color:red");
- //下面两个是被当作兄弟追加的
- //insertAfter( String/HTMLElement/Ext.Element el, Object o, [Boolean returnElement] ) :
- //HTMLElement/Ext.Element
- //insertBefore( String/HTMLElement/Ext.Element el, Object/String o, [Boolean returnElement] ) :
- //HTMLElement/Ext.Element
- var html = Ext.DomHelper.createDom("<h1>hello</h1>");
- console.log(html);
- });
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.each</title>
- <link rel="stylesheet" type="text/css" href="css.css"/>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.each.js"></script>
- </head>
- <body>
- <div class="divC">divC</div>
- </body>
- </html>
- Ext.onReady(function(){
- var array = [-1,23,433,5,3];
- Ext.each(array,function(i){
- console.log(i);
- });
- var a = {
- name:'yfc'
- }
- Ext.apply(a,{getName:function(){
- return this.name;
- }});
- console.log(a.getName());
- console.log(Ext.encode(a));
- var o1= Ext.select("divC");
- console.log(o1);
- console.log(Ext.typeOf({}));
- console.log(Ext.typeOf(""));
- console.log(Ext.typeOf(function(){}));
- });
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.getCmp</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.getCmp.js"></script>
- </head>
- <body>
- <div id="myp"/>
- </body>
- </html>
- Ext.onReady(function(){
- var mypanel = Ext.create("Ext.panel.Panel",{
- width:400,
- height:300,
- html:'<p>hello world</p>',
- id:'myp01',
- title:'my panel',
- renderTo:'myp'
- });
- var myp = Ext.getCmp("myp01");
- myp.setTitle("new Title");
- });
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.js"></script>
- </head>
- <body onload="onload()">
- </body>
- </html>
- var onload = function(){
- alert("1我是被body的onload事件调用的");
- }
- Ext.onReady(function(){
- //1.onReady 这个方法里面的第一个参数(function)它执行在页面文件加载完毕之后和onload完成之后,在图片加载之前被调用
- alert("2 extjs");
- });
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.isEmpty</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.isEmpty.js"></script>
- </head>
- <body>
- <div id="myp"/>
- </body>
- </html>
- Ext.onReady(function(){
- alert(Ext.isEmpty({id:'01'}));
- alert(Ext.isEmpty({}));
- alert(Ext.isEmpty('',true)); //false
- alert(Ext.isEmpty('',false)); //true
- var a;
- alert(Ext.isEmpty(a));
- });
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.namespace</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.namespace.js"></script>
- </head>
- <body>
- </body>
- </html>
- Ext.onReady(function(){
- Ext.namespace("COM.PCAT.MORE","COM.PCAT.CORE");
- COM.PCAT.MORE.A =function(){
- name='uspcat';
- }
- COM.PCAT.CORE.A =function(){
- alert("COM.PCAT.CORE.A");
- }
- });
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.query</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="Ext.query.js"></script>
- </head>
- <body>
- <center>
- <table width="400" border="1">
- <tr>
- <td>123</td><td>123</td><td>123</td><td>123</td>
- </tr>
- </table>
- </center>
- </body>
- </html>
- Ext.onReady(function(){
- //通过类似XML的选择方式来查询我们的节点
- var arr = Ext.query("TR TD");
- console.log(arr);
- });