extjs学习（二）

最新推荐文章于 2024-10-18 18:45:21 发布

zjt1388

最新推荐文章于 2024-10-18 18:45:21 发布

阅读量511

点赞数

分类专栏： extjs 文章标签： javascript extjs

extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件

1、组件概念

　　所谓组件，简单来说，就是指可以复用的应用程序组成部件。

Ext最大特点，就是拥有一个庞大、功能齐全、结构及层次分明的组件体系，并在组件的基础上进一步封装出各种实用的控件。我们在开发的时候，只需要直接使用这些组件及控件，就可以创建出丰富多彩的应用程序界面。比如说窗口、树、表格、选项板、工具栏、菜单等都是可以直接复用的组件及控件。

　　Ext组件是由Component其及子类定义，每一种组件都有一个指定的xtype属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。我们学习及使用Ext，其实也就是学习Ext组件/控件的各种功能及使用方法。

　　组件的基本使用:组件定义，组件初始化，组件渲染(显示)。

2、组件XType

　　Ext中，每一个组件都有一个类来定义，比如说按钮组件的类是Ext.Button类，窗口控件的类是Ext.Window，树控件的类是Ext.tree.TreePanel。除了可以通过类名来标识某一种组件以外，Ext还提出了一个xtype的概念，我们可以理解为组件类名的缩写，比如说Ext.tree.TreePanel类对应的类缩写名称为treepanel。当一个组件创建了以后，我们可以通过组件的getXType()方法来得到这个组件的xtype值，还可以通过getXTypes()方法来得到这个组件所属的所有类名，比如：component/box/field/textfield。

　　xtype的主要作用是通过在配置选项中指定xtype方的组件使用法，来实现组件的延迟初始化。

　　xtype只能用于定义子元素。顶级元素必须使用new 类名来明确初始化。

3、组件配置选项

　　配置选项是Ext组件非常重要的特性，在大多数Ext组件中，都支持在构造函数中传递一个对象作为参数，在这个对象中包含组件的详细描述信息，比如多高、多宽、有多少子元素等等，Ext就是根据这些参数来创建组件对象的。

　　配置选项在组件初始化的时候使用。

4、组件属性

　　属性就是指组件对象的一些内在特性，从面向对象的角度来说，属性就是用来描述对象的具体状态的。

　　一个对象最基本的成员就是属性与方法。当我们创建并初始化了一个组件以后，他在内存里面就表现为一个对象，这个对象也就具有了自己特定的属性信息。

　　我们可以在程序中直接访问这些属性来得到这个组件对象的特定信息。

　　属性从是否可以改变其值这一点来看，可以分为只读属性以及可读写的属性两种。由于可以通过方法（也就是动作）来直接改变对象的状态信息，因此，Ext组件中的大多数属性都是只读的，在API中通过Read-only来进行标注，这一点一定要注意。

　　由于是动态语言，因此即使是只读属性，你仍然可以使用panel.hidden=true这样的语句来改变他的值，但是却达不到把组件隐藏的效果，而且会造成组件工作的不正常，因此我们不能随便改写标注为只读属性的值。比如，我们要隐藏一个组件对象，应该通过panel.hide()方法来进行。

在查看API的时候，每一个组件都有PublicProperties这一节，这里面就会列出了这个组件所具有各种公开属性。

5、组件的方法

　　组件的另外一个重要特性：方法，也就是对象的动作。大部分的类都有自己的的方法，方法主要用来改变或读取组件的状态，让组件执行指定的动作等。我们在使用Ext的时候，经常需要进行控件的交互，动态改变组件的相关信息，这时就需要调用组件的相关方法。

　　组件的方法在API方法中的PublicMethod一节只进行了详细的介绍。

　　在编写Ext应用的过程中，我们经常需要查询API，看看这个组件有哪些方法，需要传递什么样的参数，返回什么样的结果，返回结果的类型等等。因此，大家对API一定要熟悉才行。

6、另外，组件还定义了一系列的事件，可以通过监听这些事件来实现交互程序开发。Ext组件的事件在API的events中说明。

　　事件及事件处理其实就是当用户执行某一个操作，或者是对象进入某一个状态时，会给哪些关心这个动作及状态的对象发送一个通知，那些对象（监听者）接受到通知后，会作具体的响应。比如说，当用户移动或点击一下鼠标、者按下键盘，或者是当某一个组件隐藏时，或者某一个动作执行之前或执行完后等，都可以产生事件通知，对这个通知感兴趣的程序(事件监听器)会执行，并作相应的处理。

传统DOM事件编程例子：

<script>
  function a(e){
         alert('something'+e.getX());
  }
 </script>
 <input type="button" value="alert框" id="btnAlert"οnclick="a();">

　　　用代码来定义上面的事件

<script>
  function a(e){
  alert('something'+e.getX());
  }
  window.οnlοad=function(){
  document.getElementById("btnAlert").οnclick=a;
  }
  </script>
  <inputtype="button" value="alert框" id="btnAlert">

　　　传统事件对象：

　　　事件源,事件目标,监听器

　　　IE中的Event处理!

Ext对DOM事件的扩展：

　　对于Ext这种用于处理用户UI的框架来说，事件的处理及响应就显得更加的重要了，那些ExtJS提供了一套强大的事件处理机制，通过这些事件处理机制来响应用户的动作、监控控件状态变化、更新控件视图信息、与服务器进行交互等等。

