extjs
靠， <script language="javascript" type="text/javascript" src="ext-base.js" ></script>
<script language="javascript" type="text/javascript" src="ext-all.js" ></script>
这两个文件的引入顺序不能错，
虽然在有些情况下不会出问题但是。。。
下面几个例子顺序有错，但是没出问题
出问题是在用到Ext.onReady()时 用firebug 查看会出现Ext is not defined 之类的问题
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- //定义命名空间 Ext.namespace("org.jixiuf"); //定义一个类的构造 方法 org.jixiuf.Person=function(){ this.name="hello,jixiuf" ; } function test (){ 生成 一个对象 var p = new org.jixiuf.Person(); 给Person 这个对象添加 一个属性age,默认值为"o" , Ext.apply(org.jixiuf.Person.prototype , { age:"o" }); //给Person 添加 一个方法，print Ext.apply(org.jixiuf.Person.prototype, { print:function(str){ alert(str); } }); 调用 p.print("aaaaba"); } // --></mce:script> </head> <body onload="test()" > }</body> </html>
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.namespace("org.jixiuf"); org.jixiuf.Person=function(){ } //给Person 类添加 一个方法print Ext.apply( org.jixiuf.Person.prototype, { print:function(str){ alert(str); } } ); //给Person 对象添加 一个静态方法print，其实现原理是构建一个Person 实例，然后用这个实例调用相应的方法 org.jixiuf.Person.print=function(str ){ var person = new org.jixiuf.Person() ; person.name=str ; person.print(person.name); } function test (){ //调用 静态方法 org.jixiuf.Person.print("aaa"); } // --></mce:script> </head> <body onload="test()" > }</body> </html> <atic.html 1 1 2%
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.namespace("org.jixiuf"); 一种构建函数，可以传递 多个参数， org.jixiuf.Person=function(cfg){ 注意这里是this, 而不是this.prototype Ext.apply(this,cfg); } function test (){ 传参的方式 ，json 形式 var p = new org.jixiuf.Person({name:"jack",age:11 }); alert(p.name+p.age); } // --></mce:script> </head> <body onload="test()" > </body> </html>
extend 继承
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- //这里所谓的继承是对父类 里相同属性，相同方法的覆盖，但好像父类中的其他属性方法并不能得到继承 ， Ext.namespace("org.jixiuf"); org.jixiuf.Person=function(cfg){ //Person sex 属性默认为default this.sex="default" ; Ext.apply(this,cfg); } org.jixiuf.Teacher=function(cfg){ Ext.apply(this,cfg); } //这里让Teacher 继承Person ,其实就是让Teacher 具有了一个属性sex =1 Ext.extend(org.jixiuf.Teacher,org.jixiuf.Person,{sex:1}); function test (){ var t = new org.jixiuf.Teacher({name:"jack",age:11 }); //这里是1而不是default alert(t.sex); } // --></mce:script> </head> <body onload="test()" > </body> </html>
extend 方法的覆盖
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.namespace("org.jixiuf"); //定义一个Person类 org.jixiuf.Person=function(cfg){ Ext.apply(this,cfg); } //给Person,一个print 方法 Ext.apply(org.jixiuf.Person.prototype, { print:function(){ alert("hello,"+this.name); } }); //新建 一个Person 类 org.jixiuf.Teacher=function(cfg){ Ext.apply(this,cfg); } //让类Teacher 继承Person ，并且覆盖Person 的print 方法， Ext.extend(org.jixiuf.Teacher,org.jixiuf.Person,{ print:function(){ alert("hello, teacher "+this.name); } }) //测试 function test (){ var p = new org.jixiuf.Person({name:"jack"}); p.print(); var t = new org.jixiuf.Teacher({name:"jack" }) t.print(); } // --></mce:script> </head> <body onload="test()" > </body> </html>
事件
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.namespace("org.jixiuf"); org.jixiuf.Person=function(cfg){ Ext.apply(this,cfg); //这里添加两个事件 this.addEvents( "nameChange" ,"sexChange" ); } //让Person 继承Observable Ext.extend(org.jixiuf.Person,Ext.util.Observable, { name:"" , setName:function(_name){ //这里发布一个名为nameChange的事件，发布的事件可以被 定阅， // this ,this.name ,_name 是传给订阅者的参数 ，订阅者可以拿到它们 this.fireEvent("nameChange",this,this.name,_name); this.name=_name; } }); var person; //dom 准备好后，会自动执行下面的方法 Ext.onReady( function(){ person=new org.jixiuf.Person(); //person 订阅了nameChange 事件， //也就是说一旦事件被 触发，就会执行这里的函数 , p pName ,pNewName 是从上面传过来的三个参数 person.on("nameChange",function(p, pName,pNewName){ alert("the new name is :"+ pNewName); } ); } ); var p; function test(){ //调用person 的setName //在setName 方法里会触发 nameChange事件， 而person 对象又订阅了这个事件，所以 //会执行相应的函数 ， person.setName("hello"); p = new org.jixiuf.Person(); //这里并没有导致事件的触发，不知道 什么原因 //照我的理解 ，Person 类里的setName 函数 ，会触发一个nameChange 事件， //而person对象 ，订阅了nameChange 事件，应该是不论是谁触发nameChange 事件，person对象 应该都能接收到,但却没有，不理解 p.setName("jack"); }; // --></mce:script> </head> <body > <form> <input type="button" onclick="test()" value="click here" /> name:<input name="name" /> </form> </body> </html>
Button
<html> <head> <link rel="stylesheet" type="text/css" src="ext-all.css" mce_src="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.onReady( function(){ var btn=new Ext.Button( { renderTo:Ext.getBody(), text:"Ok" /* handler:function(){ alert("don't trouble me !!! ") } 三种（二个以属性方式，一个以方法on） button click 事件的定义 方式 //listeners 实际是Ext.util.Observable里的属性，button 继承 了> 它 listeners:{ "click":function(){ alert("stop it!!!"); } } */ } ); btn.on("click", function(){ alert("i can't stand it, go out !!!") } ) } ) // --></mce:script> </head> <body > </body> </html>
UI Panel button textfield
<html> <head> <link rel="stylesheet" type="text/css" href="ext-all.css" mce_href="ext-all.css" ></link> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- var i=0; Ext.onReady( function(){ //首先TextField 不能直接 加到Ext.getBody() :document.body上，需要一个Container ,如Panel var panel_ = new Ext.Panel( { // renderTo:Ext.getBody(),//把Panel 附到body 上 title:" Panel title" , width:300, frame:true,//四个角变成圆角 layout:"form", //布局form labelWidth:70, listeners:{ //render 事件，表示当前对象构建完成 后，触发此事件, render:function(p){ //当当前面板构建 完成 后，可以往上放东西了，如此处的TextField p.add( new Ext.form.TextField( { id:"fieldId" , fieldLabel :"姓名 " }) ); } } } ) //addButton 添加按钮到面板，此方法必须在 //panel_.render(Ext.getBody());之前，面panel_构建时不能有renderTo属性 panel_.addButton({text:"fill the field" }, function(){ var tf = Ext.getCmp("fieldId"); tf.setValue("hello,"+i); i++; }); //试比较button ，textfield 两种添加方式 ，一个以事件的方式 ，一个以addbutton var tf2= new Ext.form.TextField( { id:"fieldId2" , fieldLabel :"age " }); panel_.add(tf2); //这个方法的作用是将Panel_面板附加到body 上， 可以以renderTo:Ext.getBody() //的方式在构建Panel对象 的时候就添加 ，但是会有一个缺点，像addButton //等等方法就没法使用了，因为addButton 必须在render 之前， panel_.render(Ext.getBody()); }) // --></mce:script> </head> <body > </body> </html>
dom 的处理，添加 class 属性控制面板位置
<html> <head> <link rel="stylesheet" type="text/css" href="ext-all.css" mce_href="ext-all.css" ></link> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <mce:style><!-- .class1{ position:absolute ; height:100% ; color:red; top:0; left:0; } .class2{ position:absolute ; top:37%; left:45%; } --></mce:style><style mce_bogus="1"> .class1{ position:absolute ; height:100% ; color:red; top:0; left:0; } .class2{ position:absolute ; top:37%; left:45%; } </style> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- var i=0; Ext.onReady( function(){ var panel_ = new Ext.Panel( { // renderTo:Ext.getBody(),//把Panel 附到body 上 title:" Panel title" , width:300, height:300, frame:true,//四个角变成圆角 layout:"form", //布局form labelWidth:70, } ) var div2= { id:"id2" , tag:"div", cls:"class2", cn:[{id:"id3",tag:"div" ,cls:"class1" }] }; /* <div id="id2" class="class2" > <div id="id3" class="class1" > </div> </div> */ var d=Ext.DomHelper.append(Ext.getBody(), div2,true );//返回extjs 对象 alert(d.child("div").id); //var d=Ext.DomHelper.append(Ext.getBody(), div2,false );// 返回htmlElement //var d=Ext.DomHelper.append(Ext.getBody(), div2 );// 返回htmlElement //将panel_加到id=id3的div 内，也有可能是直接以id=id3 的div 为panel_，不太清楚 /* 这是applyToMarkup生成的html <div id="id2" class="class2> <div class="class1 x-panel" id="id3" style="width: 300px"> </div> ; </div> */ //panel_.applyToMarkup(d.child("div")); /* 这是render 生成的html <div id="id3" class="class1"> <div id="ext-comp-1001" class="x-panel" style="width: 300px;"> </div> <div> */ panel_.render(d.child("div")); }) // --></mce:script> </head> <body > </body> </html>
xtype
<html> <head> <link rel="stylesheet" type="text/css" href="ext-all.css" mce_href="ext-all.css" ></link> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <mce:style><!-- .class1{ color:red; } --></mce:style><style mce_bogus="1"> .class1{ color:red; } </style> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.onReady( function(){ var panel_ = new Ext.Panel( { // renderTo:Ext.getBody(),//把Panel 附到body 上 title:" Panel title" , width:300, height:150, frame:true,//四个角变成圆角 layout:"form", //布局form labelWidth:30, defaults:{xtype:"textfield",width:200},//默认的一些设置，为了简化 ite ms 中的一些设置 ,Compenment 里有参考,表示items 指定的json 格式 的对象默认类型 items :[ {xtype:"textfield", id:"textFiled1" ,fieldLabel:"name",width:200 }, {id:"textFiled2" ,fieldLabel:"age" } ], buttons:[{xtype:"button", id:"commit",text:"this is a button" }] } ) //这里showArea 是一个div 的id , panel_.render("showArea"); //panel_.render(Ext.getBody()); }) // --></mce:script> </head> <body > <div id="showArea" ></div> </body> </html>
window
w <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style><!-- .class1{ color:red; } --></mce:style><style mce_bogus="1"> .class1{ color:red; } </style> <link rel="Stylesheet" type="text/css" href="ext-all.css" mce_href="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <script language="javascript" type="text/javascript" > Ext.onReady( function(){ var window = new Ext.Window( { title:"login", layout:"form", //布局form plain:true, labelWidth:30, defaults:{xtype:"textfield",width:200},//默认的一些设置，为了简化 ite ms 中的一些设置 ,Compenment 里有参考,表示items 指定的json 格式 的对象默认类型 items :[ {xtype:"textfield", id:"textFiled1" ,fieldLabel:"name",width:200 }, {id:"textFiled2" ,fieldLabel:"age" } ], buttons:[{xtype:"button", id:"commit",text:"close window" ,width:50,h andler:function(){ //hide 只是display:none ，close 则销毁dom 及extjs 对象 ，后者占cpu，> 因为要进行dom处理 window.hide(); window.close(); } }], resizable:false,
mixcollection items getCmp
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style><!-- .class1{ color:red; } --></mce:style><style mce_bogus="1"> .class1{ color:red; } </style> <link rel="Stylesheet" type="text/css" href="ext-all.css" mce_href="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.onReady( function(){ var window = new Ext.Window( { title:"login", layout:"form", //布局form plain:true, labelWidth:30, defaults:{xtype:"textfield",width:200},//默认的一些设置，为了简化 ite ms 中的一些设置 ,Compenment 里有参考,表示items 指定的json 格式 的对象默认类型 items :[ {xtype:"textfield", id:"name" ,fieldLabel:"name",width:200 }, {id:"textFiled2" ,fieldLabel:"age" } ], buttons:[{xtype:"button", id:"id3",text:"OK" ,width:50,handler:functi on(){ //mixcollection 对象` var collection=window.items; var name=collection.first(); var age=collection.itemAt(1); alert("name= "+ name.getValue()+",age="+age.getValue()); name=Ext.getCmp("name"); alert(name.getValue()); } }], resizable:false, bodyStyle:"padding:8px;" , } ) //window.render("showArea"); window.show(); }) // --></mce:script> </head> <body > <div id="showArea" ></div> </body> </html>
一个实例
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style><!-- .class1{ color:red; } --></mce:style><style mce_bogus="1"> .class1{ color:red; } </style> <link rel="Stylesheet" type="text/css" href="ext-all.css" mce_href="ext-all.css" ></link> <mce:script language="javascript" type="text/javascript" src="ext-base.js" mce_src="ext-base.js" ></mce:script> <mce:script language="javascript" type="text/javascript" src="ext-all.js" mce_src="ext-all.js" ></mce:script> <mce:script language="javascript" type="text/javascript" ><!-- Ext.onReady( function(){ var window = new Ext.Window( { title:"添加人员", plain:true, height:500, width:500, bodyStyle:"padding:8px;" , items:[ {baseCls:"x-plain",layout:"column",items:[{ layout:"form" , labelWidth:50, defaults:{xtype:"textfield",labelStyle:"text-align:right" }, items:[ {id:"name",fieldLabel:"name", columnWidth:0.5,xtype:"text field" }, {id:"age" ,fieldLabel:"age",columnWidth:0.5,xtype:"textfi eld"}, {id:"sex" ,columnWidth:0.5,fieldLabel:"sex",xtype:"textfi eld"} ] }, { columnWidth:1,height:500,width:500,layout:"form", labelWidt h:35, baseCls:"x-plain", items:[{ fieldLabel:" hehe ,me", inputType:"image", height:190, width:185, disabled:true, xtype:"textfield" , id:"imgInput" , }] } ] } ] , listeners:{ show:function(){ var imgInput=Ext.getCmp("imgInput"); //如何获得htmlDom对象 ， //获得Ext.Element ,里面有个dom 属性 //对地window 这种大对象，render 的时候，只是把window 对应的div render 到body上 //其子元素并未，子元素在show 时才会附到body 上，而getEl 也不能到render时使用 //所以render:function()里写getEl(),undefined var extElement=imgInput.getEl(); var dom=extElement.dom; dom.src="head.jpg" ; } } } ) window.show(); }) // --></mce:script> </head> <body > <div id="showArea" ></div> <input type="image" height="95" src="head.jpg" mce_src="head.jpg"/> </body> </html>