ExtJs自学教程(1)：从一切API开始

转载

mob604756eccc76 2015-06-11 13:11:00

文章标签 html javascript 父类对象创建子类 文章分类 代码人生

如图你能够看到ExtJs的包。原始定义文件(build的src里相应的那个文件) 。相关类，继承的子类，父类以及一颗直观的继承树。

然后接下来的区域“panel is..”是该类的说明，该区域非常重要，通常类的该区域可能给了该类的使用演示样例以及须要注意的地方。

接下来是配置，属性，方法和事件4部分。从上面图片能够看到，具体信息顶部给了到这4部分的链接："Properties" "Methods" "Events" "Config Options"。

滚动鼠标便能够依次浏览该4部分：

你能够看到内容分3列：

第一列是一个小三角箭头。能够折叠和展开该參数说明。

第二列是參数说明，假设说明区域还有内容未显示完，内容末尾会显示成“...”。

如上图animCollapse 的部分，点第一列的箭头能够展开。activeItem參数那行就是展开后的效果。

展开后显示该參数的说明。注意Config Options里有非常多參数都是有default属性的。也就是说。在new的时候的參数Objects不传入该參数。该參数默认就是使用default的值，这样能够大大降低了使用时构造參数的数量。比如new一个panel，除了指定渲染的对象外，能够仅配置html的属性。比如：new Ext.Panel({renderTo:'panelDiv',html:'内容'});

有一点特别要注意，就是传入config对象时，千万不要多了或漏了逗号。IE的对象定义格式要求非常严格。对象最后一个成员不能以逗号结尾。否则JS加载时就出错了。比如：new Ext.Panel({renderTo:'panelDiv',html:'内容',}); 在FireFox3下能够通过，可是在IE6下会导致一个无法编译的错误。

第三列是定义类。因为javascript也是OO的语法，因此子类也继承了父类的属性和方法。前面带有一个向上箭头的是继承的属性或方法，通常假设看某个类的特有功能（比如Panel类的折叠collapse相关的方法），就须要找Difined By为当前类的说明行，这样就非常方便。

对于Config Options的使用，另一个比較方便的地方，就是当指定Config Options的xtype后，在ExtJs生成容器的子对象时。能够不用去new一个对象，而仅仅须要传入配置对象，在对象里指定xtype就可以。

有些容器的items有默认xtype，比如Ext.Panel的items传入配置对象默认的xtype就是'panel'，Ext.Panel的buttons传入的配置对象默认的xtype就是button。

比如，下面3种写法是等效的：

new Ext.Panel({
  renderTo: 'panelDiv',
  items:[{
    html: '内容1'
  },{
    html: '内容2'
  }],
  buttons:[{
    text: '測试button'
  }]
});

你也能够写成
new Ext.Panel({
  renderTo: 'panelDiv',
  items:[{
    xtype: 'panel',
    html: '内容1'
  },{
    xtype: 'panel',
    html: '内容2'
  }],
  buttons:[{
    xtype: 'button',
    text: '測试button'
  }]
});

或者用new的方式
new Ext.Panel({
  renderTo: 'panelDiv',
  items:[
    new Ext.Panel({
      html: '内容1'
    }),
    new Ext.Panel({
      html: '内容2'
    })
  ],
  buttons: [new Ext.Button({
    text: '測试button'
  })]
});