1.自定义消息框：show()方法：
Ext.MessageBox.show(Object config)
config中常见属性如下：
title:消息框标题栏
msg:消息内容
width:消息框的宽度
multiline：是否显示多行文本
colsable：是否显示关闭按钮
buttons:按钮
icon：图标
fn:回调函数
举例说明：
extjsCustom = function(){
var config = {
title："自定义对话框",
msg："这是一个自定义对话框",
width：400，
multiline:true,
closable:false,
buttons：Ext.MessageBox.YESNOCANCEL,
icon：Ext.MessageBox.QUESTION,
fn：function(btn,txt){
Ext.MessageBox.alert("结果"，"您点击了'yes'按钮<br>,输入的值是："+txt);
}
}；
Ext.MessageBox.show(config)；
}
<input type="button" value="Custom" οnclick="extjsCustom();"><br>
buttons(按钮)的取值如下：
OK：只有“确定”按钮
CANCEL:只有“取消”按钮
OKCANCEL"有“确定”和“取消”按钮
YESNO:有“是”和“否”按钮
YESNOCANCEL:有"是"和“否”和“取消”按钮
icons（图标）取值如下：
INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标
2 进度条对话框：
进度条对话框也是一个自定义消息框，配置config时添加progress=true 即可，同时还可以设置其他相关信息，如进度提示。
代码示范：
extjsPregess=function(){
Ext.MessageBox.show({
title：'请等待',
msg：'正在加载项目……',
progressText:'正在初始化……',
width：300,
progress:true,//此属性证明是一个进度条
colsable：false
})
var f = function(v){
return function(){
if(v==12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有项目加载完成！');
}else{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成')
}
}
}
for(var i=1;i<13;i++){
setTimeout(f(i),i*500);
}
}
var f = function(v){
return function(){
if(v==12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有项目加载完成！');
}else{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成')
}
}
}
<input type="button" value="Custom" οnclick="extjsCustom();"><br>
3.消息框飞出
extjsAnimal =function(){
var config = {
title:"飞出的消息框",
msg:"这是一个自定义消息框，是飞出来的。",
width：400,
multiline：true,
closable:false,
buttons：Ext.MessageBox.YESNOCANCEL,
icon：Ext.MessageBox.QUESTION,
animEl:"fly"
};
Ext.MessageBox.show(xconfig);
}
animEl的值是“fly”.这是按钮的id值，在html页面中这样定义：
<input type="button" value="Animal" id="fly" οnclick="extjsAnimal();"><br>。
二,Ext.onReady事件
示范代码如下：
Ext.onReady(function(){});
示范代码如下：
<input type="button" value="点击我" id="btn">
js文件中我们这样定义如下代码：
Ext.onReady(function(){
Ext.get("btn").on("cilck",function(){
Ext.MessageBox.alert("点击","我被点击，很高兴");
});
});
说明：
Ext.get(Mixed el)：根据Html标签的id属性获取Ext.Element对象。
on(String eventName ,Function fn):为Ext.Element对象定义一个事件，eventName是事件名称，fn为事件处理函数。
三：
html:
<body>
<input type="text" id="name">
<input type="button" id="btn" value="问候">
</body>
js：
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
var name=Ext.get("name").dom.value：
Ext.Msg.alert("您好","你好,"+name+“，请接受来自ExtjS的问候”);
});
})
Ext.Element.dom:dom属性是Ext.Element对象的Dom表示，获取dom之后，可以用传统方式访问。
四：Ext.Fx类
1.slideIn([String anchor],[Object options]);
功能：滑入效果，做动画显示。
参数：
anchor:推出的方向，
值：tl:左上角 ;t 顶部中央 ;tr 右上角 ;l左边中央; r 右边中央 ; bl 左下角 ; b 底部中央 ; br 右下角
options:选项配置，duration属性，用于定义动画持续的时间,可选。
示例：在10秒中内将DIv从右边中央滑入
html：
<div id="al">slideIn</div>
js：
Ext.onReady(function(){
Ext.get("al").applyStyles({positon:"absolute",top:200,left:200,
backgroundColor:"red",width:100,height:100}).slideIn("r",{duration:10});
})
注意：***********
applyStyles是Ext.Element的方法，用于定义指定元素的样式。
2.siideOut([String anchor],[Object options] ):滑出效果，作动画隐藏用。参数和用法同上。以下是该方法的默认配置：
slideOut('t',{
easing:"easeOut",
duration:.5,
remove:false,
useDisplay:false
}
);
3.highlight([String color],[Object options]):根据设置的颜色高亮显示Element对象，然后渐隐为原始颜色。默认显示的背景颜色是黄色。
参数：
color：起始颜色
options:选项配置，
Ext.get("a2").appleStyle({
position:"absolute",
top:200,
left:300,
backgroundColor:"red",
width:100,
height:100}).highlight("000000"//起始颜色
{
attr:'background-color',//我们改变的是背景颜色
duration:2,//动画持续时间
endColor:"ff0000"//结束颜色
}
)
*******
endColor的颜色只能是16进制表示的颜色。
4.frame([String color],[Number count],[Object options]):展示一个展开的波纹，伴随着渐隐的边框以突出Element对象。
默认情况下展示的是一个淡蓝色的波纹。
参数：
color:波纹颜色
count:波纹的个数
options：选项配置
示例：
Ext.get("a3").applyStyle({
position:"absolute",
top:200,
left:400,
backgroundColor:"red",
width:100,
height:100}).frame("ff0000",3,{duration:3});
5.fadeIn([Object options])：将元素从透明渐变为不透明。结束时的透明度可以根据“endOpacity”选项来指定。
示例：
Ext.get("a4").applyStyle({
position:"absolute",
top:200,
left:500,
backgroundColor:"red",
width:100,
height:100}).fadeIn({
endOpacity:1,//可以是0-1之间的任意值
duration：4
});
6.fadeOut([Object options]):将元素从不透明渐变成透明。结束时的透明度可以根据“endOpacity”选项指定。
示例：
Ext.get("a5").applyStyle({
position:"absolute",
top:200,
left:500,
backgroundColor:"red",
width:100,
height:100}).fadeOUt({
endOpacity:0,//可是是0-1之间的任意值
duration:4,
remove:false,
useDisplay:fasle
});
7.scale(Number width,Number height,[object options]):以动画展示元素从开始的高度宽度转换到结束的高度、宽度
参数：width:结束宽度,如果为undefined则保持原始宽度
height:结束高度，如果为undefined为保持原始高度
示例：
Ext.get("a6").applyStyle({
position:"absolute",
top:200,
left:700,
backgroundColor:"red",
width:10,
height:10}).scale(100,100,{duration:2});
8:shift(Object options)：以动画展示元素任意组合属性的改变，如元素的尺寸，位置坐标和（或）透明度。
如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生变化。为了使该特效生效，则必须在配置选项中设置至少一个新
尺寸，位置坐标或透明度属性。
Ext.get("a7").applyStyle({
position:"absolute",
top:200,
left:800,
backgroundColor:"red",
width:10,
height:10}).shift({
width:100,//动画终止后的宽度
height:100,//动画终止后的高度
x:0,//动画终止后的x坐标
y:0,//动画终止后的y坐标
opacity:.5,//动画终止后的透明度
duration:5//动画持续时间
});
9.ghost([String anchor],[Object options])：将元素从视图滑出并伴随着渐隐。
作为可选参数传入的定位锚点将被设置为滑出特效的结束点。
示例：
Ext.get("a8").applyStyle({
position:"absolute",
top"200,
left:900,
backgroundColor:"red",
width:100,
height:100}).ghost('b',{
easing:'easeOut',
duration：.5，
remove:false,
useDisplay:false
})
五.Ext.Element类中的动画函数
1.setWidth(NUmber width,Boolean/Object animate):设置元素宽度
参数：
width:新宽度
animate：是否以动画方式设置新的宽度，为true时有动画效果。也可以配置动画参数。
示例
Ext.onReady(function(){
Ext.get("el").applyStyles({
opsition:"absolute",
left:300,
top:500,
width:200,
height:200,
backgroundColor:"red"
}).setWdith(500,true);
})
<div id="el">setWidth</div>
2.setHeight(Number height,Boolean/Object animate):设置高度
3.setSize(Number width,Number height,Boolean/Object animate):同时设置元素的宽度和高度，并设置是否以动画形式展示。
示例：
Ext.get("e2").applyStyle({
position:"absolute",
left:100,
top:100,
width:100,
height：100,
backgroundColor:"red"
}).setSize(500,500,true)
4.setBounds(Number x,Number y，Number width,Number height,Boolean/Object animate):设置元素的位置和大小
参数：
x:新的左上角的x坐标
y:新的左上角的y坐标
width:新的宽度
height：新的高度
animate:是否以动画显示，或者配置动画参数
示例：
Ext.get("e3").applyStyle({
position:"absolute",
left:100,
top:100,
width:100,
height:100,
backgroundColor:"red"
}).setBounds(0,0,500,500,true);
5,show(Boolean/Object animate): 显示元素
6.hide(Boolean/Object animate): 隐藏元素
二：Ext.DomHelper类
1、insertHtml(String where ,HTMLElement el,String html):在指定的元素上插入HTML片段。
参数：
where:插入位置：可选值有：beforeBegin,afterBegin,beforeEnd,afterEnd
el：参照元素
html:插入的内容
示例：在页面上定义如下div：<div id="e">这是一个层</div>
Ext.DomHelper.insertHtml("afterBegin",Ext.get("e").dom,<div>中华人民共和国</div>)
在页面上生成的结果如下：
<div id="e">
<div>中华人民共和国</div>
这是一个层
</div>
**********
通过修改第一个参数的值，可以总结出四个可选项的含义：
baforeBegin:插入到起始标签之前
afterBegin:插入到起始标签之后
beforeEnd:插入到结束标签之前
afterEnd:插入到结束标签之后
2.
insertBefore(*/,Object/String o):新节点插入到指定节点之前
insertAfter(*/,Object/String o):新节点插入到指定节点之后
insertFirst(*/,Object/String o)；新建节点并插入到指定节点作为第一个节点
append(*/,Object/String o):新建节点并插入到指定节点作为最后一个子节点
overwrite(*/,Object/String o):代替指定节点内容
参数
*/:指定节点，类型可以为String/HTMLElement/Element
o:新节点，可以是dom对象或裸HTML标记
示例
<div id="parent">
<div id="c1">第1个孩子</div>
<div id="c2">第2个孩子</div>
<div id="c3">第3个孩子</div>
<div id="c4">第4个孩子</div>
<div id="c5">第5个孩子</div>
</div>
js:
//在c2之前插入div
Ext.DomHelper.insertBefore("c2","<div>c2-child-2</div>");
//在c2之后插入div
Ext.DomHelper.insertAfter("c2",{tag:"div",html:"c2-child"}");
//将一个新节点作为parent的第一个子节点
Ext.DomHelper.insertFrist("parent","<div> parent-first-child</div>");
//将c3的内容更新
Ext.DomHelper.overwrite("c3","there are new contents");
//将一个新节点作为parent的最后一个子节点
Ext.DomHelper.append("parent",{tag:"div",htmnl:"parent-last-child"});
结果：
<div id="parent">
<div>parent-first-child</div>
<div id="c1">第1个孩子</div>
<div>c2-child-2</div>
<div id="c2">第2个孩子</div>
<div> c2-child</div>
<div id="c3">there are new contents</div>
<div id="c4">第4个孩子</div>
<div id="c5">第5个孩子</div>
<div>parent-last-child</div>
</div>
二：Ext.util.Format类
1.ellipsis(String value,Number length):String
对大于指定长度部分的字符串，进行裁剪，增加省略号（“……”）的显示
参数：
value：要裁剪的字符窜
length：允许长度
返回：
String 转换后的文本
示例
var v1="对大于指定长度部分的字符串，进行裁剪，增加省略号（"...”）的显示"，
Ext.Msg.alert("ellipsis",Ext.util.Format.ellipsis(v1,10));
结果：
对大于指定长度。。。
2。undef(Mixed value):MIxed
检查一个值是否为undefined,若是的话转换成空值
参数项：
value:Mixed:要检查的值
返回：
Mixed 转换成功为空白字符串，否则为原来的值
3.defaultValue(Mixed value ,String defaultValue):String
检查一个值(引用的)是否为空，若是则转换到缺省值。
参数项：
value:Mixed :要检查的引用值
defaultValue:String :默认赋予的值（默认为“”）
返回：
String
示例：
var v3
Ext.Msg.alert("defalutValue",Ext.util.Format.defaultValue(v3,"这是缺省值"));
4.htmlEncode(String value):String
转义（&,<,>,and'）为能在HTML中显示的字符
参数项：
value:String :要编码的字符串
返回：
String :编码后的文本
5.htmlDecode(String value):String
将（&,<,>,and'）字符从HTML显示的格式还原
6.trim(String value):Stirng
裁剪一段文本的前后多余的空格
参数项：
value:Stirng 要裁剪的文本
返回：
String :裁剪后的文本
7.sunstr(String value,Number start,Number length):Stirng
返回一个从指定位置开始的指定长度的子字符串。
参数项：
value:Stirng 原始文本
start：Number：所需的子字符串的起始位置
length：Number：在返回的子字符串中用包含的字符个数
8.lowercase(String value):String
返回一个字符串，改字符串中的字母被转换成小写字母
9.uppercase(String value):Stirng
返回一个字符串,该字符串中的字母被转换成大写字母
10，capitalize(String value ):String
返回一个字符串该字符串中的第一个字母转换成大写字母，剩余的为小写。
11.date(Mixed value ,[String format]):Function
将某个值解析成为一个特定格式的日期
参数项：
value：Mixed:要格式化的值
format:String ：任意有效的日期字符窜（默认为“月/日/年”）
12。stripTags（Mixed value ）:Stirng
剥去所有的HTML标签
参数项：value：Mixed:要剥去的文本
示例：
var v8="<a href="Http://www.z-jb.com">株洲北大青鸟</a>"；
Ext.Msg.alert("stripTags",Ext.util.Format.stripTags(v8));
结果：
株洲北大青鸟
13.stripScripts(Mixed value ):String
剥去所有教本的（String）标签
14.fileSize（Number /Stirng size）：String
对文件呢大小进行的简单的格式化（xx bytes,xxx KB,xxx MB）
示例：
var v9=2349327423;
Ext.Mag.alert("fileSzie",Ext.util.Format.fileSize(v9));
结果：
2240.5MB
Format 会根据字节的大小自动选择单位。
三，再谈Xtemplate
Xtemplate用于定义一个模板，并将值提供给{}占位符，XTemplate也能和Ext.util.Formant配合，将填充的值进行格式化。
示例：Ext.onReady(function(){
var xt= new Ext.XTemplate(
"<table border={b} width={w}>",
"<tr>",
'<td>{v1：date("Y年m月d日H时i分s秒")}</td>',
"<td>{v2:lowercase}</td>",
"<td>{v3:ellipsis(5)}</td>",
"</tr>",
"</table>"
);
xt.append("xt",{b:1,w:300,v1:new Date(),v2:"CELL2",v3:"这是一段非常长的字符串"});
xt.compile();
})
从上面代码中看出:v1为日期类型；v2为大写字母，编号才能小写字母输出;v3是一段较长的字符串，只显示一部分，剩余的用“...”来代替。
另外，强调一点：输出日期时；如果使用“<td>{v1:date('Y年m月d日H时i分s秒')}</td>”(即双引号在外，单引号在内)会产生错误。
Ext组件分类：
基础组件：工具栏组件：表单组件：
基础组件：
box :具有边框属性的组件：
button:按钮：
colorpalette:调色板：
component:组件;
container:容器：
cycle:圆角按钮；
dataview:数据显示视图
datepicker:日期选择面板
editor :编辑器
editorgrid:可编辑的表格
grid:不可编辑的表格：
paging:分页组件
panel：面板
progress:进度条
splitButton:可分裂的按钮
tabpanel:选项面板
treepanel:树
viewport:视图
window：窗口
工具栏组件：
toolbar：工具栏
tbbutton:按钮：
tbfill: 文件
tbitem:工具条项目
tbseparator:工具栏分隔符
tbspacer:工具栏空白
tbsplit：工具栏分隔按钮
tbtext:工具栏文本项：
表单组件：
form: Form表单
checkbox:复选框
combo:下拉列表框
datefield:日期选择器
field:表单字段
fieldset:字段分组
hidden：隐藏表单域
htmleditor:在线Html编辑器
numberfield:数字编辑器
radio：单选按钮
textarea:区域文本框
数据与ComboBox
二：Ext.data.DataProxy类
实际应用中使用的是Ext.data.DataProxy的子类“：MemoryProxy ,HttpProxy 和ScriptTagProxy
他们的作用分别是：
MemoryProxy:获取来自内存的数据，可以是数组,json,xml ***************
HttpProxy:使用HTTP协议通过ajax从远程服务器获取数据的代理，需要制定url.
ScriptTagProxy:功能和HttpProxy一样，但支持跨域获取数据
下拉列表框：
ComboBox类,是一个表单域组件，常用于表单中。
var combobox = new Ext.form.ComboBox({
renderTo:Ext.getBody(),
triggerAction:"all",
store:store,
displayField:"cname",
valueField:"cid",
mode:"local",
emptyText:"请选择湖南城市 "
})；
triggerAction:是否开启自动查询的功能，为all表示不开启，为query表示开启，默认是query;
store:定义数据源
displayField:关联Record的某一个逻辑列名作为显示值，
valueField:关联Record的某一个逻辑列名作为实际值，
mode:可选值有local和remote,如果数据来自本地，用local,如果数据来自远程服务器，必须用remote,默认是remote;
emptyText:没有选择任何选项的情况下文本框中的默认文字。
得到下拉框列表的值；
ComboBox定义了两个方法：getValue()用于返回实际值，getRawValue()用于返回显示值。
Ext.MessageBox.show(Object config)
config中常见属性如下：
title:消息框标题栏
msg:消息内容
width:消息框的宽度
multiline：是否显示多行文本
colsable：是否显示关闭按钮
buttons:按钮
icon：图标
fn:回调函数
举例说明：
extjsCustom = function(){
var config = {
title："自定义对话框",
msg："这是一个自定义对话框",
width：400，
multiline:true,
closable:false,
buttons：Ext.MessageBox.YESNOCANCEL,
icon：Ext.MessageBox.QUESTION,
fn：function(btn,txt){
Ext.MessageBox.alert("结果"，"您点击了'yes'按钮<br>,输入的值是："+txt);
}
}；
Ext.MessageBox.show(config)；
}
<input type="button" value="Custom" οnclick="extjsCustom();"><br>
buttons(按钮)的取值如下：
OK：只有“确定”按钮
CANCEL:只有“取消”按钮
OKCANCEL"有“确定”和“取消”按钮
YESNO:有“是”和“否”按钮
YESNOCANCEL:有"是"和“否”和“取消”按钮
icons（图标）取值如下：
INFO:信息图标
WARNING:警告图标
QUESTION:询问图标
ERROR:错误图标
2 进度条对话框：
进度条对话框也是一个自定义消息框，配置config时添加progress=true 即可，同时还可以设置其他相关信息，如进度提示。
代码示范：
extjsPregess=function(){
Ext.MessageBox.show({
title：'请等待',
msg：'正在加载项目……',
progressText:'正在初始化……',
width：300,
progress:true,//此属性证明是一个进度条
colsable：false
})
var f = function(v){
return function(){
if(v==12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有项目加载完成！');
}else{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成')
}
}
}
for(var i=1;i<13;i++){
setTimeout(f(i),i*500);
}
}
var f = function(v){
return function(){
if(v==12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有项目加载完成！');
}else{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成')
}
}
}
<input type="button" value="Custom" οnclick="extjsCustom();"><br>
3.消息框飞出
extjsAnimal =function(){
var config = {
title:"飞出的消息框",
msg:"这是一个自定义消息框，是飞出来的。",
width：400,
multiline：true,
closable:false,
buttons：Ext.MessageBox.YESNOCANCEL,
icon：Ext.MessageBox.QUESTION,
animEl:"fly"
};
Ext.MessageBox.show(xconfig);
}
animEl的值是“fly”.这是按钮的id值，在html页面中这样定义：
<input type="button" value="Animal" id="fly" οnclick="extjsAnimal();"><br>。
二,Ext.onReady事件
示范代码如下：
Ext.onReady(function(){});
示范代码如下：
<input type="button" value="点击我" id="btn">
js文件中我们这样定义如下代码：
Ext.onReady(function(){
Ext.get("btn").on("cilck",function(){
Ext.MessageBox.alert("点击","我被点击，很高兴");
});
});
说明：
Ext.get(Mixed el)：根据Html标签的id属性获取Ext.Element对象。
on(String eventName ,Function fn):为Ext.Element对象定义一个事件，eventName是事件名称，fn为事件处理函数。
三：
html:
<body>
<input type="text" id="name">
<input type="button" id="btn" value="问候">
</body>
js：
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
var name=Ext.get("name").dom.value：
Ext.Msg.alert("您好","你好,"+name+“，请接受来自ExtjS的问候”);
});
})
Ext.Element.dom:dom属性是Ext.Element对象的Dom表示，获取dom之后，可以用传统方式访问。
四：Ext.Fx类
1.slideIn([String anchor],[Object options]);
功能：滑入效果，做动画显示。
参数：
anchor:推出的方向，
值：tl:左上角 ;t 顶部中央 ;tr 右上角 ;l左边中央; r 右边中央 ; bl 左下角 ; b 底部中央 ; br 右下角
options:选项配置，duration属性，用于定义动画持续的时间,可选。
示例：在10秒中内将DIv从右边中央滑入
html：
<div id="al">slideIn</div>
js：
Ext.onReady(function(){
Ext.get("al").applyStyles({positon:"absolute",top:200,left:200,
backgroundColor:"red",width:100,height:100}).slideIn("r",{duration:10});
})
注意：***********
applyStyles是Ext.Element的方法，用于定义指定元素的样式。
2.siideOut([String anchor],[Object options] ):滑出效果，作动画隐藏用。参数和用法同上。以下是该方法的默认配置：
slideOut('t',{
easing:"easeOut",
duration:.5,
remove:false,
useDisplay:false
}
);
3.highlight([String color],[Object options]):根据设置的颜色高亮显示Element对象，然后渐隐为原始颜色。默认显示的背景颜色是黄色。
参数：
color：起始颜色
options:选项配置，
Ext.get("a2").appleStyle({
position:"absolute",
top:200,
left:300,
backgroundColor:"red",
width:100,
height:100}).highlight("000000"//起始颜色
{
attr:'background-color',//我们改变的是背景颜色
duration:2,//动画持续时间
endColor:"ff0000"//结束颜色
}
)
*******
endColor的颜色只能是16进制表示的颜色。
4.frame([String color],[Number count],[Object options]):展示一个展开的波纹，伴随着渐隐的边框以突出Element对象。
默认情况下展示的是一个淡蓝色的波纹。
参数：
color:波纹颜色
count:波纹的个数
options：选项配置
示例：
Ext.get("a3").applyStyle({
position:"absolute",
top:200,
left:400,
backgroundColor:"red",
width:100,
height:100}).frame("ff0000",3,{duration:3});
5.fadeIn([Object options])：将元素从透明渐变为不透明。结束时的透明度可以根据“endOpacity”选项来指定。
示例：
Ext.get("a4").applyStyle({
position:"absolute",
top:200,
left:500,
backgroundColor:"red",
width:100,
height:100}).fadeIn({
endOpacity:1,//可以是0-1之间的任意值
duration：4
});
6.fadeOut([Object options]):将元素从不透明渐变成透明。结束时的透明度可以根据“endOpacity”选项指定。
示例：
Ext.get("a5").applyStyle({
position:"absolute",
top:200,
left:500,
backgroundColor:"red",
width:100,
height:100}).fadeOUt({
endOpacity:0,//可是是0-1之间的任意值
duration:4,
remove:false,
useDisplay:fasle
});
7.scale(Number width,Number height,[object options]):以动画展示元素从开始的高度宽度转换到结束的高度、宽度
参数：width:结束宽度,如果为undefined则保持原始宽度
height:结束高度，如果为undefined为保持原始高度
示例：
Ext.get("a6").applyStyle({
position:"absolute",
top:200,
left:700,
backgroundColor:"red",
width:10,
height:10}).scale(100,100,{duration:2});
8:shift(Object options)：以动画展示元素任意组合属性的改变，如元素的尺寸，位置坐标和（或）透明度。
如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生变化。为了使该特效生效，则必须在配置选项中设置至少一个新
尺寸，位置坐标或透明度属性。
Ext.get("a7").applyStyle({
position:"absolute",
top:200,
left:800,
backgroundColor:"red",
width:10,
height:10}).shift({
width:100,//动画终止后的宽度
height:100,//动画终止后的高度
x:0,//动画终止后的x坐标
y:0,//动画终止后的y坐标
opacity:.5,//动画终止后的透明度
duration:5//动画持续时间
});
9.ghost([String anchor],[Object options])：将元素从视图滑出并伴随着渐隐。
作为可选参数传入的定位锚点将被设置为滑出特效的结束点。
示例：
Ext.get("a8").applyStyle({
position:"absolute",
top"200,
left:900,
backgroundColor:"red",
width:100,
height:100}).ghost('b',{
easing:'easeOut',
duration：.5，
remove:false,
useDisplay:false
})
五.Ext.Element类中的动画函数
1.setWidth(NUmber width,Boolean/Object animate):设置元素宽度
参数：
width:新宽度
animate：是否以动画方式设置新的宽度，为true时有动画效果。也可以配置动画参数。
示例
Ext.onReady(function(){
Ext.get("el").applyStyles({
opsition:"absolute",
left:300,
top:500,
width:200,
height:200,
backgroundColor:"red"
}).setWdith(500,true);
})
<div id="el">setWidth</div>
2.setHeight(Number height,Boolean/Object animate):设置高度
3.setSize(Number width,Number height,Boolean/Object animate):同时设置元素的宽度和高度，并设置是否以动画形式展示。
示例：
Ext.get("e2").applyStyle({
position:"absolute",
left:100,
top:100,
width:100,
height：100,
backgroundColor:"red"
}).setSize(500,500,true)
4.setBounds(Number x,Number y，Number width,Number height,Boolean/Object animate):设置元素的位置和大小
参数：
x:新的左上角的x坐标
y:新的左上角的y坐标
width:新的宽度
height：新的高度
animate:是否以动画显示，或者配置动画参数
示例：
Ext.get("e3").applyStyle({
position:"absolute",
left:100,
top:100,
width:100,
height:100,
backgroundColor:"red"
}).setBounds(0,0,500,500,true);
5,show(Boolean/Object animate): 显示元素
6.hide(Boolean/Object animate): 隐藏元素
二：Ext.DomHelper类
1、insertHtml(String where ,HTMLElement el,String html):在指定的元素上插入HTML片段。
参数：
where:插入位置：可选值有：beforeBegin,afterBegin,beforeEnd,afterEnd
el：参照元素
html:插入的内容
示例：在页面上定义如下div：<div id="e">这是一个层</div>
Ext.DomHelper.insertHtml("afterBegin",Ext.get("e").dom,<div>中华人民共和国</div>)
在页面上生成的结果如下：
<div id="e">
<div>中华人民共和国</div>
这是一个层
</div>
**********
通过修改第一个参数的值，可以总结出四个可选项的含义：
baforeBegin:插入到起始标签之前
afterBegin:插入到起始标签之后
beforeEnd:插入到结束标签之前
afterEnd:插入到结束标签之后
2.
insertBefore(*/,Object/String o):新节点插入到指定节点之前
insertAfter(*/,Object/String o):新节点插入到指定节点之后
insertFirst(*/,Object/String o)；新建节点并插入到指定节点作为第一个节点
append(*/,Object/String o):新建节点并插入到指定节点作为最后一个子节点
overwrite(*/,Object/String o):代替指定节点内容
参数
*/:指定节点，类型可以为String/HTMLElement/Element
o:新节点，可以是dom对象或裸HTML标记
示例
<div id="parent">
<div id="c1">第1个孩子</div>
<div id="c2">第2个孩子</div>
<div id="c3">第3个孩子</div>
<div id="c4">第4个孩子</div>
<div id="c5">第5个孩子</div>
</div>
js:
//在c2之前插入div
Ext.DomHelper.insertBefore("c2","<div>c2-child-2</div>");
//在c2之后插入div
Ext.DomHelper.insertAfter("c2",{tag:"div",html:"c2-child"}");
//将一个新节点作为parent的第一个子节点
Ext.DomHelper.insertFrist("parent","<div> parent-first-child</div>");
//将c3的内容更新
Ext.DomHelper.overwrite("c3","there are new contents");
//将一个新节点作为parent的最后一个子节点
Ext.DomHelper.append("parent",{tag:"div",htmnl:"parent-last-child"});
结果：
<div id="parent">
<div>parent-first-child</div>
<div id="c1">第1个孩子</div>
<div>c2-child-2</div>
<div id="c2">第2个孩子</div>
<div> c2-child</div>
<div id="c3">there are new contents</div>
<div id="c4">第4个孩子</div>
<div id="c5">第5个孩子</div>
<div>parent-last-child</div>
</div>
二：Ext.util.Format类
1.ellipsis(String value,Number length):String
对大于指定长度部分的字符串，进行裁剪，增加省略号（“……”）的显示
参数：
value：要裁剪的字符窜
length：允许长度
返回：
String 转换后的文本
示例
var v1="对大于指定长度部分的字符串，进行裁剪，增加省略号（"...”）的显示"，
Ext.Msg.alert("ellipsis",Ext.util.Format.ellipsis(v1,10));
结果：
对大于指定长度。。。
2。undef(Mixed value):MIxed
检查一个值是否为undefined,若是的话转换成空值
参数项：
value:Mixed:要检查的值
返回：
Mixed 转换成功为空白字符串，否则为原来的值
3.defaultValue(Mixed value ,String defaultValue):String
检查一个值(引用的)是否为空，若是则转换到缺省值。
参数项：
value:Mixed :要检查的引用值
defaultValue:String :默认赋予的值（默认为“”）
返回：
String
示例：
var v3
Ext.Msg.alert("defalutValue",Ext.util.Format.defaultValue(v3,"这是缺省值"));
4.htmlEncode(String value):String
转义（&,<,>,and'）为能在HTML中显示的字符
参数项：
value:String :要编码的字符串
返回：
String :编码后的文本
5.htmlDecode(String value):String
将（&,<,>,and'）字符从HTML显示的格式还原
6.trim(String value):Stirng
裁剪一段文本的前后多余的空格
参数项：
value:Stirng 要裁剪的文本
返回：
String :裁剪后的文本
7.sunstr(String value,Number start,Number length):Stirng
返回一个从指定位置开始的指定长度的子字符串。
参数项：
value:Stirng 原始文本
start：Number：所需的子字符串的起始位置
length：Number：在返回的子字符串中用包含的字符个数
8.lowercase(String value):String
返回一个字符串，改字符串中的字母被转换成小写字母
9.uppercase(String value):Stirng
返回一个字符串,该字符串中的字母被转换成大写字母
10，capitalize(String value ):String
返回一个字符串该字符串中的第一个字母转换成大写字母，剩余的为小写。
11.date(Mixed value ,[String format]):Function
将某个值解析成为一个特定格式的日期
参数项：
value：Mixed:要格式化的值
format:String ：任意有效的日期字符窜（默认为“月/日/年”）
12。stripTags（Mixed value ）:Stirng
剥去所有的HTML标签
参数项：value：Mixed:要剥去的文本
示例：
var v8="<a href="Http://www.z-jb.com">株洲北大青鸟</a>"；
Ext.Msg.alert("stripTags",Ext.util.Format.stripTags(v8));
结果：
株洲北大青鸟
13.stripScripts(Mixed value ):String
剥去所有教本的（String）标签
14.fileSize（Number /Stirng size）：String
对文件呢大小进行的简单的格式化（xx bytes,xxx KB,xxx MB）
示例：
var v9=2349327423;
Ext.Mag.alert("fileSzie",Ext.util.Format.fileSize(v9));
结果：
2240.5MB
Format 会根据字节的大小自动选择单位。
三，再谈Xtemplate
Xtemplate用于定义一个模板，并将值提供给{}占位符，XTemplate也能和Ext.util.Formant配合，将填充的值进行格式化。
示例：Ext.onReady(function(){
var xt= new Ext.XTemplate(
"<table border={b} width={w}>",
"<tr>",
'<td>{v1：date("Y年m月d日H时i分s秒")}</td>',
"<td>{v2:lowercase}</td>",
"<td>{v3:ellipsis(5)}</td>",
"</tr>",
"</table>"
);
xt.append("xt",{b:1,w:300,v1:new Date(),v2:"CELL2",v3:"这是一段非常长的字符串"});
xt.compile();
})
从上面代码中看出:v1为日期类型；v2为大写字母，编号才能小写字母输出;v3是一段较长的字符串，只显示一部分，剩余的用“...”来代替。
另外，强调一点：输出日期时；如果使用“<td>{v1:date('Y年m月d日H时i分s秒')}</td>”(即双引号在外，单引号在内)会产生错误。
Ext组件分类：
基础组件：工具栏组件：表单组件：
基础组件：
box :具有边框属性的组件：
button:按钮：
colorpalette:调色板：
component:组件;
container:容器：
cycle:圆角按钮；
dataview:数据显示视图
datepicker:日期选择面板
editor :编辑器
editorgrid:可编辑的表格
grid:不可编辑的表格：
paging:分页组件
panel：面板
progress:进度条
splitButton:可分裂的按钮
tabpanel:选项面板
treepanel:树
viewport:视图
window：窗口
工具栏组件：
toolbar：工具栏
tbbutton:按钮：
tbfill: 文件
tbitem:工具条项目
tbseparator:工具栏分隔符
tbspacer:工具栏空白
tbsplit：工具栏分隔按钮
tbtext:工具栏文本项：
表单组件：
form: Form表单
checkbox:复选框
combo:下拉列表框
datefield:日期选择器
field:表单字段
fieldset:字段分组
hidden：隐藏表单域
htmleditor:在线Html编辑器
numberfield:数字编辑器
radio：单选按钮
textarea:区域文本框
数据与ComboBox
二：Ext.data.DataProxy类
实际应用中使用的是Ext.data.DataProxy的子类“：MemoryProxy ,HttpProxy 和ScriptTagProxy
他们的作用分别是：
MemoryProxy:获取来自内存的数据，可以是数组,json,xml ***************
HttpProxy:使用HTTP协议通过ajax从远程服务器获取数据的代理，需要制定url.
ScriptTagProxy:功能和HttpProxy一样，但支持跨域获取数据
下拉列表框：
ComboBox类,是一个表单域组件，常用于表单中。
var combobox = new Ext.form.ComboBox({
renderTo:Ext.getBody(),
triggerAction:"all",
store:store,
displayField:"cname",
valueField:"cid",
mode:"local",
emptyText:"请选择湖南城市 "
})；
triggerAction:是否开启自动查询的功能，为all表示不开启，为query表示开启，默认是query;
store:定义数据源
displayField:关联Record的某一个逻辑列名作为显示值，
valueField:关联Record的某一个逻辑列名作为实际值，
mode:可选值有local和remote,如果数据来自本地，用local,如果数据来自远程服务器，必须用remote,默认是remote;
emptyText:没有选择任何选项的情况下文本框中的默认文字。
得到下拉框列表的值；
ComboBox定义了两个方法：getValue()用于返回实际值，getRawValue()用于返回显示值。
1561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
