ExtJS组件之Panel

 

1、Panel的使用面并不广,实际上他的子类用的更加频繁,如Tree、Tab、Form、Grid等都是非常重要的子类。更确切地说,面板更应该是一个容器,在面板中,我们可以设置任何组件和文字,而面板本身也可以放到其他面板中。

2、一个标准的面板组件包括如下5部分:底部工具栏(bottom toolbars)、顶部工具栏(top toolbars)、面板头部(header)、面板底部(footer)和面板体。

3、renderTo

  将目标元素作为新组件的容器,所以要求目标元素必须可以直接作为容器使用。在HTML元素中并不是所有元素都可以直接追加操作或直接成为其他元素的容器。

  将组件放入Div、table、tr、td时,div和td能正常运行,说明table、tr无法直接作为容器使用。(对于其他HTML元素那些可以直接追加元素,哪些可以直接成为容器不是我们研究的重点,这里只需要理解renderTo的执行原理)

4、items

  这是一个MixedCollection类型的对象,所有容器都有items配置选项,该选项就是我们要放到容器中的组件集合。

5、formPanel表单面板组件

  本质上是一个标准的Ext.panel.Panel,是表单项的容器,它内置并自动创建Ext.form.Basic基本表单组件,用来管理表单项(字段管理、数据验证、表单提交、数据加载等功能)。

6、formPanel表单面板支持的主要表单组件

  Ext.form.field.Checkbox  复选框   checkboxfield
  Ext.form.CheckboxGroup 复选框组 checkboxgroup
  Ext.form.field..ComboBox   下拉列表框  combo
  Ext.form.field.Date 日期选择框 datefield
  Ext.form.field.Display  文本展示组件 displayfield
  Ext.form.FieldContainer 字段容器 fieldcontainer
  Ext.form.FieldSet 字段集  fieldset
  Ext.form.field.Hidden 隐藏域  hiddenfield
  Ext.form.field.HtmlEditor  HTML文本编辑器 htmleditor
  Ext.form.Label 标签字段 label
  Ext.form.field.Number 数字输入框  numberfield
  Ext.form.field.Radio 单选框 radio
  Ext.form.RadioGroup  单选框组 radiogroup
  Ext.form.field.Spinner 微调组件 spinnerfield
  Ext.form.field.TextArea 多行文本框 textareafield
  Ext.form.field.Text 单行文本框 textfield
  Ext.form.field.Time 时间选择框 timefield
  Ext.form.field.Trigger 触发按钮文本框 triggerfield
  Ext.form.field.File 文件上传字段 filefield
7、tabPanel
  Ext.tab.Panel页签组件的每个tab页都是一个Ext.panel.Panel,一般情况下会有多个tab同时存在,但是同一时刻只有一个处于活动状态。
8、treePanel树形面板
  树控件由Ext.tree.Panel类定义,继承自Ext.panel.Table面板(与grid具有相同的父类)。
  树是由一个一个节点组成的,树有唯一的根节点。树的节点分成三种:根节点、叶子节点和非叶子节点。
9、window窗口
  Window需要通过调用show方法才能显示出来
  title的位置可以变化(参照example中的window示例)

你可能感兴趣的:(ExtJs)