extjs学习（三）--ext核心组件使用

１、概述

　　Ext的组件非常多，要把所有的组件数完都比较难，更别说记住每一个组件提供的配置选项、属性、方法及事件了。学习Ext不能死记硬背，要掌握方法，注意寻找规律，Ext设计的优秀之处在于，他的组件体系层次结构是非常明确的。只要掌握了核心组件的一些核心特性，会让我们进行Ext应用开发将会获得事半功倍的效果。

2、Observable

　　实现事件驱动功能，包括事件监听，事件触发及响应等，是所有组件的父类(因为Component继承Observable)。提供了addListener(on)、removeListener(un)、fireEvent等核心的事件操作方法。简单解读ObservableAPI中每一个重要的特性。

３、Component

　　Component也就是组件，Component是所有组件的父类；Component类提供了Ext组件共有的特性，比如初始的流程、组件的配置选项应用、插件应用，组件渲染，组件公共的配置选项等。简单解读Component API中每一个重要的特性。

４、BoxComponent

　　Component是抽象的，是没有现状的，可能是一个点，也可能是一条线，甚至可能是一些没有外观的东西。

　　然而应用程序界面中的元素大多数都是有形状的，最基本的也就是盒子状，有高度，有宽度。BoxComponent组件就是用来表示这种具有高度及宽度的组件。简单解读BoxComponent的API中每一个重要的特性。

５、Container

　　容器，是指能容纳其它东西的物件。对于控件来说，也就是能容纳其它子元素的控件。比如，表单里面即可以包含表单字段，也可以包含其它的文本、图片等元素；树里面包含树节点；而窗口中可以放置表单、树及选项板等各种各样的部件。因此，表单、树、窗口等等控件，都是容器组件。容器是用得最多的一种组件之一，因此Ext专门定义了一个容器组件类，在该类中包含了与容器相关的各种各样操作，包括如何管理(添加删除、查找)容器中的子元素，容器的渲染模式等，大多数控件都是Container的子类。

　　容器最重要的特性就是能放置其它元素，容器里面的元素可以是容器，也可以是其它非容器组件；Ext容器有一个布局属性，Ext通过与容器关联的布局对象来处理容器中子元素的排列及显示信息。

　　在应用程序中可以直接使用Container类，一般更多的时候是使用他的子类，有两大类型的容器，一个是代表整个浏览器窗口的Viewport，另外一种是面板Panel。面板panel是使用得非常多的容器，很多控件都是继承自Panel。

　　Container中大概有哪些方法？组件查找、往容器中加东西、往容器中删除东西等等。简单解读Container的API中每一个重要的特性。

６、Panel

　　面板Panel是ExtJS控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。

　　默认情况下，我们使用{}定义子元素时，如果不写xtype，则默认就是面板。

　　下面我们重点来讲面板。

１、Panel面板的概述　　

面板Panel是ExtJS控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。

２、面板的5大组成部分

面板由以下几个部分组成，一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。

  面板的类名为Ext.Panel，其xtype为panel，下面的代码可以显示出面板的各个组成部分：

  

Ext.onReady(function(){
  new Ext.Panel({
  renderTo:"hello",
  title:"面板头部header",
  width:300,
  height:200,
  html:'<h1>面板主区域</h1>',
  tbar:[{text:'顶部工具栏topToolbar'}],
  bbar:[{text:'底部工具栏bottomToolbar'}],
  buttons:[{text:"按钮位于footer"}]
  });
   });

  一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：

Ext.onReady(function(){
  new Ext.Panel({
  renderTo:"hello",
  title:"hello",
  width:300,
  height:200,
  html:'<h1>Hello,easyjfopen source!</h1>',
  tbar:[{pressed:true,text:'刷新'}] 
  });
   });

３、面板的特点

面板Panel主要有下面几个特点：

  1、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包含了特定的样式信息；

  2、面板Panel继承自Container类，因此，面板是一个可视化容器组件；也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类；

  3、面板中即可包括其它元素组件，也可以包含特定html代码片段，可以在程序中动态更新面板中的内容；

  4、面板由固定的5个部分组成，除了body部份以外，其它部分都不是必须的。

４、面板中的元素

　　如果要在面板中放置Ext组件或控件元素，则可以通过面板的items属性来指定，这个属性的值可以是一个数组，表示面板中有很多子元素，也可以是一个对象，表示面板中只定义一个子元素。当面板对象创建以后，可以通过面板容器的add、insert来动态往面板中增加子元素，用remove方法来在面板动态删除子元素。

5、面板中的HTML内容

面板中的内容也可以是指定的html片段，此时可以通过配置选项中html属性来指定。比如下面的代码：

Ext.onReady(function(){

  var panel=newExt.Panel({

  title:"面板",

  width:500,

  height:300,

  html:"<h1><fontcolor='blue'>这是Ext的面板</font></h1>"

  });

  panel.render("test");

});

  当然，如果面板中的html比较复杂，比如是说是一个动态页面的内容。此时可以通过在配置选项中设置autoLoad配置选项来指定自动加载指定url中的内容作为面板中显示的内容。比如下面的代码：

  var panel=newExt.Panel({

  title:"面板",

  width:500,

  height:300,

  autoLoad:{url:"index.html"}

  });

  也可以在对象初始化以后，动态更新面板中的html内容，可以通过调用面板的load方法实现，load方法中的参数与autoLoad配置选项中所代表的一样，代码如下：

  panel.load({

   url:"index.ejf",

   params:{name:"daxia",pwd:"123"},

   scope: this,

      discardUrl: false,

      nocache: false,

      text:"正在加载，请稍候...",

      timeout: 30,

      scripts: true

  });

６、面板中html内容的动态控制

　　这时候直接通过面板的body元素来实现面板的内容的更新。比如下面的代码：

  panel.body.update("<h1><fontcolor='blue'>这是Ext的面板</font></h1>",true,function(){});

　　update的第一个参数表示要更新的html字符串，第二个参数表示是否执行字符串中的脚本，第三个参数是指当内容已经更新完成后执行的回调函数。