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();