　　对于Ext来说，他在传统事件的基础上提供了更多丰富多彩的事件处理机制，我们可以使用他的事件处理机制，通过事件响应及处理，编写出交互性非常灵活的Web应用程序。

　　Ext的事件支持体现在两个方面，首先是对浏览器默认事件进行了进一步的扩展及封装，比如在Event对象的基础上提供了一个EventObject，提供了全局的事件管理器，灵活多变的事件响应方法，比如说在事件发生后几秒才响应事件，或者事件队列等功能。

使用Ext的事件处理机制，前面的事件处理可以变成如下的形式：

 <script>
  function a(e{
  alert('something'+e.getX())
  }
  Ext.onReady(function(){ 
  Ext.get("btnAlert").addListener("click",a);
   });
  </script>
  <inputtype="button" value="alert框" id="btnAlert">

　　在调用addListener方法的代码中，第一个参数表示事件名称，第二个参数表示事件处理器或事件响应函数。ExtJS支持事件队列，可以往对象的某一个事件中添加多个事件响应函数，比如下面的代码：

　　Ext.onReady(function(){

Ext.get("btnAlert").on("click",a);

});

　　由于调用了两次addListener或on方法，因此当点击按钮的时候会弹出两次信息。

　　当然，ExtJS还支持事件延迟处理或事件处理缓存等功能，比如下面的代码：

　　Ext.onReady(function(){

Ext.get("btnAlert").on("click",a,this,{delay:2000});

});

　　由于在调用addListener的时候传递指定的delay为2000，因此当用户点击按钮的时候，不会马上执行事件响应函数，而是在2000毫秒(也就是两秒)后才会弹出提示信息框。

　　另外，Ext对事件响应还提供了更多其它的特性支持，主要包括下面这些内容：

　　监听器缓冲，可以实现在指定的缓冲时间周期内，事件响应函数只执行一次，代码如下：

el.on('click',this.onClick, this, {buffer: 100});

　　还可以使用options选项来指定事件的响应及处理机制，比如是否阻止事件的进一步传播或响应等。

el.on('click', this.onClick, this, {preventDefault:true});

// only stop propagation

el.on('click', this.onClick, this, {stopPropagation:true});

// prevent default and stop propagation

el.on('click', this.onClick, this, {stopEvent: true});

当然，还可以包含其它的选项，比如下面的代码：

el.on('click', this.onClick, this, {

single: true,// 在事件响应函数触发后自动删除监听器

delegate:'li.some-class' //自动事件代理 Automatic event delegation!

});

还可以在options参数中包括自定义的参数信息，比如下面的代码：

function onClick(ev, target, options){
  alert(options.someProperty); // alerts 'someValue'
}
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty:'someValue'});

可以一次性给某一个元素添加多个事件响应函数，比如下面的代码给元素添加了click、mouseover及mouseout等事件的事件响应函数。

el.on({
    'click' :{
      fn: this.onClick,
  scope: this,
  delay: 100
    },
   'mouseover' : {
      fn: this.onMouseOver,
  scope: this
    },
   'mouseout' : {
      fn: this.onMouseOut,
        scope:this
    }
});

Ext组件的事件：

　　Ext的中有一个Ext.util.Observable类，他提供了对象的事件观察监听及消息通知、事件触发等一系列的事件及响应相关功能，而Ext组件的基类Component就是继承自这个类。因此，Ext为其组件提供了非常丰富的事件模型，比如组件生命周期变化、组件某一状态改变等，都提供了特定的事件支持。

　　比如说，所以有的组件都有一个render事件，而这个事件是在组件渲染完以后会触发，这时我们就可以通过监听这个事件来实现在组件渲染后执行特定的操作。看下面的代码：

functionshowHtml(p){
  alert(p.el.dom.innerHTML);
}
varpanel=new Ext.Panel({title:"面板",width:500,height:300});
panel.addListener("render",showHtml);
panel.render("test")

　　那么一旦panel渲染(调用了render方法)以后，就会马上执行showHtml这个方法，并把panel对象作为参数传递给showHtml方法，因此我们可以看到这个panel的HTML代码片段。当然，如果Panel没有渲染，比如我们不调用render方法，则不会执行showHtml中的内容。

　　有一些事件的响应函数会返回特定值，Ext或根据这个响应函数的返回来判断是否执行相应的操作。比如说所有组件都有一个beforehide事件，这个事件是在组件变成隐藏之前触发，如果事件响应函数返回了一个false的值，那么他就会停止执行隐藏组件这个动作。

　　比如说来看下面的代码：

functionconfirmHide(){
  return confirm("是否真要隐藏这个组件"); 
}
varpanel=new Ext.Panel({title:"面板",width:500,height:300});
panel.on("beforehide",confirmHide);
panel.render("test");
panel.hide();

　　那么这个当调用panel.hide()这个方法时候，他就会隐藏这个组件，但是由于前面注册了一个beforehide事件，因此他就会在隐藏组件之前先调用confirmHide方法，这个方法通过一个confirm函数来让用户选择是否隐藏，如果我们们选择“是“则会返回true,那么这个组件就被隐藏，如果选择“否”则返回false，那么hide方法就会停止执行隐藏的操作。

　　那么一个组件究竟支持哪些事件，这些事件在触发时会给响应函数传递什么样的参数，以及事件响应函数是否会对组件的下一步操作产生影响，这就需要我们通过组件的API中的Events部分来了解具体的信息了。