【extjs入门】ExtJS的预配置类使用及实战练习

<script type="text/javascript" src="<%=basePath%>/ext-3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/ext-3.4/ext-all.js"></script>

<script type="text/javascript" src="<%=basePath%>/jsp/js/HelloWindow.js"></script>
<script type="text/javascript">
    // 从事Extjs组件设计时，常用的组件会经常出现，比如视图组件。如果视图组件每次使用时都要设置大小、标题，那么会让人非常心烦，预配置
    // 就是预先设置组件的属性，让特定属性先具有特定的默认值，以便直接使用
    Ext.onReady(function(){
        var helloWindow = new HelloWindow({
            items:{
                html:'
This is a window.
'
            }
        });
        helloWindow.show('windowDiv');
    });
</script>

HelloWindow.js如下：

var HelloWindow = Ext.extend(Ext.Window,{
    title:'Hello',
    width:500,
    height:300,
    // 重写父类Window的initComponent方法
    initComponent:function(){
        console.info("start HelloWindow component.");
        // 等价于Ext.Window.prototype.initComponent.apply(this,arguments)
        HelloWindow.superclass.initComponent.apply(this,arguments);
    }
})

ExtJS 预配置类练习


在ExtJS文件中经常会看到预配置类，字面意思是“预先配置好的类”。为什么需要预配置呢？配置的对象又是谁？从事ExtJS组件设计或使用时，常用的组件会经常出现，比如视图组件。如果视图组件每次使用时都要设置大小、标题等，那么会非常令人心烦，预配置类的用意就是预先设置组件的属性，让特定属性先具有特定的默认值，以便直接使用。本节将演示如何预先定义一个视图组件，并且设置好宽度、高度与标题。首先是HTML内容：

代码清单2-14｜文件名称：ch02/A.5.ExampleA014.htmlX

<scripttype="text/javascript"
src="../adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="../ext-all.js"></script>

<scripttype="text/javascript"src="HelloWindow.js"></script>
<scripttype="text/javascript">
Ext.onReady(function(){
varhelloWindow=newHelloWindow({
items:{
html:'
Thisisawindow.
'
}
});
helloWindow.show('windowDiv');
});
</script>

目前读者并不需要理解HTML文件中的全部内容，只需要知道在HTML文件读取完毕后(文件结构解析完毕，但图片还没有下载完)，Ext.onReady函数内定义的动作将会执行即可。首先创建HellowWindow实例，然后将窗体显示出来。注意的id属性要指派给helloWindow.show作为参数，如果不给show()指定参数，就不会产生动画效果。HelloWindow.js的内容为：

文件名称：ch01/HelloWindow.jsX

var HelloWindow=Ext.extend(Ext.Window,{
title:'Hello',
width:500,
height:300,
initComponent:function(){
console.info("Start HelloWindow component.");
HelloWindow.superclass.initComponent.apply(this,arguments);
}
});

HelloWindow继承自Ext.Window视图组件，预先定义了标题(title)、宽度(width)和高度(height)，并重写了initComponent()方法。ExtJS2.0引入了组件模型(ComponentModel)，每个视图组件都会调用initComponent()进行初始化动作，后面讨论视图组件时会再详细讨论。示例中要注意的是如何调用父类的initComponent()。使用Ext.extend时，会在子类的构造函数中加入superclass属性，该属性会指向父类构造函数的prototype，以下两种写法是等价的：
HelloWindow.superclass.initComponent.apply(this,arguments);
Ext.Window.prototype.initComponent.call(this,arguments);

apply()与call()也是等价的，可以交换使用。建议使用第一种ExtJS的写法。elloWindow.js预先设置好属性后，使用时只需要创建实例即可。示例结果如图2-5所示。

不管创建了几个HelloWindow实例，每个实例都会有500像素宽、300像素高，同时标题为Hello。如果要修改这些默认属性，只需要在创建实例时传入配置对象进行覆盖即可：

varhelloWindow=newHelloWindow({
title:'Hello,there',
items:{
html:'
Thisisawindow.
'
}
});

 因为组件内部会在构造函数内调用Ext.apply(this，新配置对象)，也就是用新配置对象具有的属性覆盖掉本身的属性，title就会被覆盖为“Hello，there”。以上示例表明：有默认值的组件可以使用预配置类来提高效率，尤其是开发大型项目时，预配置类可以节省大量时间。

【extjs入门】ExtJS的预配置类使用及实战练习

http://m.bbyears.com/wangyezhizuo/82633.html

推荐访问:extjs还有人用吗2017