ExtJS学习日记1 grid和form

一、grid基本格式与常用配置：

grid由一个数据仓库Store和一个容器Panel组成。

1、Store类似于一个本地仓库(数据存储器)，包括有ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore。

  Store由Proxy（数据源）和DataReader（解读数据）组成。

ArrayStore:用于方便的从一个数组的数据来创建Ext.data.Store,ArrayStore将
自动配置一个Ext.data.reader.Array；
       ?    DiectStore: 方便的从Ext.data.proxy.Direct和Ext.data.reader.Json创建Ext.data.Store。
用于与Ext.direct.Manager 的服务端Provider

交互更容易。
创建一个不同的proxy/reader的组合 根据需要配置一个基本的Ext.data.Store；

GroupingStore:继承自Ext.data.Store,
使用方法和Ext.data.Store一致，为Store增加了分组功能，唯一要注意的是使用GroupingStore时必须

指定sortInfo信息；

JsonStore:方便从JSON数据创建Ext.data.Store。
JsonStore将自动配置一个Ext.data.reader.Json.

XmlStore:方便从xml数据创建Ext.data.Store。
JsonStore将自动配置一个Ext.data.reader.xml.

2、Panel是一个容器,具有特定的功能和结构组件，使它使能够完美地为面向应用的用户界面创建部件。可以设置自身

的layout布局，并且可以包含子组件。

常用设置：width、height宽高

title标题头

renderTo将组件加在指定元素内

applyTo将组件加到指定元素以后

store数据源

viewConfig组件配置

plugins插件

selType选择模型，默认为“rowmodel”(点击选定行)，可设置“cellmodel”(最小单元格选定)

columns配置
。常用的有：flex、sortable、hideable等
field : 'textfield'
点击可编辑，使用时必须加入插件:plugins: [Ext.create('Ext.grid.plugin.CellEditing',
{clicksToEdit: 1})]点击后该单元格为焦点
tbar组件顶部工具栏handler（点击相应方法）

二、表单form

1、布局：
表单布局分2种：column && form。form是纵向布局，column为横向布局，默认为column。
结构：
{
layout : 'column',
items : [{},{},{}]
}

items : [

{
              xtype
: "textfield",
              fieldLabel
: "Name",
              width
: 120
           }，{

.....

}

]

button:[{

text : "buttonText"

handler : function(){

}

},{

.....

},{

.....

}]

2、获取表单数据与清空

获取：

formPanel.getForm().getValues();
清空：
formPanel.getForm().resert();