extjs4 笔记
关于手册导航中图标的说明:
蓝色-普通类
紫红-单例类
黑色-组件类
--还有一种是包
viewport一个应用只能有一个,否则EXT会抽风...
Component 要可拖动,需要设置position:abrolute
application 作为一个应用的开始文件
定义一个类的时候使用singleton 将得到该类的实例,并与静态方式使用该实例 如 Ext.Message.Alert();
应用中用到的模型,视图,需要在controller中注册才能使用,包括application中要使用都需要在controller中注册
配置自定义后才能用set跟get方法获取,
当别名为widget.开始的为全局试图别名,可以直接使用
mixins方法是在CLASS上的,所以几乎所有的EXT对象都具有相互混合的能力(就是一个对象的方法给另一个对象使用) ,且混合时使用的key好象没啥作用的
在运行application 之前创建一个对象,ext都会根据对象名去尝试加载它,所以在application中运行前定义定义类之后运行是不行的(指同个文件中)
model是数据规格
store是数据集
model store 都可以接受数据代理proxy
store有data,当有data的时候代理将被忽略,data将用于自动创建内存代理,store的代理或data得到的数据将用于model列表的创建
除model外其他
内存代理一般开启自动加载,而其他代理一般最后手动调用,
field 是字段对象,附属于model与存在,但store也有该属性,但strore的该字段是用于自动创建model用的,所以field也是用于model的
从上图可以看出model与store的关系.两者之间可以说通过代理类来链接
而代理分为读写代理,store就是拿porxy来得到数据,并组装一堆model出来
当model也有代理.是用于获取一个数据的, 或对一个数据进行操作的,因为model有save,load等方法
Ext.grid.Panel
分页的每页数量在store的pageSize控制
对于数据的加载解析
在proxy里配置,即Ext.data.reader.Reader
totalProperty 总数的key
successProperty 成功的字符串
root 数据的key
application 的配置
在application中,launch是请求并初始化完控制器后运行的函数,这里通常是对试图渲染输出,但也可以通过设置
autoCreateViewport为true来自动去请求view/Viewport.js来完成视图的输出,当你使用大于4.05版本的Extjs的时候,不在需要手动设置requires了
controller的作用为请求必要的model,store,view等,并在control中对试图进行动作监听等.在controller初始化的时候也可以做些准备操作
如果在control外还需要些事件监听,可以使用this.application.on()来增加
如果你希望在controller在运行后处理东东,你可以使用onLaunch来处理,
对于controller的控制为,先对版面进行区分划分,然后对每个区块建立一个controller
对于panel中的dockedItems,需要明确指出工具条的类型,如果想简化,需要使用tbar,tbar...等
元素查找:
1.组件跟元素都有up,down分别对应向上跟向下查找元素,支持CSS规则
2.对于全局查找,则可以用Ext.fly Ext.get Ext.getCmp
及支持CSS规则查找的Ext.query (此方法加第二个参数跟1一样)及用于组件的Ext.ComponentQuery.query();
3.视图创建,new 或 Ext.create 都可以创建,但如果alias被命名为widget.xxx后,可以使用Ext.widget('xx')获得,但是用widget的前提还必须是视图已经被引入,且可以直接使用在全局的xtype上在Ext4.05之后,在controller中添加依赖之后会自动加载,所以在controller中添加依赖后可以直接使用.默认系统组件的alias的名称为widget.xtype,所以系统组件都可以使用widget取出.当声明为别名为widget. 时要防止相互覆盖,且后面声明的会覆盖前声明的,例如声明一个组件的alias为widget.panel,将导致{xtype:"panel"}这样写法生成出来的都是你定义的那个组件,因为xtype使用的是全局组件.但Ext.create('Ext.panel.Panel') 不受影响
动态操作组件
先来段代码:
var sl = Ext.widget('window', {
width : 300,
height : 200
});
var t = new Ext.Template([ '<div name="{id}">',
'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
'</div>', ]);
t.compile();
sl.show();
t.append(sl.body, {
id : 'myid',
cls : 'myclass',
name : 'foo',
value : 'bar'
});
一个已经存在的window中增加一个渲染好的模板字符(不明白为什么文档里没有说有body属性)
如果添加组件就更简单了,直接使用add把创建的组件添加进去即可
删除:组件有个remove,元素也有个remove,其他参照文档,component的removieall是删除所有的组件.不包括元素
错误:
1.namespace is undefined
出现这个错一般是有xtype(声明为全局组件的组件) 没找到报的错误
2.使用application的时候如果声明的视图或其他的extjs类的文件错误,extjs不会报错,即加载完毕之后没啥反应.此时可以检查定义的类名与app定义的名字是否一直
即: application的name 跟定义的类名是否一致 如 name:"UP" 定义类名需要为UP.view.pritem
让panel可拖动,配置为:
draggable:{
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
}
工具条:
工具条包下的 Fill Item Separator Spacer TextItem 都为辅助工具条格式的组件
工具条可以添加其他组件,比如button,pannel等,当然button最为常用
button有menu属性,用于添加菜单,对于菜单,ColorPicker,DatePicker跟Menu为同一级
Menu有CheckItem,Item(默认),Separator 菜单可用,而CheckItem可以这group来变为单选
菜单使用Ext.menu.MenuMgr 统一管理 ,对于菜单显示,如果不是绑定到一个工具条上,可以使用组件类上的showAt()方法来显示,接受getXY返回值作为参数
关于布局
Ext.create('Ext.panel.Panel',{
layout:'fit',//或{type:'vbox',align:'center'}
title:'this is title'
})
layout 参数可以为:
fit 单个视图
border 边框,中间那个视图必须
anchor 横向布局
absolut 绝对定位布局 继承与anchor
from 表单布局 (表单默认布局方式)
column 竖向布局 Ext.grid.Panel 用到
对于以上的横向跟竖向布局的不足,可以使用以下代替
hbox 横向布局 vbox 竖向布局 使用最好指明对其方式 示例:{type:'vbox',align:'center'}
关于表单验证
对于表单验证,每个field有个vtype属性,默认系统支持的email alpha url alphanum
自定义验证的方法如下
Ext.form.field.VTypes.emailText="据说你的邮箱是错误的...";//重新定义错误信息
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
time: function(val, field) {
return timeTest.test(val);
},
// vtype Text property: The error text to display when the validation function returns false
timeText: '顶个肺啊,错了~".',
// vtype Mask property: The keystroke filter mask
timeMask: /[\d\s:amp]/i
});
定义好了之后就可以使用了,上述定义中的vtype是time 需要在使用前定义好vtype,如果vtype没有定义直接使用会报错的..可以直接定义在使用的前面
除了vtype验证,field本身就带了好几种验证且每个对应的消息体均可自定义(有点麻烦…)
示例:
{
xtype : 'datefield',
fieldLabel : '选择时间',
name : 'aaa',
allowBlank : false,//验证
blankText:"此字段必填",//验证消息
}
其他的翻阅下手册….
关于表单使用
使用都很简单,formPanel里取得表单有getForm()方法
有个表单组件涉及到store,官方示例如下
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',//类似于load 有local remote 用于获取远端的数据时候用到
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
关于事件监听
基本上所有的类都有实现Observable,所以很多类有有listeners 属性 具体的事件每个类各有不同
listeners:{
render:function(){
alert("ddd");
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
},
因为在create的时候panel的initComponent 方法是不能使用的,所以想在初始化的时候操作些东西监听事件是不错替代方案
在controller中也有个control 方法,示例如下
init: function() {
this.control({
'viewport .userlist': {
itemdblclick: this.onPanelRendered
},
'viewport .slider':{
changecomplete:this.mytest
}
});
},
store中如果存在data,且定义为ajax或其他, autoLoad 将失效
使用application时,当store的storeId会被覆盖为该store名,所以定义无效.
extend: 'Ext.data.Store',
model:'Index.model.User',
storeId:'simpsonsStore',//该定义无效,覆盖为User
***
});
