一、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
items : [
{
.....
}
]
button:[{
text : "buttonText"
handler : function(){
}
},{
.....
},{
.....
}]
2、获取表单数据与清空
获取:
formPanel.getForm().getValues();
清空:
formPanel.getForm().resert();