extJs学习基础

显示和隐藏

所有的组件都是在show和hide方法中构造的。用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了：

Ext.onReady(function(){

var panel = Ext.create('Ext.panel.Panel',{

　　renderTo: Ext.getBody(),

　　title: 'Test',

　　html: 'Test panel',

　　hideMode: 'visibility'   //设置css显示

});



panel.hide();

panel.show();

});

浮动组件

浮动组件是通过css绝对路径将文档放置在外的，并且不在参与组件的容器的布局的。有些组件像Windows是默认的浮动，所有的组件都可以通过配置来实现浮动：

 

 1 //浮动组件 默认是在界面中间

 2              var panel = Ext.create('Ext.panel.Panel',{

 3                     renderTo: Ext.getBody(),

 4                     title: 'Test',

 5                     html: 'Test panel',

 6                     hideMode: 'visibility',

 7                     width: 200,

 8                     height: 100,

 9                     floating: true,   //生成浮动组件

10             });    

 

下面有一些对浮动组件来说可以进行配置的一些方法

1.draggable:可以拖动屏幕周围浮动组件。

2.shadow:定制的外观浮动组件的影子。

3.alignTo:将浮动组件指定到特定的元素。

4.center() 将组件浮动到组件的中心

 

创建自定义组件

成分或者扩展

当创建一个新的UI类的时候，该类必须做出决定是否应该拥有一个组件的一个实例,或扩展组件

根据功能需要继承一个最近的基类是被推荐的。这是因为EXT JS提供的自动生命周期管理包含了当需要的时候自动渲染，自动大小，自动调整位置当通过布局管理的时候，也会自动的从容器中移除和销毁。

通过组建创建新类比较容易，不推荐使用一个新的类拥有一个组件在外部去渲染和管理。

子类

类系统 让扩展extjs框架变得非常容易。Ext.Base是所有Ext JS类的构建块,原型和这个类的静态成员被其他类继承。

尽管你可以再低水平的情况下增加一个方法，但是开发人员在通常情况下会想通过高一点的继承链来开始。

下面这个例子创建了一个Ext.Component的子类：

1 Ext.define('My.custom.Component', {  

2     extend: 'Ext.Component',  

3   

4     newMethod : function() {  

5        //...  

6     }  

7 });

这个例子创建了一个新的类‘My.custom.Component’，它继承了Ext.Component的所有方法属性等。

 

模板方法

EXT JS使用 模板方法模式 代表子类，行为。

这意味着，在继承链中的每一个类都可能贡献一个额外的逻辑组件的生命周期中的某些阶段。每一个类实现自己的独有的行为，并且允许其他继承自这个类的实现自己特有的逻辑。

典型例子就是 渲染 方法，render 是定义在Component类中的一个方法，它对初始化组件的呈现阶段生命周期负责。render不能被重写，但是可以调用onRender方法在处理子类实现的时候可以调用来实现自己的特有属性方法。每一个onRender方法必须调用父类的onRender方法在贡献自己额外逻辑的时候。

下面的表格展示了onRender模板方法的功能。

render方法被调用（通过布局管理器来实现的）。这个方法不能被重写也是通过Ext基类实现的，它调用this.onRender方法，这个方法实现了当前子类（如果被实现了的话）。这个就调用父类的版本，以此类推。最终，每个类贡献了自己的功能，控制返回render方法。

下面是一个组件子类实现onRender的例子：

 1             Ext.define('My.custom.Component',{

 2                 extend: 'Ext.Component',

 3                 onRender: function(){

 4                     //this.callParent(arguments);

 5                     alert(arguments);

 6                 }

 7             });

 8 

 9             var c = Ext.create('My.custom.Component',{

10                     //当你调用这个方法，就等于渲染了这个类 就会执行 OnRender()方法

11                     //如果没有渲染，就不会执行

12                     renderTo: Ext.getBody(),  

13 

14                     title: 'Tests',

15                     html: 'Test component',

16             });

需要值得注意的是，许多模板方法都有自己对应的事件，例如渲染事件，是在渲染事件出发的时候执行。然而，当子泪花的时候，它必须使用模板方法在重要声明周期阶段执行类逻辑而不是事件。事件可以通过编程来停止或者暂停。

下面是一些子类可以实现的组件的模板方法：

initComponent:这个方法被类构造方法唤醒，用来初始化数据，设置属性，附加事件处理。

beforeShow:在组件显示之前被调用

onShow: 允许添加行为操作，在超类的onShow方法被调用之后就组件就可见了。

afterShow: 方法在组件被显示之后调用。

onShowComplete:这个方法在afterShow完成之后被调用

onHide:在隐藏的时候可以增加一些操作，调用超类的onHide方法之后，组件就看不见了。

afterHide:组件隐藏之后的事件处理

onRender:渲染的时候执行的事件

afterRender:渲染完成之后可以增加的额外操作。在你这个阶段，组件的元素已经根据配置或者css雷鸣增加了类型，并且将会被配置可见性和启用状态。

onEable:组件可用性，调用超类的这个事件的时候，组件就可以使用了

onDisable:组件不可用处理的时候的事件。

onAdded:当组件被增加的时候，组件被增加到容器的时候。在这个阶段，组件在父类容器的子条目集合中，当调用超类的这个方法之后，容器就是被展现，如果有引用，引用也会被设置。

onRemoved:被移除的时候的事件。这时候，组件以及从父容器之中移除了，但是还没有销毁。调用超类的这个方法之后，容器就不会被展现了。

onResize:大小变化的时候的调用事件

onPosition:位置变化的时候调用的事件

onDestroy:销毁的时候的事件

beforeDestroy:销毁之前

afterSetPosiotion:设置位置之后

afterComponentLayout:组件布局之后

beforeComponentLayout:组件布局之前

 

组件

如果需要的组件UI不需要包含其他组件，那就是，如果只是封装HTML执行某种形式的需求，那么扩展Ext.Component是合适的。

Container容器

如果组件包含其他组件，那么就选容器比较适合了。在面板级别，需要重点记忆的是，Ext.layout.container.Container不是用来被渲染和管理子组件的。

容器拥有下面这些方法：

onBeforeAdd:子组件增加的时候这个方法被调用。通过了新组件,可以用来修改组件,或准备容器。返回false中止添加操作。

onAdd:组件被增加完成的时候调用。它是通过组件已被添加。这种方法可以用于更新任何内部结构可能依赖于状态的子元素。

onRemove:它是通过组件已被添加。这种方法可以用于更新任何内部结构可能依赖于状态的子元素。

beiforeLayout:这个方法被调用之前容器已经制定了(如果需要)并呈现它的子组件。

afterLayout:调用该方法后,集装箱已经制定了(如果需要)并呈现它的子组件。

Panel面板

如果UI界面需要头信息，底部信息，工具条，那么Ext.panel.Panel就是一个合适的选择。

重要的是:一个面板是一个容器。重要的是要记住,布局是用于呈现和管理子组件。

这类扩展Ext.panel。面板通常非常特定于应用程序的,一般用于聚合其他UI组件(通常是容器,或表单字段)配置布局,并提供操作手段所包含的组件通过控制tbar bbar。

面板拥有如下的模板方法：

afterCollapse:当折叠的时候被调用

afterExpand:当展开的时候被调用

onDockedAdd:当停靠的时候调用

ondockedRemove当停靠移除的时候调用。