ExtJS学习日记1 grid和form
2014-08-26 15:16
351 查看
一、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();
相关文章推荐
- Ext学习日记 grid使用
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- EXTJS学习系列提高篇:第二十八篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--分页显示
- ExtJS学习笔记(1)-表单验证,Ext.FormPanel
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)
- 10-9学习日记(map标签),FormView控件,ISAPI_REWRITE
- EXTJS学习系列提高篇:第二十六篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--静态绑定
- EXTJS学习系列提高篇:第二十五篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--右键菜单篇
- ExtJS学习笔记(5)- Form表单的提交 -Ext.FormPanel
- ExtJs学习笔记(17)_Form布局
- EXTJS学习系列提高篇:第十八篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--编辑修改篇
- EXTJS学习系列提高篇:第十七篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--添加记录篇
- EXTJS学习系列提高篇:第二十七篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--动态绑定
- EXTJS学习系列提高篇:第二十二篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--选择数据篇
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- EXTJS学习系列提高篇:第十六篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--显示列表篇
- EXTJS学习系列提高篇:第二十篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--批量删除篇
- 【ExtJs学习系列】开始使用Grid(四)
- 学习ExtJS(十) form布局