EXT组件的运用和延迟加载

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

var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};var panel=new Ext.Panel(obj); panel.render("hello");<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}),newExt.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");

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

查看更多 下一篇