冷雨在线
EasyJWEB,JavaScript,Spring,JPA,MySql
半路出家,现在混JAVA.
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>《ExtJS2.0实用简明教程》之组件的使用
《ExtJS2.0实用简明教程》之组件的使用
    作者:小雨 来源: 发表时间:2008-02-17

 
 

《ExtJS实用开发指南》印刷版3月10号推出,赶快去看看吧。 

  组件可以直接通过new 关键子来创建,比如控件一个窗口,使用new Ext.Window(),创建一个表格则使用new Ext.GridPanel()。当然,除了一些普通的组件以外,一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性及值,组件根据构造函数中的参数属性值来初始化组件。比如下面的例子:

<script>
var obj={title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'};
var panel=new Ext.Panel(obj);
panel.render("hello");
</script>
<div id="hello">&nbsp;</div>

  运行上面的代码可以实现如下图所示的结果:

  可以省掉变量obj,直接写成如下的形式:

var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
panel.render("hello");

  render方法后面的参数表示页面上的div元素id,也可以直接在参数中通过renderTo参数来省略手动谳用render方法,只需要在构造函数的参数中添加一个renderTo属性即可,如下:

new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});

  对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要父组件的构造函数中,通过给属性items传递数组方式实现构造。如下面的代码: 

var panel=new Ext.TabPanel({width:300,height:200,items:[
{title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30}]
});
panel.render("hello");

  注意中括号中加粗部份的代码,这些代码定义了TabPanel这个容器控件中的子元素,这里包括三个面板。上面的代码与下面的代码等价:

var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel(
{title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]
});
panel.render("hello");

  前者不但省略掉了new Ext.Panel这个构造函数,最重要前者只有在初始化TabPanel的时候,才会创建子面板,而第二种方式则在程序一开始就会创建子面板。也就是说,前者实现的延迟加载。

(版权声明:本人Blog上的所有文章版本均归EasyJF开源的冷雨所有,受法律保护,可以在互联网上进行转载,转载必须保留作者版权声明及链接;未经本人书面许可,不得把本人Blog上的文章用于出版、发行或其它商业用途。)

 

上一篇:ExtJS的组件    下一篇:组件的配置属性

 
 

(阅读 )   评论数(:9)
评论】 【收藏】
评论:共9条
wh0cd7182068 <a href=http://buyviagra2017.com/>viagra over the counter</a>
评论人: BrettfrinI     评论时间: 2017-05-27 20:34:29
评论人: BrettfrinI     评论时间: 2017-07-13 04:04:42
my boyfriend takes cialis

<a href="http://cialisxrm.com/">cialis coupon</a>

cialis bursa satД±Еџ

<a href=http://cialisxrm.com/>cialis generic</a>
评论人: RalphGut     评论时间: 2017-09-09 08:05:46
评论人: MatthewNunda     评论时间: 2017-09-20 15:57:22
评论人: FelipeCoish     评论时间: 2017-09-21 19:36:23
评论人: FelipeCoish     评论时间: 2017-09-22 03:39:28
评论人: FelipeCoish     评论时间: 2017-09-22 09:19:53
评论人: FelipeCoish     评论时间: 2017-09-22 18:06:55
instant loans
<a href="http://cashadvanceamericasev.org/">payday loans online</a>
quick cash payday loans
<a href=http://cashadvanceamericasev.org/>payday loans online</a> ’
评论人: FvtjjIdeori     评论时间: 2017-09-28 09:22:15

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率