学习EXTJS6（10）面向对象的基础框架-2【统一的组件模型】很重要

用到ExtJS，UNIGUI是以ExtJS为基础的框架。因此掌握基础组件模型太重要了。确实就是让自己知道其所以然。

Ext中所有可视组件都继承自Ext.Component。

1、Ext.Component

最基本的几项功能：

　　【初始化】：initComponent()；

　　【渲染】render()；

　　【显示】show();

　　【隐藏】hide();

作为基类，Ext.Cpmponent本身不包含任何格式，通往认为指定html内容参数传入。看代码：

var box = new Ext.Component（{
     el: 'test'  ,
     style: 'background-color:red;position:absolute;',
     pageX: 100,
     PageY:50,
     width: 200,
     height: 150
}
）;
box.render();

2、Ext.Panel

这是Ext中经常用到的组件。继承自Ext.Container。注意：无需继承直接使用。看代码：

var pamcel = new Ext.Panel({
  el: 'test',
  title: '测试标题',
  floating: true,
  shadow: true,
  draggable: true,
  collapsible: true,
  html: '测试内容',
  pageX: 100,
  pageY:50,
  width: 200,
  height: 150
});
panel.render();

 

 关于EL的内容解释：很重要。

这个是你要将你的组件渲染到哪个div
比如有个<div id = grid_test></div>
组件里el:grid_test,
就是把这个组件放到上面那个div里 

3、Ext.Container

来自于Ext.Component。

有二个重要参数：

layout：布局

item：组件（包括子组件）

其中用的比较多而且中的是xType。这个很重要，自己查看明细，要高明白。