ExtJs教程Word文件下载.docx
《ExtJs教程Word文件下载.docx》由会员分享,可在线阅读,更多相关《ExtJs教程Word文件下载.docx(93页珍藏版)》请在冰豆网上搜索。
/ecside/common/head_showResult.jsp"
%>
metahttp-equiv="
Content-Type"
content="
charset=utf-8"
/>
htmlxmlns="
http:
//www.w3.org/1999/xhtml"
>
head>
title>
title<
/title>
keywords"
keyword1,keyword2,keyword3"
description"
thisismypage"
content-type"
charset=UTF-8"
linkrel="
stylesheet"
type="
text/css"
href="
${ctx}/scripts/ext/resources/css/ext-all.css"
${ctx}/styles/demo_index.css"
scripttype="
text/javascript"
src="
${ctx}/scripts/ext/adapter/ext/ext-base.js"
/script>
${ctx}/scripts/ext/ext-all.js"
${ctx}/scripts/demo_index.js"
/head>
body>
divid="
west"
p>
Hi.I'
mthewestpanel.
/p>
/div>
north"
class="
header"
hxcy"
divclass="
logo"
imgsrc="
${ctx}/images/logo.gif"
header_menu"
ul>
liid="
ico_home"
ahref="
${ctx}/j_acegi_logout"
target="
_parent"
设为主页<
/a>
/li>
ico_favoritor"
添加到收藏夹<
ico_application"
切换平台<
ico_quit"
退出<
ico_help"
帮助<
/ul>
/body>
/html>
用了ExtJs后,IE打开页面是空白的问题解决
用了ExtJs后,IE打开页面是空白的问题解决:
好不容易搞了个EXTJS的DEMO(自己写的),然后里面就写了个HTML页面,结果浏览器访问时,发现FIREFOX显示正常,而IE却显示空白页面。
这个时候是需要检查一下html的DTD有没有写,如果没有写,加上就可以了。
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
2008-04-21
ExtJs关于Ext.extend()的说明
Ext.extend方法是用来实现类的继承。
extend(Objectsubclass,Objectsuperclass,[Objectoverrides]:
Object
第一个参数:
子类
第二个参数:
父类
第三个参数:
要覆盖的属性。
这里需要强调一下,子类继承下来的是父类中通过superclass.prototype方式定义的属性(包括用此方法定义的函数)。
例子如下:
functionS(){
}
S.prototype.s="
s"
;
S.prototype.s1="
s1"
functionC(){
this.c="
this.c1="
c1"
Ext.extend(C,S,{s1:
"
bycoverload"
});
varc=newC();
alert(c.s);
//s
alert(c.s1);
//bycoverload
<
如果按下面这个方式写就会提示c.s没有定义(undefind):
this.s="
this.s1="
//undefind
也可以通过如下方式来实现类的继承
C=Ext.extend(S,{s1:
此时,C是子类,S是父类
2008-05-06
extjs视频教程系列之-第一讲:
ExtJS介绍及应用举例
地址:
免费预览地址:
//imgshr.jpg.name/ttthrrwtvhytthhyjjwzzsjzjshszjyyjrry.swf
2008-05-14
透析Extjs的Ext.js源码
(一)对象属性的添加和设置
/**
*分析Ext.js
*/
*第一部分:
对象属性的添加和设置
Person={
sex:
'
woman'
//初始属性设置
};
Person.applay=function(source,copy,defaults){
if(defaults){
Person.applay(source,defaults)
if(source&
&
copy&
typeofcopy=='
object'
){
for(varpincopy){
//alert(p);
//p是属性名,通过source[p]=copy[p];
对source进行属性的添加和设置。
//如果copy中的属性列表包含有defaults的属性,则source中采用的是copy中的属性和对应的值。
source[p]=copy[p];
returnsource;
*一、传递的是{}配置列表时
//1、不传defaults的情况
Person.applay(Person,{
name:
wujinli'
age:
26
//alert(Person.name);
//输出属性名为name的属性值,输出结果:
wujinli,也可以用alert(Person["
name"
])
//2、传defaults并且第二个参数的属性列表中不包含第三个参数的属性的情况
},{
//3、传defaults并且第二个参数的属性列表中有包含第三个参数的属性的情况
丫梨'
丫梨,也可以用alert(Person["
*二、传递的是对象时
Child=function(){
this.farther="
farther-name"
this.mother="
mother-name"
Person.applay(Person,newChild());
//alert(Person.farther);
//输出属性名为farther的属性值,输出结果:
farther-name
透析Extjs的Ext.js源码
(二)能在定义时就能执行的方法的写法function(){...}
*第二部分:
能在定义时就能执行的方法的写法function(){...}();
*一、普通的方法的定义与执行
//1-1、普通的方法定义,不带返回值的情况
fun=function(){
alert("
执行"
);
//1-2、普通的方法执行,不带返回值的情况
//fun();
//输出结果:
执行
//2-1、普通的方法定义,带返回值,且返回值是个字符串的情况
return"
返回的是字符串"
//2-2、普通的方法执行,带返回值,且返回值是个字符串的情况
//2-3、普通的方法执行,带返回值,且返回值是个字符串的情况,并将返回值输出
//alert(fun());
执行,返回的是字符串,(分别是两次警告框形式出现),原因是,先执行fun(),然后会带回返回的字符串,再通过alert输出
//alert(typeoffun());
执行,string
//3-1、普通的方法定义,带返回值,且返回值是个object的情况
returnnewDate();
//3-2、普通的方法执行,带返回值,且返回值是个object的情况
//3-3、普通的方法执行,带返回值,且返回值是个object的情况,并将返回值输出
执行,WedMay1416:
25:
32UTC+08002008
//3-4、普通的方法执行,带返回值,且返回值是个object的情况,并将返回值类型输出
执行,object
//4-1、普通的方法执行,带返回值,且返回值是个function的情况
returnfunction(){
返回类型是个方法"
};
//4-2、普通的方法执行,带返回值,且返回值是个function的情况
//4-3、因为fun()执行后返回的是个function,所以根据这个返回的function的参数情况(比如参数的个数和类型)再执行一次返回的function,
//因为此处这个返回的function是不需要参数的,所以就可以直接用()来执行
//fun()();
执行,返回类型是个方法
执行,function
*定义时就能执行
fun=function(){
}();
//alert(fun);
//返回的是个字符串
//alert(fun)
//返回的是个object
alert(fun);
returnfunction(){
}//返回的是个方法
fun();
透析Extjs的Ext.js源码(三)扩展
if(!
Person.extend){//若extend属性还未存在则执行里面的代码
Person.applay(Person,{
extend:
function(){
定义时执行"
hello"
}()//注意这里加了一对(),表示在new一个Person对象的时候就会立即执行extend后面定义的方法,并且返回里面return的方法给extend属性,
//那么这样,extend就是一个方法类型的属性了
});
//因为之前!
Person.extend为true,所以进行了Person.applay方法的执行,而参数中extend元素又是个定义时即时执行的属性,因此这里就先输出结果:
定义时执行
Person.extend();
hello
//newPerson();
定义时执行,没执行一次newPerson(),都会输出一次这个结果
透析Extjs的Ext.js源码(四)去理解Ext.js
//先定义匿名方法,第一个括号对里的,必须要有这个括号对,之后第二个括号对用来执行这个匿名方法,如果这个匿名方法返回的是function,那么可以加第三个括号对。
(function(){
aa"
)
bb"
})();
aa
//带参数的匿名方法使用
(function(a,b){
alert(a);
alert(b);
returnfunction(c){
alert(c);
})("
匿名方法的第一个参数值"
"
匿名方法的第二个参数值"
)("
调用匿名方法执行后返回方法所需要的参数值"
匿名方法的第一个参数值,匿名方法的第二个参数值,调用匿名方法执行后返回方法所需要的参数值
2008-05-15
透析Extjs的Ext.js源码(五)分析继承的实现
ext中有关继承的实现的关键代码如下:
(Ext.js中)
extend:
extend:
function(){
//inlineoverrides
vario=function(o){
for(varmino){
this[m]=o[m];
varoc=Object.prototype.constructor;
returnfunction(sb,sp,overrides){
if(typeofsp=='
){
overrides=sp;
sp=sb;
sb=overrides.constructor!
=oc?
overrides.constructor:
function(){sp.apply(this,arguments);
varF=function(){},sbp,spp=sp.prototype;
F.prototype=spp;
sbp=sb.prototype=newF();
sbp.constructor=sb;
sb.superclass=spp;
if(spp.constructor==oc){
spp.constructor=sp;
sb.override=function(o){
Ext.override(sb,o);
sbp.override=io;
Ext.override(sb,overrides);
sb.extend=function(o){Ext.extend(sb,o);
returnsb;
}()
override:
override:
function(origclass,overrides){
if(overrides){
varp=origclass.prototype;
for(varmethodinoverrides){
p[method]=overrides[method];
Ext.apply:
Ext.apply=function(o,c,defaults){
if(defaults){
//no"
this"
referenceforfriendlyoutofscopecalls
Ext.apply(o,defaults);
if(o&
c&
typeofc=='
for(varpinc){
o[p]=c[p];
returno;
最关键的是extend部分的代码,它使得如果子类没有constructor(或者说子类的constructor就是个默认的Object),那么当new一个子类的时候,会调用他的父类的构造器,因此,我们看到Panel是直接通过Ext.Panel=Ext.extend(Ext.Contailer,{...});
的方式直接定义的,在newPanel({...})的时候就能层层进去一直到有构造器的超类Ext.Component,并执行这个超类的构造器里的代码。
而Ext.Component的构造器代码中有this.initComponet()方法,这样就能够调用子类的initComponent()方法,而子类的initComponent()方法中都有子类名.superclass.initComponent();
这样的代码来调用父类的init方法,这样我们在new一个子类的后就能够直接初始化了所有的信息。
extend中最关键的一句话是:
sb=overrides.constructor!
它表示了执行父类构造器的原因,
new对象时,就是执行这个function(){sp.apply(this,arguments);
}方法,
sp.applay()执行时,父类构造器就会马上被执行。
比较并执行下面的代码就可以理解了上面说的内容了:
1、子类有构造器的情况
Parent=function(){
parent"
child"
Ext.extend(Child,Parent,{
init:
function(){
child'
sinitfunction"
varcl=newChild();
child
cl.init();
sinitfunction
2、子类没有构造器的情况
Child=Ext.extend(Parent,{
c