(四) 组件的使用

finally_m

浏览: 69762 次
性别:
来自: 北京

最近访客更多访客>>

huxin9118

糯米夹心的糖葫芦

SilverClou

Chord_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

EXT HTML

组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。
比如下面的例子：
<head>
   <script>
Ext.onReady(function(){
var obj = {title:"hello",width:300,height:200,html:'<h1>Hello,ExtJS</h1>'}
var panel=new Ext.Panel(obj);
panel.render("mydiv");
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
可以省掉变量obj，直接写成如下的形式：
   <script>
Ext.onReady(function(){
var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,ExtJS</h1>'});
panel.render("mydiv");
});
</script>
render方法后面的参数表示页面上的div元素id，也可以直接在参数中通过renderTo参数来省略手动调用render方法，只需要在构造函数的参数中添加一个renderTo属性即可，如下：
var pane l= new
Ext.Panel({renderTo:"mydiv",title:"hello",width:300,height:200,html:'<h1>Hello,ExtJS</h1>'});
对于容器中的子元素组件，都支持延迟加载的方式创建控件，此时可以直接通过在需要父组件的构造函数中，通过给属性items传递数组方式实现构造。如下面的代码：
var panel=new Ext.TabPanel(
{width:300,height:200,
items:[{title:" panel1",height:30},
  {title:" panel2",height:30},
  {title:" panel3",height:30}
]});
panel.render("mydiv");
注意中括号中加粗部份的代码，这些代码定义了TabPanel这个容器控件中的子元素，这里包括三个面板。上面的代码与下面的代码等价：
var panel=new Ext.TabPanel({width:300,height:200,
items:[
  new Ext.Panel({title:" panel1",height:30}),
  new Ext.Panel({title:" panel2",height:30}),
  new Ext.Panel({title:" panel3",height:30})
]});
panel.render("mydiv");
前者不但省略掉了new Ext.Panel这个构造函数，最重要前者只有在初始化TabPanel的时候，才会创建子面板，而第二种方式则在程序一开始就会创建子面板。也就是说，前者实现的延迟加载。

分享到：

(五) 组件的配置属性 | (三) ExtJS组件

2009-11-30 12:55
浏览 806
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论