作者：心语心鱼
ExtJs Base:
------------------------------------------------------------------------------
1. get 、 fly、 getCmp 、getBody 、getDoc 、getDom、、
get-----ExtJs获取节点、dom、提供缓存机制 Ext.Element类是Ext对DOM的封装 get是Ext.Element.get的简写
fly-----
getCmp----用来获得一个Ext组件，已经在页面中初始化了的Component或其子类的对象，getCmp方法其实是Ext.ComponentMgr.get方法的简写
...
2. Ext.extend 继承
LoginWindow=Ext.extend(Ext.Window,{
initComponent : function(){
LoginWindow.superclass.initComponent.call(this);
}
});
LoginForm=Ext.extend(Ext.form.FormPanel,{
constructor:function(_cfg){
if(_cfg==null){ _cfg={}; }
Ext.apply(this, _cfg);
LoginForm.superclass.constructor.call(this, { .... });
});
3.ExtJs事件模型
Ext.util.Observable 事件抽象基类
Ext.EventObject 处理按键
Ext.EventManager
Ext.lib.Event
4.Panel面板 mixed混合型
1..tools[ { },{}.... ] 标题栏添加按钮
2..面板 显示/隐藏 show() / hide()
3..面板的拖拽---------------------------------
draggable: {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getX();
this.y = pel.getY();
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
},
5..tabPanel 标签面板
1...动态创建 标签面板
2...关闭标签面板
var tab = tabPanel.getComponent(o);
tabPanel.remove(tab);
if(p.closable) closeTab(p);
3..标签面板 注册右键菜单
6...Ext.Window
modal:true,最好配置下 shadow:true ，解决 窗口 跟 阴影 同步变化
-------------------------------------
7..Ext.grid 表格
高级store：
simpleStore = Store + MemoryProxy + ArrayReader
JsonStore = Store + HttpProxy + JsonReader
Ext.data.GroupingStore对数据进行分组
ColumnModel([{},{}...]) 是一个数组
header 显示文本
dataIndex 记录集字段
sortable 排序
renderer 列渲染方法
width 宽
format 格式化
修改某一行样式：grid.getView().addRowClass(r, css) 或 grid.getView().getRow(r).style.backgroundColor='red'
修改某一行的单元格样式：grid.getView().getCell(r,c).addRowClass(css)
获得某一行数据：store.getAt(1)
刷新:grid.view.refresh()
获取某一行字段：grid.getStore().getAt(i).get('username')
1...grid列宽问题：
如果GridPanel 配置viewConfig: {forceFit:true}, 则 ColumnModel按照 width比例分配宽度
var cm = new Ext.grid.ColumnModel([{ header:'编号', dataIndex:'id' ,width:3}]);
var grid = new Ext.grid.GridPanel({ viewConfig: {forceFit:true}});
可以指定 每列的宽度数值，若同时指定了viewConfig {forceFit:true} 则指定的数值无效，grid会根据这些数值计算出比例，对各列分配宽度。
autoExpandColumn 只能指定一列的 id ，则该列渲染时会自动延伸，撑起表格、
2...grid 列时间处理
推荐返回 java 的 getTime 整数 ，在 js renderer : 用 Date 格式出字符串
3...grid 单元格格式化
指定列元数据的 renderer 函数 ，返回 带格式的 html
4...grid 行设定颜色
指定 viewConfig.getRowClass 返回相应的的行css
5.自动显示行号
列元数据的第一个数据填充 new Ext.grid.RowNumber() ,会自动计数 ,计数中断后，可以用 gridView.refresh()重新计数。
6...grid 后台排序
设置 store.remoteSort = true ,会向后台提交两个参数 sort , dir
7...editorgrid
store.modified 所有修改过的记录 ,commit() 会去除 单元绿色标记
8...groupgrid
groupstore 关键要设置 groupField
9.表格右键实现要点
监控 contextmenu 事件，自己构造 menu组件 ，弹出在鼠标位置
10...formpanel layout
只能是 form ，不能改 ,formpanel 只负责布局 ，核心部分由 form成员 处理
11...anchor
用来指定 输入组件 和 formpanel 的相对宽度 高度。
12...submit
默认 ajax 提交 ，传统方式 要 获得 dom节点 ，调用 传统submit()
13...使用后台校验
关键是 设置 返回 json sucess:false ,errors:{输入组件名：该组件的错误}
14...嵌入其他html
可以设置 xtype:'panel',html: 随便
15...comboBox hiddenName
真正value存放的位置，涉及提交，建议设置
getValue 返回真正value
getRawValue 返回显示的text
16...comboBox triggerAction
防止重新选择 显示不全 ，建议设成 'all'
17...comboBox radio
区别主要在于 radio 多个要设同一个 name
18...树的后台生成数据
设 treeloader 的同时 要设置 AsyncTreeNode ,后台会收到 当前树节点的 id
19...expand
root.expand() 只会扩展一层 expand(true) 则全部扩展了
20...节点的默认图片
icon : 图片地址 优先级高
iconCls :图片css
21...节点提示信息
设置 qtip
22...节点的界面修改部分
用tree.ui 来修改 ，mvc分层了
8...Ext.grid.GroupingGrid
var store = new Ext.data.GroupingStore({
autoLoad : true,
groupField:'department',
sortInfo:{field:'id',direction:'ASC'},
proxy: new Ext.data.MemoryProxy(datas),
reader: new Ext.data.ArrayReader({idIndex: 0},[ {name:'id'}]
});
grid = new Ext.grid.GridPanel({ view : new Ext.grid.GroupingView(),... });
======================
= extjs 常用布局
======================
1.. FitLayout
-------------
FitLayout：自动适应布局,只能使用一个子组件,无法胜任复杂布局；
注意：子组件 使用autoHeight会使Fitlayout失效
1..BorderLayout
----------------
边框布局：分5个区域-东 西 南 北中，中是不能省略的;
在某一区域添加split:true,左右,上下拖放，而中不会变化;
collapsible:true激活折叠功能
问题：如何在 西区域 的标题栏 添加额外的功能呢？在折叠位置再添加一些按钮？
--------------------------------------------------
使用 extjs 模板创建 dom：
var bd = Ext.getDom('checkCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild([{tag:'span',html:' '},{tag: 'img',id:'randImage',onclick:'loadimage()', src: '/demos/WindowDemo/image.jsp',align:'absbottom'}]);
-----------------
checkbox
boxLabel :String ==The text that appears beside the checkbox
inputValue : String
////////////////////////////////////////////////////
//applyTo是直接使用指定元素来生成组件
//renderTo是在指定容器内部生成组件（该元素被用作容器）
//Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = 'side';
//qtip 当鼠标移动到控件上面时显示提示
//title 在浏览器的标题显示，但是测试结果是和qtip一样的
//under 在控件的底下显示错误提示
//side 在控件右边显示一个错误图标，鼠标指向图标时显示错误提示
// [element id] 错误提示显示在指定id的HTML元件中
//表单验证extjs默认几种
alpha 只输入英文字母
alphanum 只能输入字母 和 数字
email 电子邮件
url 网址
-----------------------------
{
id:'userName',
name : 'userName',
fieldLabel : '帐号',
vtype:"email", //email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息
blankText : '帐号不能为空'
}
------------------------------
minValue 和 maxValue 输入数字范围
allowDecimals 不能输入小数点
allowNegative 不能输入负数
=====
regex:/^d$/,//正则表达式 这里假设只允许输入数字 如果输入的不是数字 就会出现下面定义的提示信息
regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息
validateOnBlur:true,//默认是true,失去焦点时验证
validationDelay:300,//默认是250,验证延迟时间,毫秒数
validationEvent:"click",//验证事件 默认是keyup 可以是String/Boolean
//自定义的验证函数 当输入的数据不符合正则表达式的要求时，就会执行这个函数
validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},
=====
# newExt.form.NumberField({
# style:'direction:rtl'//这样就可以让输入框的光标定位在右边了.这就是你要的效果:)
# });
//正则表达式验证在EXTJS中的应用
regex:/^[a-zA-Z0-9_u4e00-u9fa5]+$/,
regexText:'格式应由汉字、数字、字母或下划线组成.'
文本框
maxLength: 5,//验证最大输入字符数
maxLengthText:"长度不多于5个字符!",
//minLength: 2, //验证最小输入字符数
// minLengthText:"评论人长度不少于2个字符!",
-------------------------------
使用正则表达式验证
regex :/[u4e00-u9fa5]/, //正则表达式 [u4e00-u9fa5] : 只能输入中文
高级自定义密码验证：
//先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
//val指这里的文本框值，field指这个文本框组件
//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
password:function(val,field){
if(field.confirmTo){
//取得confirmTo的那个id的值
var pwd=Ext.get(field.confirmTo);
return (val==pwd.getValue());
}
return true;
}
});
------------
items:[{
fieldLabel:"密码",
id:"pass1",
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致！",
confirmTo:"pass1",//要比较的另外一个的组件的id
}
-------------------------------------------------------------------
draggable:true,是否允许拖动
constrain:true,限制窗口的整体
constrainHeader:true, 窗口的顶部不能超越浏览器边界
plain:true, //渲染窗口的背景颜色
resizable:false, //鼠标是否可以任意拖动窗口的大小
border:true, //窗口内的边框
minimizable:true, //是否有最小化按钮
maximizable:true, //是否有max 按钮
loadMask:"正在加载......",
closable:true, //是否有close 按钮
closeAction:'close', //点击关闭 触法closeAction hide:是将window隐藏，
"close"，关闭window就将它从内存中撤销
Ext.window的closeAction有两种选择close/hide（完全关闭/隐藏）
close就是把此window destroy (默认)如果使用默认，点击关闭窗口就把窗口对象销毁
这样就不能使用show()
closeAction:'hide'
5．如果需要定义控件有两种方法（以gridPanel为例子）
A：newExt.grid.GridPanel({
})
B:{
xtype:’gridpanel’,
}
使用new 的方式是立即创建组件 而使用xtype则是延迟创建这样的好处是当需要渲染此组件时才创建
类似hibernate的延迟加载都是为了提高效率！
6．在JS中把JSON字符串转为对象，Ext.decode ( )
在JS中把对象转为JSON字符串，Ext.encode ( )
7．可以在容器组件中把hideLabels设置为true，这样将不会显示容器中字段的标签了
8.年龄随着出生日期改变
{
xtype:"datefield",
format:"Y-m-d", //格式化日期，默认：'m/d/Y'
value:"1981-10-15",
readOnly:true, //设为只读
fieldLabel:"出生日期",
listeners:{
"blur":function(_df){ //监听失去焦点事件，年龄随着出生日期改变
var _age = _df.ownerCt.findByType("textfield")[1];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1);
}
}
}
-----------------------------------------------
第一种handler：
//document.body == Ext.getBody().dom
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),//属性renderTo：将当前对象所生成的HTML对象存放到指定的对象中
text:"确 定",
handler:function(){ //函数handler：指定一个函数句柄，默认触发click事件
Ext.Msg.alert("提示","欢迎学习ExtJS。");
// alert("欢迎学习ExtJS。");
}
});
});
第二种listeners：
Ext.onReady(function(){
new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定",
listeners:{ //函数listeners：在对象初始化之前就将一系列事件进行定义
"click":function(){
Ext.Msg.alert("提示","欢迎学习ExtJS。");
}
}
});
});
第三种on：
Ext.onReady(function(){
var _btn = new Ext.Button({
renderTo:Ext.getBody(),
text:"确 定"
});
_btn.on("click",function(){
Ext.Msg.alert("提示","欢迎学习ExtJS。");
});
});
====================================================
《》从gridpanel中获取一行数据填充到表单中
grid.on('click',function(){
var selections =grid.getSelectionModel().getSelections();
for(var i = 0;i <selections.length ; i++){
var record = selections[i];
formPanel.getForm().loadRecord(record);
winP.show();
}}
});
