Ext经验收集

1. Ext中常用的类

 I. Ext.data
  Ext.data封装了与数据有关的类。

 II. Ext.data.Store
  Store是数据源的封装。Ext通过Store提供了统一的接口访问不同的数据源,从数组到 ajax数据来源。这种统一的接口,让使用数据的部件更易于设计和使用。在设计使用数据的部件时,只需要关心Store提供的接口,而不需要关心底层数据的来源。数据消费部件与底层数据源的隔离,更有利于扩展新的数据类型,只需要为新的类型添加相应的解释程序即可。
  Store有两个关键的config options:
   a. proxy数据代理,Ext.data.DataProxy。这是store用于管理低层数据的部分。
   b. reader数据读取, Ext.data.DataReader。这是store读取数据的成员,它定义底层数据的结构。
  Store同时支持Inline的数据,用data config option指定。如:
   store: new Ext.data.SimpleStore({
    fields: ['text'],
    expandData: true,
    data : ['目录', '项目', '两者']
   }),

  Store有几个子类:  GroupingStore, JsonStore, SimpleStore

  重要的方法:load

 III. 数据视图类。主要有Ext.DataView,Ext.grid,Ext.form等。

  数据视图类,用可视化的界面显示或操作数据。数据视图类的数据来源是Store,通过这个统一的接口,与不同的数据源结合起来。Store中的数据发生变化时,界面上会反映出来。config option是store。

  Ext.DataView有点特殊,因为这个类没有预定的显示模式,而是需要自己指定显示模板(Ext.XTemplate类,支持简单的模板语言)。其他都差不多。

3. Viewport
  刚开始使用Ext的时候,Viewport困扰了我很长时间。帮助里找不到太多可用的资料,只能慢慢摸索。
  Viewport采用region定义各Block的显示。看Ext Api Document里的例子,里面都列出来了。刚开始的时候不明白region做什么用的。后来才逐渐明白。其中各个region,只有center是必不可少的。

4. Panel
  刚开始,看一个例子,用Panel做Header,也试着做了个,发现Panel里自己的元素下面有一个方框(border:true时),怎么也去不掉。看代码,发现自己的元素在Panel元素内部前面部分,后面有一个"bwrap"区,就是那个框。后来还是参考例子解决问题。有三个条件:
  a. panel的layout指定为:anchor
  b. 自己的元素放在panel的items里定义
  c. 自己的元素,指定xtype为box
  看例子:

   new Ext.Panel{
    border: false,
    layout:'anchor',
    region:'north',
    cls: 'twHeader',
    height:60,
    items: [{ //放到items里定义
     xtype: "box", //这里指定类型为box
     el: "twHeader", //自己的元素ID
     border: true,
     anchor: "an_twHeader"
    }]
   })

5. Ext的对象,在Render以前与以后行为是不一样的。

  今天程序里用getTopToolbar取顶部工具栏,返回的不是Ext.Toolbar对象,反复检查,都不清楚原因,很是奇怪。后来才发现,对象Render以后,getTopToolbar才是正确的,Render以前,返回值是不对的。

6.ownerCT:对象的直接父元素

7. Ext.form.FormPanel对象

 I. submit方法。FormPanel.getForm().submit()方法提前当前的表单。getForm方法返回当前FormPanel的BasicForm,调用BasicForm的submit方法提交表单。submit方法有一些参数,其中success和failure参数分别担定成功和失败时的执行函数。submit方法对返回的数据格式有一定的要求。如果没有指定form的errorReader, Ext就会认为你返回的是一段JSon表达式,会通过Ext.decode去执行它。对这个返回的要求是:要有success数据项,指明调用是否成功。只有一切正常并且success为true时,submit里指定的success函数才会触发,否则是failure被触发。有一个例外,就是当返回是空白时,success函数也会触发。

8.ComboBox

  name属性存放显示变量名称,其中存放选中行的显示值,一般是代码的含义
  hiddenName属性存放值变量名称,其中存放选中行的内部值,一般是对应的代码
  displayField:ComboBox所用store中,用于显示的field名称,对应name
  valueField:ComboBox所用store中,存放代码值field名称,对应hiddenName
  


posted @ 2008-05-23 20:59 meetrice 阅读(...) 评论(...) 编辑 收藏