ExtJS学习(二)Ext组件模型

Ext中所有的组件都继承自Ext.component，这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期，这样在后续对这些组件进行维护管理时将更加便捷，同时也保证了在进行布局时的便利。

组件最常见的几项功能包含initComponent()、render()、show()和hide()，无论是哪一种组件都是通过初始化、渲染、显示、隐藏来实现其整个生命周期的。

作为基类Ext.Component本身不包含任何格式，我们需要在使用时为它指定渲染的HTML内容，通过HTML参数传入。

Ext.Panel例子：

Ext.onReady(function(){
    var box = new Ext.Panel({
        el: 'springok',  //对应html中定义的<div id="springok"></div> id值
        title:'springok标题',   //panel标题
        floating:true,  //是否飘逸
        draggable:true,  //是否拖拽
        html:'springok内容', //显示的内容
        pageX:100,  //x值
        pageY:50,    //y值
        width:200,   //宽度
        height:150   //高度
    });
    box.render();  //调用渲染方法
});

测试：

Ext.Component例子

 var box1 = new Ext.Component({
        el: 'springok1',
        style:'background-color:red;position:absolute',
        pageX:300,
        pageY:50,
        width:200,
        height:150
    });
    box1.render();

测试：

二者的区别：

——Ext.Panle是Ext中经常用到的一个组件，它直接继承自Ext.Container。一般继承Panle可以扩展自己的业务显示数据。与Component不同的是，Ext.panel无须继承其他类就可以直接使用。