ExtJs4.0的组件

控件：能在页面上观看到，并且能进行操作的可视化组件
四大组件： 容器类组件、工具栏和菜单栏组件、表单和元素组件、其他组件
容器类组件：toolbar、panel、form、menu、window等
工具栏和菜单栏组件：menuitem（菜单项）、tebseparator（工具栏分隔符）等。
表单和元素组件：checkboxfield（复选框）、combo（下拉框）、dotefield（日期选择项）等。
其他组件：包括图标、视图、编辑、按钮组件，如chart、button。

组件的创建：
通过new: var ProgressBar = new Ext.ProgressBar({…})
（推荐） 通过create: var ProgressBar = new Ext.create(’ Ext.ProgressBar’,{…})

ExtJS组件的配置说明（两种形式）
1.常见的逗号分隔参数列表 Ext.Msg.alert(‘提示’,’逗号分隔列表’);
2.利用JSON对象为组件提供配置
var config={title:’case1’,msg:’This is mine.’};
Ext.Msg.alert(config)

Ext.window.MessageBox
继承Ext.window.Window对象，用于生产各种信息提示对话框，
通过Ext.MessageBox或Ext.Msg访问
与js区别，js是直接弹出对话框和纯文本，
ext是在当前页显示一层（div），并支持HTML格式文本
如：Ext.Msg.alert(“提示,’HTML格式‘”);
js会对程序造成阻塞，ext是异步的
Ext.Msg.alert() 、 config() 、prompt()、wait()、show()

Ext.onReady()      在Document对象加载完之后，在html的onload和image加载之前调用      是extjs的入口点

---

Panel组件（容器）

---

   分为5部分：             底部工具栏（bottom toolbars）、顶部工具栏、面包头部（header）、面板底部（footer）、面板体。     var myPanel = Ext.create('Ext.panel.Panel',{            title:'myPanel',            collapsible:true,            width:500,            height:100,            html:'第一个panel',            tbar:[            {text:'新建'}],            bbar:bottomBar,            //buttons:[{            //text:'面板底部'}],            renderTo:Ext.getBody()            });    var topBar = Ext.create('Ext.toolbar.Toolbar',{            width:500,            items:[{            xtype:'button',            text:'新建'},'-',{            xtype:'button',            text:'保存'},'-',{            xtype:'button',            text:'取消'            }]         });        var bottomBar= Ext.create('Ext.toolbar.Toolbar',{            width:500,            items:[{            xtype:'button',            text:'上一步',            icon:'./ext/resources/themes/images/icon/left.gif'            },{            xtype:'button',            text:'下一步',            icon:'./ext/resources/themes/images/icon/right.gif'                             },{            xtype:'button',            text:'退出',            icon:'./ext/resources/themes/images/icon/out.gif'            }]         });

renderTo
将目标元素作为新组件的容器，所以要求目标元素必须可以直接作为容器使用。

items
MixedCollection类型的对象，所有容器都有items配置选项，是放在容器中的组件集合

Formpanel表单面板

 本质上是Ext.panel.Panel（表单项的容器）    ，内置并自动创建Ext.form.Basic基本表单组件

var simple = Ext.create(‘Ext.form.Panel’,{
//url:’save-form.php’,
frame:ture,//是否渲染表单
title:’Simple Form’,
bodyStyle:’padding:5px 5px 0’,//表单边距：有一个是四周，两个是上下，左右；三个是上、左右、下；四个上右下左
width:350,
height:130,
defaultType:’textfield’,//设置表单字段的默认类型
defaults:{//统一默认属性
msgTarget:’side’,
labelWidth:75,
anchor:’100%’,
//msgTarge:’qtip’,悬浮提示title显示悬浮提示信息、under是在字段下发提示信息；side右边；none是指定位置
labelAlign:’left’//标签对其方式
},
items:[{
fieldLabel:’First Name’,
name:’first’,
allowBlank:false
},{
fieldLabel:’Last Name’,
name:’last’,
inputType:’password’
},{
xtype:’spinnertfield’,
name:’company’,
fieldLabel:’Conpany’,
},{
fieldLabel:’Email’,
name:’email’,
vtype:’email’//验证类型名字
}]
})；
simple.render(document.body);

tabPanel 页签组件
Ext.tab.Panel 每个tab页只有一个
Ext.panel.Panel 可以多个，但只能有一个是活跃状态

treePanel 树形面板
继承Ext.panel.Table面板.节点有三种：根节点（唯一）、叶子节点、非叶子节点

Window窗口；
Ext.Window

数据模型 Ext.data.Model

四个重要的组成部分：Fields-字段定义；Proxy-数据代理；Associations-模型关联；Validations-数据校验

Ext.regModel({'User',{Fields:[{name:'name',type:'string'},{name:'age',type:'int'}]});Var user = Ext.ModelMgr.create({name:'tom',Age:24},'user');alert(user.get('name'))

GridPanel 网格面板组件

他的column有  Ext.grid.column.Boolean  布尔                            Number                            Date                            Action 动作列                            Template 模板列                RowNumberer 行号列                Column树结构列

renderer 单元格渲染函数

value
metadata
record 当前数据对象
rowIndex 行索引
collndex 列索引
store 包含表格所有数据的数据集对象
view 表格视图
Selection 选择模式

表格分页 Ext.toolbar.Paging