extjs的学习笔记

一.extjs的官网：http://extjs.org.cn/

二.产品目录介绍

一.extjs的官网：http://extjs.org.cn/

二.产品目录介绍

三.在项目中使用

应用语言local文件，resources样式文件，核心的js文件

引入：

四.在html中编辑js时自动进行提示，需要安装spket插件

下载地址：http://www.spket.com/download.html

解压的features和plugins和eclipse中相应文件夹合并，重启eclipse

设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；

下面这个操作，根据自己需要设置（可以全选）。

6)重启eclipse或者Myeclipse；

7)创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。

效果如下：

用spket编辑器打开js：

可将 *.js 文件的默认编辑器设置为 Spket JavaScript Editor：

五.对extjs的基本了解

A、面板（Panel）

B、布局（Layout）

C、组件（Component）

D、渲染（Render）

E、窗口（Window）

F、对话框（Dialog）

六.hellword

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

href="extjs/resources/css/ext-all.css">

Ext.onReady(function() {

Ext.

Ext.MessageBox.alert("hell world");

})

</script>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

七.关于对json对象的简单实用

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

href="extjs/resources/css/ext-all.css">

Ext.onReady(function() {

var cat = {

name : "kafe",

sex : "男",

age : 18,

type : "动物"

};

Ext.MessageBox.alert("hell world" + "姓名：" + cat.name + "性别：" + cat.sex

+ "类型" + cat.type);

});

</script>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

八.ExtJS几种常见提示框

A、Ext.MessageBox.alert(String title,String mess,function fn,Object scope)

B、Ext.MessageBox.confirm(String title,String mess,function fn,Object scope)

C、Ext.MessageBox.prompt(String title,String mess,function fn,Object scope,Boolean/Number multiline,String value)

D、Ext.MessageBox.wait(String mess,String title,Object scope);

配置项	类型	说明
title	String	提示框的标题
msg	String	显示信息的内容
width	String	对话框的宽度，以像素为单位
closable	Boolean	false将隐藏右上角的关闭按钮，默认为false。如果已设置wait或progress为true则该配置将被忽略，提示框只能通过程序关闭，不能通过右上角的关闭按钮关闭
modal	Boolean	true为模式窗口，false为非模式窗口
Fn	Function	回调函数
buttons	Object/Boolean	一个包含配置信息的json对象或false不显示任何按钮,默认为false
progress	Boolean	true则表示一个进度条，默认为false,该进度条需要由程序控制滚动
progressText	String	进度条上显示的文字
wait	Boolean	True则表示一个自动滚动的滚动条，默认为false
prompt	Boolean String	true表示一个单行文本域如果prompt设置为true,则value值将显示在文本域中
multiline	Boolean	如果prompt设置为true,则multiline设置为true显示多行文本区，false显示单行文本域
icon	String	一个样式文件，它为对话框提供一个北京图，下面有一个详细列表

提示框按钮配置对象	说明	注意
Ext.Msg.CANCEL	只显示一个“取消”按钮	注意配置对象的大小写，正确的写法: Ext.Msg.CANCEL 错误的写法： Ext.Msg.cancel
Ext.Msg.Ok	只显示一个“确定”按钮
Ext.Msg.OKCANCEL	显示两个按钮“确定”和“取消”
Ext.Msg.YESNO	显示两个按钮“是”和“否”
Ext.Msg.YESNOCANCEL	显示三个按钮“是”“否”和“取消”

九.进度条

Ext.onReady(function() {

var progress = Ext.MessageBox.show({

title:'进度条',

width:300,

progress:true, //设成true进度条才会显示

msg:'当前进度'

});

var index = 0;

var t = {//创建一个任务变量

run:function(){

progress.updateProgress(index/100,"当前已完成"+index+"%","请稍后……");

index+=5;

if(index > 100){

Ext.TaskManager.stop(t);

}

interval:1000

};

Ext.TaskManager.start(t);//使用TaskManager来开始任务

});

</script>

十.第3讲.ExtJS工具栏、菜单栏

1.工具栏使用Toolbar创建，在toolbar上使用add添加工具，使用数据进行添加

配置项	类别	说明
handler	Function	一个函数，在按钮被单击之后被调用
iconCls	String	一个样式表，提供按钮显示的图标
menu	Mixed	参数可以是一个菜单对象或者是菜单对象的id,也可以是一个有效的菜单配置对象
text	String	按钮上显示的文字

Ext.onReady(function() {

var toolbar = new Ext.toolbar.Toolbar({

renderTo : 'toolbar',

width : 700

});

toolbar.add([ {//填充按钮

text : '新建文件夹',

iconCls : 'createIcon',

handler : buttonClick

}, {

text : '打开文件夹',

iconCls : 'openIcon',

handler : buttonClick

}, {

text : '保存文件夹',

iconCls : 'saveIcon',

handler : buttonClick

}, '-', {//-表示|分割符

xtype : 'textfield',

hideLable : true,

width : 100

}, '->', '<a href="http://www.baidu.com">HtmlElement百度</a>' ,"String字符串"]);//->表示填充剩余空间

function buttonClick(btn) {

alert(btn.text);

}

Ext.get("enable").on("click", function() {

toolbar.enable();

})

Ext.get("disable").on("click", function() {

toolbar.disable();

})

});

</script>

运行效果：

2.菜单栏

Ext.onReady(function() {

var toolbar = new Ext.toolbar.Toolbar({

renderTo : 'toolbar',

width : 700

});

toolbar.add([ {

text : '新建文件夹',

iconCls : 'createIcon',

handler : buttonClick,

menu:new Ext.menu.Menu({

shadow:'drop',

items:[

{

text:'新建word',

icon:'images/add.png',

menu:new Ext.menu.Menu({

shadow:'drop',

items:[{

text:'创建word2007',

icon:'images/add.png',

menu:new Ext.menu.Menu({

shadow:'drop',

items:[{

text:'颜色选择',

icon:'images/add.png',

menu:new Ext.menu.ColorPicker()

{

text:'日期选择',

icon:'images/add.png',

menu:new Ext.menu.DatePicker()

}

]

})

},{

text:'创建word2010',

icon:'images/add.png'

}]

})

{

text:'新建excel',

icon:'images/add.png'

{

text:'新建ppt',

icon:'images/add.png'

}

]

})

}, {

text : '打开文件夹',

iconCls : 'openIcon',

handler : buttonClick

}, {

text : '保存文件夹',

iconCls : 'saveIcon',

handler : buttonClick

}, '-', {//-表示|分割符

xtype : 'textfield',

hideLable : true,

width : 100

}, '->', '<a href="http://www.baidu.com">HtmlElement百度</a>' ,"String字符串"]);//->表示填充剩余空间

function buttonClick(btn) {

// alert(btn.text);

}

Ext.get("enable").on("click", function() {

toolbar.enable();

})

Ext.get("disable").on("click", function() {

toolbar.disable();

})

});

</script>

运行效果：

十一.extjs的表单

示例：

Ext.onReady(function() {

var form = new Ext.form.FormPanel({

title : '表单标题',

id : 'loginForm',

renderTo:'form',

width : 500,

heigth : 500,

items : [ {

xtype : 'textfield',

fieldLabel : '用户名',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '用户名不能为空',//如果空了，提示信息

emptyText : '请输入用户名',//文本框的默认填充内容，提示

msgTarget : 'under',//设置验证提示信息的位置，qtip：显示一个浮动的提示信息，title：显示一个浏览器的负担提示信息，under：在字段下方显示一个提示信息， side: 在字段的右边显示一个提示信息

regex : /^\d{3,10}$/,//正则表单验证

regexText : '用户名必须是3-10位的数字！',

//----------------------------

name : 'username',

id : 'username',

}, {

xtype : 'textfield',

fieldLabel : '密码',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '密码不能为空',//如果空了，提示信息

emptyText : '请输入密码',//文本框的默认填充内容，提示

//----------------------------

inputType : 'password',//设置密码隐藏形式

name : 'password',

id : 'password',

} ],

buttons:[{

text:'登录'

},{

text:'关闭'

}]

});

</script>

十二.对于对象的使用有两种方法

1.直接new一个对象

例如：

new Ext.form.field.Number({

fieldLabel : '年龄',

hideTrigger : true,//把左边微调数字的功能隐藏

allowDecimals : false,//是否允许小数

maxValue : 130,//允许的最大值

maxText : '年龄不能大于0',//错误提示

minValue : 0,//允许的最小值

minText : '年龄不能小于0'//错误提示

})

2.使用它的类型

例如：

{

xtype : 'numberfield',

fieldLabel : '折扣'

}

十三.ExtJs最常用表单组件Number、CheckBox、Radio

1、Ext.form.field.Number

2、Ext.form.field.CheckBox

3、Ext.form.field.Radio

配置项	类型	说明
allowDecimals	Boolean	是否允许输入小数，默认为true
autoStripChars	Boolean	是否过滤不允许输入的字符，默认为false
baseChars	String	输入的有效数字集合，默认为“0123456789”
decimalPrecision	Number	输入数字的精度，默认为保留小数点后2位
decimalSeparator	String	十进制分隔符，默认为“.”
maxValue	Number	允许输入的最大数值，默认为Number.MAX_VALUE
maxText	String	输入超过最大值之后提示消息
minValue	Number	允许输入的最小值，默认为Number.NEATIVE_INFINTY
minText	String	输入值小于最小值的提示消息
nanText	String	输入非有效数值之后的提示消息
negativeText	String	当输入为负数，且minValue设置为0时的错误提示
step	Number	设置提供微调按钮增大或减小数值时的数字间隔，默认为1

配置项	类型	说明
boxLabel	String	紧靠复选框的文字描述
boxLabelAlign	String	设置复选框关联标签的位置，有效值包括：“before”和“after”，默认为“after”
checked	Boolean	设置复选框默认是否被选中，默认为false
handler	Function	设置当选中状态发生变化时的处理函数，传入参数为： checkbox：Ext.form.Checkbox复选框组件 checked:Boolean新的选中状态
inputValue	String	提交值，默认为“on”
scope	Object	设置handler处理函数的作用范围
uncheckedValue	String	设置当复选框未选中时向后台提交的值，默认为undefined

配置项	类型	说明
allowBlank	Boolean	设置是否必须选中至少一项，true表示可以不选，false表示不能为空，至少选中一项，默认为true。
blankText	String	当allowBlank设置为false，并且没有选中任何复选框时的提示错误消息
columns	String/Number/Array	设置列数量，有效值包括： “auto”：自动平分字段容器的宽度 Number：指定列数 Array指定列宽的数组，可以使用整数和浮点数。
items	Array	复选框或复选框配置对象的数组

示例：

Ext.onReady(function() {

var form = new Ext.form.FormPanel({

title : '表单标题',

id : 'loginForm',

renderTo : 'form',

width : 700,

heigth : 700,

items : [ {

xtype : 'textfield',

fieldLabel : '用户名',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '用户名不能为空',//如果空了，提示信息

emptyText : '请输入用户名',//文本框的默认填充内容，提示

regex : /^\d{3,10}$/,//正则表单验证

regexText : '用户名必须是3-10位的数字！',

//----------------------------

name : 'username',

id : 'username',

}, {

xtype : 'textfield',

fieldLabel : '密码',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '密码不能为空',//如果空了，提示信息

emptyText : '请输入密码',//文本框的默认填充内容，提示

//----------------------------

inputType : 'password',//设置密码隐藏形式

name : 'password',

id : 'password',

}, new Ext.form.field.Number({

fieldLabel : '年龄',

hideTrigger : true,//把左边微调数字的功能隐藏

allowDecimals : false,//是否允许小数

maxValue : 130,//允许的最大值

maxText : '年龄不能大于0',//错误提示

minValue : 0,//允许的最小值

minText : '年龄不能小于0'//错误提示

}), {

xtype : 'numberfield',

fieldLabel : '折扣'

}, {

xtype : 'radio',

boxLabel : '男',

inputValue : 'man',

name : 'sexs'

}, {

xtype : 'radio',

boxLabel : '女',

inputValue : 'woman',

name : 'sexs'

}, {

xtype : 'radiogroup',

fieldLabel : '性别',

columns : 2,

items : [ {

boxLabel : '男',

inputValue : 'man',

name : 'sex'

}, {

boxLabel : '女',

inputValue : 'woman',

name : 'sex'

} ]

}, {

xtype : 'checkboxfield',

boxLabel : '足球'

}, {

xtype : 'checkboxfield',

boxLabel : '篮球'

}, {

xtype : 'checkboxfield',

boxLabel : '乒乓球'

}, {

xtype : 'checkboxgroup',

fieldLabel : '爱好',

columns : 2,

items : [ {

boxLabel : '篮球'

}, {

boxLabel : '足球'

}, {

boxLabel : '乒乓球'

} ]

} ],

buttons : [ {

text : '登录'

}, {

text : '关闭'

} ]

});

</script>

十四.ExtJs最常用表单组件ComboBox、time、date

配置项

类型

说明

allQuery

String

发往服务器用来查询全部信息的查询字符串，默认为空

autoSelect

Boolean

是否自动选择第一个列表值，默认为true

defaultListConfig

Object

listConfig配置对象包括：

emptyText：当输入值在列表中不存在时显示的信息，默认为空文本

loadingText：默认加载提示loading

minWidth：70，下拉列表默认最小宽度为70px

maxHeight：300，下拉列表默认最大高度为300px

shadow："sides"，默认的阴影显示位置

delimiter

String

在多模式下用于分隔显示值的分隔符，默认为“，”

displayField

String

显示下拉框的字段名

forceSelection

Boolean

设置输入值是否严格为待选列表中存在的值，true要求输入值必须在列表中存在，false则允许用户输入任何值，默认为false

listConfig

Object

下拉列表配置对象

minChars

Number

下拉表框字段选择当前用户需要输入的最小字符数量

queryMode="remote"默认为4

queryMode="local"默认为0

editable=false会使自动完成功能失效

multiSelect

Boolean

是否允许多选

pageSize

Number

下拉列表框的分页大小。如果大于0则在下拉列表的页脚位置自动创建一个分页工具栏，该项设置只在mode="remote"时生效

queryDelay

Number

从键盘输入字符结束到发送查询之间的查询延迟时间

queryMode="remote"默认为500ms

queryMode="local"默认为0

queryMode

String

下拉表框的数据读取模式

local：读取本地数据

remote：读取远程数据

queryParam

String

查询的名字，默认为“query”，将被传递到查询字符串中

selectOnTab

Boolean

是否使用键盘的Tab键选择列表值，默认为true

store

Ext.data.Store/Array

列表框绑定的数据源，默认为undefined

triggerAction

String

单击触发按钮时执行的默认操作

有效值包括“all”和“query”，

默认为“query”使用raw value进行查询

如果设置为“all”则会执行allQuery中设置的查询

typeAhead

Boolean

设置在输入过程中是否自动选择匹配的剩余部分文本，默认为false

typeAheadDelay

Number

输入过程中自动匹配剩余文本的延时时间，默认为250ms

valueField

String

组合框的值字段

valueNotFoundText

String

值不存在时的提示消息

配置项

类型

说明

loadingHeight

Number

加载数据时读取显示的高度

loadingText

String

下拉框加载数据时的提示信息，只有当mode=“remote”时才会生效

maxHeight

Number

下拉框最大高度

minHeight

Number

下拉框最小高度

maxWidth

Number

下拉框最大宽度

minWidth

Number

下拉框最小宽度

配置项		类型	说明
altFormat		String	多个时间输入格式组成的字符串，不同的格式之间使用"\|"分隔。将使用这些格式来解析用户的输入信息。默认值为"g:ia\|g:iA\|g:i a\|g:i A\|h:i\|g:i\|H:i\|ga\|ha\|h a\|g a\|g A\|gi\|hi\|gia\|hia\|g\|H\|gi a\|hia\|giA\|hiA\|gi A\|hi A"
format		String	显示格式，默认为"g:i A"
increment		Number	在时间列表中两个相邻选项的时间间隔，默认为15分钟。
invalidText		String	输入值无效时的提示消息，默认为"{value} is not a valid time"
maxValue		Date/String	列表中允许的最大时间
maxText		String	当时间大于最大值时的提示信息
minValue		Date/String	列表中允许的最小时间
minText		String	当时间小于最小值时的提示信息
pickerMaxHeight		Number	时间拾取器的最大高度，默认为300px
submitFormat		String	设置提交到服务器的日期格式，默认为format
标识	说明			示例
g	小时，12时计时法，不带前缀0			1至12
G	小时，24时计时法，不带前缀0			1至23
h	小时，12时计时法，带前缀0			01至12
H	小时，24时计时法，带前缀0			01至23
i	分钟，带前缀0			00至59
s	秒，带前缀0			00至59
a	午前与午后缩写，小写表示			am(午前) pm(午后)
A	午前与午后缩写，小写表示			AM(午前) PM(午后)
u	毫秒，带前缀0			001至999
O	所在时区与格林威治时间在小时和分钟上的差异			+1030
P	所在时区与格林威治时间在小时和分钟上的差异，在小时和分钟之间插入“：”			-8:30
T	所在时区缩写			EST等
Z	所在时区与格林威治时间在时间上的差距，以s为单位

示例：

Ext.onReady(function() {

//注册数据模型

Ext.regModel('jiguanModel', {

fields : [ {

name : 'jiguanmingzi'

}, {

name : 'jiguanzi'

} ]

});

//创建combox的数据源

var jiguanStore = Ext.create('Ext.data.Store', {

model : 'jiguanModel',

data : [ {

jiguanmingzi : '安徽',

jiguanzi : '1'

}, {

jiguanmingzi : '北京',

jiguanzi : '2'

}, {

jiguanmingzi : '天津',

jiguanzi : '3'

}, {

jiguanmingzi : '上海',

jiguanzi : '4'

}, {

jiguanmingzi : '广州',

jiguanzi : '5'

} ]

})

var form = new Ext.form.FormPanel({

title : '表单标题',

id : 'loginForm',

renderTo : 'form',

width : 700,

heigth : 700,

items : [ {

xtype : 'textfield',

fieldLabel : '用户名',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '用户名不能为空',//如果空了，提示信息

emptyText : '请输入用户名',//文本框的默认填充内容，提示

regex : /^\d{3,10}$/,//正则表单验证

regexText : '用户名必须是3-10位的数字！',

//----------------------------

name : 'username',

id : 'username',

}, {

xtype : 'textfield',

fieldLabel : '密码',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '密码不能为空',//如果空了，提示信息

emptyText : '请输入密码',//文本框的默认填充内容，提示

//----------------------------

inputType : 'password',//设置密码隐藏形式

name : 'password',

id : 'password',

}, new Ext.form.field.Number({

fieldLabel : '年龄',

hideTrigger : true,//把左边微调数字的功能隐藏

allowDecimals : false,//是否允许小数

maxValue : 130,//允许的最大值

maxText : '年龄不能大于0',//错误提示

minValue : 0,//允许的最小值

minText : '年龄不能小于0'//错误提示

}), {

xtype : 'numberfield',

fieldLabel : '折扣'

}, {

xtype : 'radio',

boxLabel : '男',

inputValue : 'man',

name : 'sexs'

}, {

xtype : 'radio',

boxLabel : '女',

inputValue : 'woman',

name : 'sexs'

}, {

xtype : 'radiogroup',

fieldLabel : '性别',

columns : 2,

items : [ {

boxLabel : '男',

inputValue : 'man',

name : 'sex'

}, {

boxLabel : '女',

inputValue : 'woman',

name : 'sex'

} ]

}, {

xtype : 'checkboxfield',

boxLabel : '足球'

}, {

xtype : 'checkboxfield',

boxLabel : '篮球'

}, {

xtype : 'checkboxfield',

boxLabel : '乒乓球'

}, {

xtype : 'checkboxgroup',

fieldLabel : '爱好',

columns : 2,

items : [ {

boxLabel : '篮球'

}, {

boxLabel : '足球'

}, {

boxLabel : '乒乓球'

} ]

}, {

xtype : 'combo',

id : 'jiguan',

fieldLabel : '籍贯',

store : jiguanStore,//数据源

queryMode : 'local',

triggerAction : 'all',//触发查询的时候combox中得到的数据方式单击触发按钮时执行的默认操作，有效值包括“all”和“query”，默认为“query”使用raw value进行查询，如果设置为“all”则会执行allQuery中设置的查询

displayField : 'jiguanmingzi',//combox显示的值

valueField : 'jiguanzi'//combox真实的值

}, {

xtype : 'timefield',//时间文本框

id : 'registerTime',

fieldLabel : '登录时间',

maxValue : '19:00',//限制最大值

maxText : '时间不能晚于7点'//错误提示信息

}, {

xtype : 'datefield',

id : 'registerDate',

fieldLabel : '注册日期',

format : 'Y-m-d'

} ],

buttons : [ {

text : '登录',

handler : function() {

alert(Ext.getCmp('jiguan').getValue());

}

}, {

text : '关闭'

} ]

});

</script>

十五.ExtJS面板Panel

配置项	参数类型			说明
animCollapse	Boolean			设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认为true，否则为fasle。
applyTo	Mixed			一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。
autoDestroy	Boolean			设置是否自动销毁从容器中移除的组件，默认为true，否则要手工销毁
autoHeight	Boolean			是否使用自动高度，true则使用自动高度，false则使用固定高度，默认为false
autoLoad	Object/String/			设置面板自动加载的url地址。如果不为null则面板会尝试加载该url
	Function			并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容
autoScroll	Boolean			设置是否自动显示滚动条，true则设置面板的body元素样式为overflow:'auto'，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false
autoShow	Boolean			设置是否移除组件的隐藏样式（例如'x-hidden' or 'x-hide-display'），如果为true则在渲染时移除它们，默认为false
autoWidth		Boolean	是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false
baseCls		String	应用于面板元素的基本样式类，默认为'x-panel'
bbar		Object/Array	设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。
bodyBorder		Boolean	设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效
bodyStyle		String/Object/	应用于面板体（body）的自定义样式。默认为null
		Function
border		Boolean	这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px
buttonAlign		String	设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left'和'center'，默认为'right'
buttons		Array	加入到面板底部（footer）中按钮配置对象的数组
collapseFirst		Boolean	设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。
autoWidth		Boolean	是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false
baseCls		String	应用于面板元素的基本样式类，默认为'x-panel'
bbar		Object/Array	设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。
bodyBorder		Boolean	设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效
bodyStyle		String/Object/	应用于面板体（body）的自定义样式。默认为null
		Function
border		Boolean	这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px
buttonAlign		String	设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left'和'center'，默认为'right'
buttons		Array	加入到面板底部（footer）中按钮配置对象的数组
collapseFirst		Boolean	设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。

示例：

Ext.onReady(function() {

var pane = Ext.create('Ext.panel.Panel', {

title : '我的第一个ext面板',

id : 'panel',

height : 400,

width : 500,

collapsible : true,//是否可以进行折叠

autoScroll:true,//可以出现滚动条

tbar : [ {//头toolbar

text : '查询'

} ],

bbar : [ {

text : '退出'

} ],

tools : [ {

id : 'toggle'//显示隐藏图标

}, {

id : 'close'//关闭图标

}, {

id : 'maximize'//最大化图标

}, {

id : 'minimize'//最小化图标

}, {

id : 'restore'//恢复窗口

}, {

id : 'pin'//固定图标

}, {

id : 'left'//向左图标

}, {

id : 'right'//向右图标

}, {

id : 'up'//向上图标

}, {

id : 'down'//向下图标

}, {

id : 'refresh'//刷新图标

}, {

id : 'plus'//加号图标

}, {

id : 'search'//查询图标

}, {

id : 'print'//打印图标

}, {

id : 'help'//帮助图标

}, {

id : 'save'//保存图标

}, {

id : 'expand'//扩展图标

} ],

html:'这是panel面板体',

items:[{

xtype:'datefield',

fieldLabel:'出生日期'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

}]

});

var win = new Ext.Window({//用window窗体显示panel

title : '注册panel',

width : 600,

height : 500,

items : [ pane ]

});

win.show();

});

</script>

十六.ExtJS布局模式-Auto布局、Fit布局、Accordion布局

①布局种类

②auto自动布局

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'auto面板布局',

id:'autoLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'auto',

items:[{

title:'面板一',

html:'面板一'

},{

title:'面板二',

html:'面板二'

},{

title:'面板三',

html:'面板三'

},{

title:'面板四',

html:'面板四'

}]

});

</script>

③fit自适应布局

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'fit面板布局',

id:'fitLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'fit',

items:[{

title:'面板一',

html:'面板一'

},{

title:'面板二',

html:'面板二'

},{

title:'面板三',

html:'面板三'

},{

title:'面板四',

html:'面板四'

}]

});

</script>

④accordion折叠布局

示例：

配置项	类型	说明
activeOnTop	Boolean	是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动
animate	Boolean	设置在展开或收缩子面板时是否使用滑动方式，true则采用滑动方式，默认为true
collapseFirst	Boolean	设置为true则折叠按钮总作为面板标题工具按钮的第一个渲染，默认false作为最后一个被渲染
fill	Boolean	设置当前子面板是否自动调整高度充满父面板的剩余空间，true则充满，默认为true
multi	Boolean	是否允许同时打开多个子面板，默认为false
titleCollapse	Boolean	是否允许通过点击子面板的标题来展开或收缩面板，true则允许，默认为tr

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'accordion面板布局',

id:'accordionLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'accordion',

items:[{

title:'面板一',

html:'面板一'

},{

title:'面板二',

html:'面板二'

},{

title:'面板三',

html:'面板三'

},{

title:'面板四',

html:'面板四'

}]

});

</script>

⑤使用accordion来实现menu菜单

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'accordion面板布局',

id:'accordionLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'accordion',

items:[{

title:'用户管理',

items:[new Ext.tree.Panel({

root:{

text:'用户管理',

children:[{

text:'添加用户',

icon:'images/add.png',

leaf:true

},{

text:'删除用户',

icon:'images/delete.png',

leaf:true

},{

text:'修改用户',

icon:'images/delete.png',

leaf:true

},{

text:'查询用户',

icon:'images/search.png',

leaf:true

}]

}

})]

},{

title:'成绩管理',

items:[new Ext.tree.Panel({

root:{

text:'成绩管理',

children:[{

text:'添加成绩',

icon:'images/add.png',

leaf:true

},{

text:'删除成绩',

icon:'images/delete.png',

leaf:true

},{

text:'修改成绩',

icon:'images/delete.png',

leaf:true

},{

text:'查询成绩',

icon:'images/search.png',

leaf:true

}]

}

})]

},{

title:'课程管理',

items:[new Ext.tree.Panel({

root:{

text:'课程管理',

children:[{

text:'添加课程',

icon:'images/add.png',

leaf:true

},{

text:'删除课程',

icon:'images/delete.png',

leaf:true

},{

text:'修改课程',

icon:'images/delete.png',

leaf:true

},{

text:'查询课程',

icon:'images/search.png',

leaf:true

}]

}

})]

},{

title:'日志管理',

items:[new Ext.tree.Panel({

root:{

text:'日志管理',

children:[{

text:'添加日志',

icon:'images/add.png',

leaf:true

},{

text:'删除日志',

icon:'images/delete.png',

leaf:true

},{

text:'修改日志',

icon:'images/delete.png',

leaf:true

},{

text:'查询日志',

icon:'images/search.png',

leaf:true

}]

}

})]

}]

});

</script>

十七.关于Ext的回调函数

function callBack(param)

param:就是当前执行事件的this

十八.ajax的标准写法

//Ajax的请求

Ext.Ajax.request({

url:'addUsers.jsp?shijian='+new Date(),

method:'post',

success:function(res){

var mess=res.responseText;

while(true){

if(mess.indexOf("\r\n")!=-1){

mess=mess.replace("\r\n","");

}else{

break;

}

if(mess=="true"){

alert("添加成功");

win.close();

findUsers();

}else{

alert("添加失败");

}

failure:function(){

alert("添加失败");

params:{

uname:Ext.getCmp("username").getValue(),

upass:Ext.getCmp("pass").getValue(),

tel:Ext.getCmp("tel").getValue()

}

});

三.在项目中使用

应用语言local文件，resources样式文件，核心的js文件

引入：

四.在html中编辑js时自动进行提示，需要安装spket插件

下载地址：http://www.spket.com/download.html

解压的features和plugins和eclipse中相应文件夹合并，重启eclipse

设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；

下面这个操作，根据自己需要设置（可以全选）。

6)重启eclipse或者Myeclipse；

7)创建新的JS文件并输入： Ext这样就可设置Ext Code代码自动完成的功能。

效果如下：

用spket编辑器打开js：

可将 *.js 文件的默认编辑器设置为 Spket JavaScript Editor：

五.对extjs的基本了解

A、面板（Panel）

B、布局（Layout）

C、组件（Component）

D、渲染（Render）

E、窗口（Window）

F、对话框（Dialog）

六.hellword

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

href="extjs/resources/css/ext-all.css">

Ext.onReady(function() {

Ext.

Ext.MessageBox.alert("hell world");

})

</script>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

七.关于对json对象的简单实用

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

href="extjs/resources/css/ext-all.css">

Ext.onReady(function() {

var cat = {

name : "kafe",

sex : "男",

age : 18,

type : "动物"

};

Ext.MessageBox.alert("hell world" + "姓名：" + cat.name + "性别：" + cat.sex

+ "类型" + cat.type);

});

</script>

<title>Insert title here</title>

</head>

<body>

</body>

</html>

八.ExtJS几种常见提示框

A、Ext.MessageBox.alert(String title,String mess,function fn,Object scope)

B、Ext.MessageBox.confirm(String title,String mess,function fn,Object scope)

C、Ext.MessageBox.prompt(String title,String mess,function fn,Object scope,Boolean/Number multiline,String value)

D、Ext.MessageBox.wait(String mess,String title,Object scope);

配置项	类型	说明
title	String	提示框的标题
msg	String	显示信息的内容
width	String	对话框的宽度，以像素为单位
closable	Boolean	false将隐藏右上角的关闭按钮，默认为false。如果已设置wait或progress为true则该配置将被忽略，提示框只能通过程序关闭，不能通过右上角的关闭按钮关闭
modal	Boolean	true为模式窗口，false为非模式窗口
Fn	Function	回调函数
buttons	Object/Boolean	一个包含配置信息的json对象或false不显示任何按钮,默认为false
progress	Boolean	true则表示一个进度条，默认为false,该进度条需要由程序控制滚动
progressText	String	进度条上显示的文字
wait	Boolean	True则表示一个自动滚动的滚动条，默认为false
prompt	Boolean String	true表示一个单行文本域如果prompt设置为true,则value值将显示在文本域中
multiline	Boolean	如果prompt设置为true,则multiline设置为true显示多行文本区，false显示单行文本域
icon	String	一个样式文件，它为对话框提供一个北京图，下面有一个详细列表

提示框按钮配置对象	说明	注意
Ext.Msg.CANCEL	只显示一个“取消”按钮	注意配置对象的大小写，正确的写法: Ext.Msg.CANCEL 错误的写法： Ext.Msg.cancel
Ext.Msg.Ok	只显示一个“确定”按钮
Ext.Msg.OKCANCEL	显示两个按钮“确定”和“取消”
Ext.Msg.YESNO	显示两个按钮“是”和“否”
Ext.Msg.YESNOCANCEL	显示三个按钮“是”“否”和“取消”

九.进度条

Ext.onReady(function() {

var progress = Ext.MessageBox.show({

title:'进度条',

width:300,

progress:true, //设成true进度条才会显示

msg:'当前进度'

});

var index = 0;

var t = {//创建一个任务变量

run:function(){

progress.updateProgress(index/100,"当前已完成"+index+"%","请稍后……");

index+=5;

if(index > 100){

Ext.TaskManager.stop(t);

}

interval:1000

};

Ext.TaskManager.start(t);//使用TaskManager来开始任务

});

</script>

十.第3讲.ExtJS工具栏、菜单栏

1.工具栏使用Toolbar创建，在toolbar上使用add添加工具，使用数据进行添加

配置项	类别	说明
handler	Function	一个函数，在按钮被单击之后被调用
iconCls	String	一个样式表，提供按钮显示的图标
menu	Mixed	参数可以是一个菜单对象或者是菜单对象的id,也可以是一个有效的菜单配置对象
text	String	按钮上显示的文字

Ext.onReady(function() {

var toolbar = new Ext.toolbar.Toolbar({

renderTo : 'toolbar',

width : 700

});

toolbar.add([ {//填充按钮

text : '新建文件夹',

iconCls : 'createIcon',

handler : buttonClick

}, {

text : '打开文件夹',

iconCls : 'openIcon',

handler : buttonClick

}, {

text : '保存文件夹',

iconCls : 'saveIcon',

handler : buttonClick

}, '-', {//-表示|分割符

xtype : 'textfield',

hideLable : true,

width : 100

}, '->', '<a href="http://www.baidu.com">HtmlElement百度</a>' ,"String字符串"]);//->表示填充剩余空间

function buttonClick(btn) {

alert(btn.text);

}

Ext.get("enable").on("click", function() {

toolbar.enable();

})

Ext.get("disable").on("click", function() {

toolbar.disable();

})

});

</script>

运行效果：

2.菜单栏

Ext.onReady(function() {

var toolbar = new Ext.toolbar.Toolbar({

renderTo : 'toolbar',

width : 700

});

toolbar.add([ {

text : '新建文件夹',

iconCls : 'createIcon',

handler : buttonClick,

menu:new Ext.menu.Menu({

shadow:'drop',

items:[

{

text:'新建word',

icon:'images/add.png',

menu:new Ext.menu.Menu({

shadow:'drop',

items:[{

text:'创建word2007',

icon:'images/add.png',

menu:new Ext.menu.Menu({

shadow:'drop',

items:[{

text:'颜色选择',

icon:'images/add.png',

menu:new Ext.menu.ColorPicker()

{

text:'日期选择',

icon:'images/add.png',

menu:new Ext.menu.DatePicker()

}

]

})

},{

text:'创建word2010',

icon:'images/add.png'

}]

})

{

text:'新建excel',

icon:'images/add.png'

{

text:'新建ppt',

icon:'images/add.png'

}

]

})

}, {

text : '打开文件夹',

iconCls : 'openIcon',

handler : buttonClick

}, {

text : '保存文件夹',

iconCls : 'saveIcon',

handler : buttonClick

}, '-', {//-表示|分割符

xtype : 'textfield',

hideLable : true,

width : 100

}, '->', '<a href="http://www.baidu.com">HtmlElement百度</a>' ,"String字符串"]);//->表示填充剩余空间

function buttonClick(btn) {

// alert(btn.text);

}

Ext.get("enable").on("click", function() {

toolbar.enable();

})

Ext.get("disable").on("click", function() {

toolbar.disable();

})

});

</script>

运行效果：

十一.extjs的表单

示例：

Ext.onReady(function() {

var form = new Ext.form.FormPanel({

title : '表单标题',

id : 'loginForm',

renderTo:'form',

width : 500,

heigth : 500,

items : [ {

xtype : 'textfield',

fieldLabel : '用户名',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '用户名不能为空',//如果空了，提示信息

emptyText : '请输入用户名',//文本框的默认填充内容，提示

regex : /^\d{3,10}$/,//正则表单验证

regexText : '用户名必须是3-10位的数字！',

//----------------------------

name : 'username',

id : 'username',

}, {

xtype : 'textfield',

fieldLabel : '密码',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '密码不能为空',//如果空了，提示信息

emptyText : '请输入密码',//文本框的默认填充内容，提示

//----------------------------

inputType : 'password',//设置密码隐藏形式

name : 'password',

id : 'password',

} ],

buttons:[{

text:'登录'

},{

text:'关闭'

}]

});

</script>

十二.对于对象的使用有两种方法

1.直接new一个对象

例如：

new Ext.form.field.Number({

fieldLabel : '年龄',

hideTrigger : true,//把左边微调数字的功能隐藏

allowDecimals : false,//是否允许小数

maxValue : 130,//允许的最大值

maxText : '年龄不能大于0',//错误提示

minValue : 0,//允许的最小值

minText : '年龄不能小于0'//错误提示

})

2.使用它的类型

例如：

{

xtype : 'numberfield',

fieldLabel : '折扣'

}

十三.ExtJs最常用表单组件Number、CheckBox、Radio

1、Ext.form.field.Number

2、Ext.form.field.CheckBox

3、Ext.form.field.Radio

配置项	类型	说明
allowDecimals	Boolean	是否允许输入小数，默认为true
autoStripChars	Boolean	是否过滤不允许输入的字符，默认为false
baseChars	String	输入的有效数字集合，默认为“0123456789”
decimalPrecision	Number	输入数字的精度，默认为保留小数点后2位
decimalSeparator	String	十进制分隔符，默认为“.”
maxValue	Number	允许输入的最大数值，默认为Number.MAX_VALUE
maxText	String	输入超过最大值之后提示消息
minValue	Number	允许输入的最小值，默认为Number.NEATIVE_INFINTY
minText	String	输入值小于最小值的提示消息
nanText	String	输入非有效数值之后的提示消息
negativeText	String	当输入为负数，且minValue设置为0时的错误提示
step	Number	设置提供微调按钮增大或减小数值时的数字间隔，默认为1

配置项	类型	说明
boxLabel	String	紧靠复选框的文字描述
boxLabelAlign	String	设置复选框关联标签的位置，有效值包括：“before”和“after”，默认为“after”
checked	Boolean	设置复选框默认是否被选中，默认为false
handler	Function	设置当选中状态发生变化时的处理函数，传入参数为： checkbox：Ext.form.Checkbox复选框组件 checked:Boolean新的选中状态
inputValue	String	提交值，默认为“on”
scope	Object	设置handler处理函数的作用范围
uncheckedValue	String	设置当复选框未选中时向后台提交的值，默认为undefined

配置项	类型	说明
allowBlank	Boolean	设置是否必须选中至少一项，true表示可以不选，false表示不能为空，至少选中一项，默认为true。
blankText	String	当allowBlank设置为false，并且没有选中任何复选框时的提示错误消息
columns	String/Number/Array	设置列数量，有效值包括： “auto”：自动平分字段容器的宽度 Number：指定列数 Array指定列宽的数组，可以使用整数和浮点数。
items	Array	复选框或复选框配置对象的数组

示例：

Ext.onReady(function() {

var form = new Ext.form.FormPanel({

title : '表单标题',

id : 'loginForm',

renderTo : 'form',

width : 700,

heigth : 700,

items : [ {

xtype : 'textfield',

fieldLabel : '用户名',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '用户名不能为空',//如果空了，提示信息

emptyText : '请输入用户名',//文本框的默认填充内容，提示

regex : /^\d{3,10}$/,//正则表单验证

regexText : '用户名必须是3-10位的数字！',

//----------------------------

name : 'username',

id : 'username',

}, {

xtype : 'textfield',

fieldLabel : '密码',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '密码不能为空',//如果空了，提示信息

emptyText : '请输入密码',//文本框的默认填充内容，提示

//----------------------------

inputType : 'password',//设置密码隐藏形式

name : 'password',

id : 'password',

}, new Ext.form.field.Number({

fieldLabel : '年龄',

hideTrigger : true,//把左边微调数字的功能隐藏

allowDecimals : false,//是否允许小数

maxValue : 130,//允许的最大值

maxText : '年龄不能大于0',//错误提示

minValue : 0,//允许的最小值

minText : '年龄不能小于0'//错误提示

}), {

xtype : 'numberfield',

fieldLabel : '折扣'

}, {

xtype : 'radio',

boxLabel : '男',

inputValue : 'man',

name : 'sexs'

}, {

xtype : 'radio',

boxLabel : '女',

inputValue : 'woman',

name : 'sexs'

}, {

xtype : 'radiogroup',

fieldLabel : '性别',

columns : 2,

items : [ {

boxLabel : '男',

inputValue : 'man',

name : 'sex'

}, {

boxLabel : '女',

inputValue : 'woman',

name : 'sex'

} ]

}, {

xtype : 'checkboxfield',

boxLabel : '足球'

}, {

xtype : 'checkboxfield',

boxLabel : '篮球'

}, {

xtype : 'checkboxfield',

boxLabel : '乒乓球'

}, {

xtype : 'checkboxgroup',

fieldLabel : '爱好',

columns : 2,

items : [ {

boxLabel : '篮球'

}, {

boxLabel : '足球'

}, {

boxLabel : '乒乓球'

} ]

} ],

buttons : [ {

text : '登录'

}, {

text : '关闭'

} ]

});

</script>

十四.ExtJs最常用表单组件ComboBox、time、date

配置项

类型

说明

allQuery

String

发往服务器用来查询全部信息的查询字符串，默认为空

autoSelect

Boolean

是否自动选择第一个列表值，默认为true

defaultListConfig

Object

listConfig配置对象包括：

emptyText：当输入值在列表中不存在时显示的信息，默认为空文本

loadingText：默认加载提示loading

minWidth：70，下拉列表默认最小宽度为70px

maxHeight：300，下拉列表默认最大高度为300px

shadow："sides"，默认的阴影显示位置

delimiter

String

在多模式下用于分隔显示值的分隔符，默认为“，”

displayField

String

显示下拉框的字段名

forceSelection

Boolean

设置输入值是否严格为待选列表中存在的值，true要求输入值必须在列表中存在，false则允许用户输入任何值，默认为false

listConfig

Object

下拉列表配置对象

minChars

Number

下拉表框字段选择当前用户需要输入的最小字符数量

queryMode="remote"默认为4

queryMode="local"默认为0

editable=false会使自动完成功能失效

multiSelect

Boolean

是否允许多选

pageSize

Number

下拉列表框的分页大小。如果大于0则在下拉列表的页脚位置自动创建一个分页工具栏，该项设置只在mode="remote"时生效

queryDelay

Number

从键盘输入字符结束到发送查询之间的查询延迟时间

queryMode="remote"默认为500ms

queryMode="local"默认为0

queryMode

String

下拉表框的数据读取模式

local：读取本地数据

remote：读取远程数据

queryParam

String

查询的名字，默认为“query”，将被传递到查询字符串中

selectOnTab

Boolean

是否使用键盘的Tab键选择列表值，默认为true

store

Ext.data.Store/Array

列表框绑定的数据源，默认为undefined

triggerAction

String

单击触发按钮时执行的默认操作

有效值包括“all”和“query”，

默认为“query”使用raw value进行查询

如果设置为“all”则会执行allQuery中设置的查询

typeAhead

Boolean

设置在输入过程中是否自动选择匹配的剩余部分文本，默认为false

typeAheadDelay

Number

输入过程中自动匹配剩余文本的延时时间，默认为250ms

valueField

String

组合框的值字段

valueNotFoundText

String

值不存在时的提示消息

配置项

类型

说明

loadingHeight

Number

加载数据时读取显示的高度

loadingText

String

下拉框加载数据时的提示信息，只有当mode=“remote”时才会生效

maxHeight

Number

下拉框最大高度

minHeight

Number

下拉框最小高度

maxWidth

Number

下拉框最大宽度

minWidth

Number

下拉框最小宽度

配置项		类型	说明
altFormat		String	多个时间输入格式组成的字符串，不同的格式之间使用"\|"分隔。将使用这些格式来解析用户的输入信息。默认值为"g:ia\|g:iA\|g:i a\|g:i A\|h:i\|g:i\|H:i\|ga\|ha\|h a\|g a\|g A\|gi\|hi\|gia\|hia\|g\|H\|gi a\|hia\|giA\|hiA\|gi A\|hi A"
format		String	显示格式，默认为"g:i A"
increment		Number	在时间列表中两个相邻选项的时间间隔，默认为15分钟。
invalidText		String	输入值无效时的提示消息，默认为"{value} is not a valid time"
maxValue		Date/String	列表中允许的最大时间
maxText		String	当时间大于最大值时的提示信息
minValue		Date/String	列表中允许的最小时间
minText		String	当时间小于最小值时的提示信息
pickerMaxHeight		Number	时间拾取器的最大高度，默认为300px
submitFormat		String	设置提交到服务器的日期格式，默认为format
标识	说明			示例
g	小时，12时计时法，不带前缀0			1至12
G	小时，24时计时法，不带前缀0			1至23
h	小时，12时计时法，带前缀0			01至12
H	小时，24时计时法，带前缀0			01至23
i	分钟，带前缀0			00至59
s	秒，带前缀0			00至59
a	午前与午后缩写，小写表示			am(午前) pm(午后)
A	午前与午后缩写，小写表示			AM(午前) PM(午后)
u	毫秒，带前缀0			001至999
O	所在时区与格林威治时间在小时和分钟上的差异			+1030
P	所在时区与格林威治时间在小时和分钟上的差异，在小时和分钟之间插入“：”			-8:30
T	所在时区缩写			EST等
Z	所在时区与格林威治时间在时间上的差距，以s为单位

示例：

Ext.onReady(function() {

//注册数据模型

Ext.regModel('jiguanModel', {

fields : [ {

name : 'jiguanmingzi'

}, {

name : 'jiguanzi'

} ]

});

//创建combox的数据源

var jiguanStore = Ext.create('Ext.data.Store', {

model : 'jiguanModel',

data : [ {

jiguanmingzi : '安徽',

jiguanzi : '1'

}, {

jiguanmingzi : '北京',

jiguanzi : '2'

}, {

jiguanmingzi : '天津',

jiguanzi : '3'

}, {

jiguanmingzi : '上海',

jiguanzi : '4'

}, {

jiguanmingzi : '广州',

jiguanzi : '5'

} ]

})

var form = new Ext.form.FormPanel({

title : '表单标题',

id : 'loginForm',

renderTo : 'form',

width : 700,

heigth : 700,

items : [ {

xtype : 'textfield',

fieldLabel : '用户名',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '用户名不能为空',//如果空了，提示信息

emptyText : '请输入用户名',//文本框的默认填充内容，提示

regex : /^\d{3,10}$/,//正则表单验证

regexText : '用户名必须是3-10位的数字！',

//----------------------------

name : 'username',

id : 'username',

}, {

xtype : 'textfield',

fieldLabel : '密码',

//--------验证区----------------

allowBlank : false,//是否为空

blankText : '密码不能为空',//如果空了，提示信息

emptyText : '请输入密码',//文本框的默认填充内容，提示

//----------------------------

inputType : 'password',//设置密码隐藏形式

name : 'password',

id : 'password',

}, new Ext.form.field.Number({

fieldLabel : '年龄',

hideTrigger : true,//把左边微调数字的功能隐藏

allowDecimals : false,//是否允许小数

maxValue : 130,//允许的最大值

maxText : '年龄不能大于0',//错误提示

minValue : 0,//允许的最小值

minText : '年龄不能小于0'//错误提示

}), {

xtype : 'numberfield',

fieldLabel : '折扣'

}, {

xtype : 'radio',

boxLabel : '男',

inputValue : 'man',

name : 'sexs'

}, {

xtype : 'radio',

boxLabel : '女',

inputValue : 'woman',

name : 'sexs'

}, {

xtype : 'radiogroup',

fieldLabel : '性别',

columns : 2,

items : [ {

boxLabel : '男',

inputValue : 'man',

name : 'sex'

}, {

boxLabel : '女',

inputValue : 'woman',

name : 'sex'

} ]

}, {

xtype : 'checkboxfield',

boxLabel : '足球'

}, {

xtype : 'checkboxfield',

boxLabel : '篮球'

}, {

xtype : 'checkboxfield',

boxLabel : '乒乓球'

}, {

xtype : 'checkboxgroup',

fieldLabel : '爱好',

columns : 2,

items : [ {

boxLabel : '篮球'

}, {

boxLabel : '足球'

}, {

boxLabel : '乒乓球'

} ]

}, {

xtype : 'combo',

id : 'jiguan',

fieldLabel : '籍贯',

store : jiguanStore,//数据源

queryMode : 'local',

displayField : 'jiguanmingzi',//combox显示的值

valueField : 'jiguanzi'//combox真实的值

}, {

xtype : 'timefield',//时间文本框

id : 'registerTime',

fieldLabel : '登录时间',

maxValue : '19:00',//限制最大值

maxText : '时间不能晚于7点'//错误提示信息

}, {

xtype : 'datefield',

id : 'registerDate',

fieldLabel : '注册日期',

format : 'Y-m-d'

} ],

buttons : [ {

text : '登录',

handler : function() {

alert(Ext.getCmp('jiguan').getValue());

}

}, {

text : '关闭'

} ]

});

</script>

十五.ExtJS面板Panel

配置项	参数类型			说明
animCollapse	Boolean			设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认为true，否则为fasle。
applyTo	Mixed			一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。
autoDestroy	Boolean			设置是否自动销毁从容器中移除的组件，默认为true，否则要手工销毁
autoHeight	Boolean			是否使用自动高度，true则使用自动高度，false则使用固定高度，默认为false
autoLoad	Object/String/			设置面板自动加载的url地址。如果不为null则面板会尝试加载该url
	Function			并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容
autoScroll	Boolean			设置是否自动显示滚动条，true则设置面板的body元素样式为overflow:'auto'，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false
autoShow	Boolean			设置是否移除组件的隐藏样式（例如'x-hidden' or 'x-hide-display'），如果为true则在渲染时移除它们，默认为false
autoWidth		Boolean	是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false
baseCls		String	应用于面板元素的基本样式类，默认为'x-panel'
bbar		Object/Array	设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。
bodyBorder		Boolean	设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效
bodyStyle		String/Object/	应用于面板体（body）的自定义样式。默认为null
		Function
border		Boolean	这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px
buttonAlign		String	设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left'和'center'，默认为'right'
buttons		Array	加入到面板底部（footer）中按钮配置对象的数组
collapseFirst		Boolean	设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。
autoWidth		Boolean	是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false
baseCls		String	应用于面板元素的基本样式类，默认为'x-panel'
bbar		Object/Array	设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。
bodyBorder		Boolean	设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效
bodyStyle		String/Object/	应用于面板体（body）的自定义样式。默认为null
		Function
border		Boolean	这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px
buttonAlign		String	设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left'和'center'，默认为'right'
buttons		Array	加入到面板底部（footer）中按钮配置对象的数组
collapseFirst		Boolean	设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。

示例：

Ext.onReady(function() {

var pane = Ext.create('Ext.panel.Panel', {

title : '我的第一个ext面板',

id : 'panel',

height : 400,

width : 500,

collapsible : true,//是否可以进行折叠

autoScroll:true,//可以出现滚动条

tbar : [ {//头toolbar

text : '查询'

} ],

bbar : [ {

text : '退出'

} ],

tools : [ {

id : 'toggle'//显示隐藏图标

}, {

id : 'close'//关闭图标

}, {

id : 'maximize'//最大化图标

}, {

id : 'minimize'//最小化图标

}, {

id : 'restore'//恢复窗口

}, {

id : 'pin'//固定图标

}, {

id : 'left'//向左图标

}, {

id : 'right'//向右图标

}, {

id : 'up'//向上图标

}, {

id : 'down'//向下图标

}, {

id : 'refresh'//刷新图标

}, {

id : 'plus'//加号图标

}, {

id : 'search'//查询图标

}, {

id : 'print'//打印图标

}, {

id : 'help'//帮助图标

}, {

id : 'save'//保存图标

}, {

id : 'expand'//扩展图标

} ],

html:'这是panel面板体',

items:[{

xtype:'datefield',

fieldLabel:'出生日期'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

},{

xtype:'textfield',

fieldLabel:'用户名'

}]

});

var win = new Ext.Window({//用window窗体显示panel

title : '注册panel',

width : 600,

height : 500,

items : [ pane ]

});

win.show();

});

</script>

十六.ExtJS布局模式-Auto布局、Fit布局、Accordion布局

①布局种类

②auto自动布局

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'auto面板布局',

id:'autoLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'auto',

items:[{

title:'面板一',

html:'面板一'

},{

title:'面板二',

html:'面板二'

},{

title:'面板三',

html:'面板三'

},{

title:'面板四',

html:'面板四'

}]

});

</script>

③fit自适应布局

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'fit面板布局',

id:'fitLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'fit',

items:[{

title:'面板一',

html:'面板一'

},{

title:'面板二',

html:'面板二'

},{

title:'面板三',

html:'面板三'

},{

title:'面板四',

html:'面板四'

}]

});

</script>

④accordion折叠布局

示例：

配置项	类型	说明
activeOnTop	Boolean	是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动
animate	Boolean	设置在展开或收缩子面板时是否使用滑动方式，true则采用滑动方式，默认为true
collapseFirst	Boolean	设置为true则折叠按钮总作为面板标题工具按钮的第一个渲染，默认false作为最后一个被渲染
fill	Boolean	设置当前子面板是否自动调整高度充满父面板的剩余空间，true则充满，默认为true
multi	Boolean	是否允许同时打开多个子面板，默认为false
titleCollapse	Boolean	是否允许通过点击子面板的标题来展开或收缩面板，true则允许，默认为tr

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'accordion面板布局',

id:'accordionLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'accordion',

items:[{

title:'面板一',

html:'面板一'

},{

title:'面板二',

html:'面板二'

},{

title:'面板三',

html:'面板三'

},{

title:'面板四',

html:'面板四'

}]

});

</script>

⑤使用accordion来实现menu菜单

示例：

Ext.onReady(function() {

var autoPanel = new Ext.panel.Panel({

title:'accordion面板布局',

id:'accordionLayoutPanel',

renderTo:Ext.getBody(),

height:300,

width:400,

layout:'accordion',

items:[{

title:'用户管理',

items:[new Ext.tree.Panel({

root:{

text:'用户管理',

children:[{

text:'添加用户',

icon:'images/add.png',

leaf:true

},{

text:'删除用户',

icon:'images/delete.png',

leaf:true

},{

text:'修改用户',

icon:'images/delete.png',

leaf:true

},{

text:'查询用户',

icon:'images/search.png',

leaf:true

}]

}

})]

},{

title:'成绩管理',

items:[new Ext.tree.Panel({

root:{

text:'成绩管理',

children:[{

text:'添加成绩',

icon:'images/add.png',

leaf:true

},{

text:'删除成绩',

icon:'images/delete.png',

leaf:true

},{

text:'修改成绩',

icon:'images/delete.png',

leaf:true

},{

text:'查询成绩',

icon:'images/search.png',

leaf:true

}]

}

})]

},{

title:'课程管理',

items:[new Ext.tree.Panel({

root:{

text:'课程管理',

children:[{

text:'添加课程',

icon:'images/add.png',

leaf:true

},{

text:'删除课程',

icon:'images/delete.png',

leaf:true

},{

text:'修改课程',

icon:'images/delete.png',

leaf:true

},{

text:'查询课程',

icon:'images/search.png',

leaf:true

}]

}

})]

},{

title:'日志管理',

items:[new Ext.tree.Panel({

root:{

text:'日志管理',

children:[{

text:'添加日志',

icon:'images/add.png',

leaf:true

},{

text:'删除日志',

icon:'images/delete.png',

leaf:true

},{

text:'修改日志',

icon:'images/delete.png',

leaf:true

},{

text:'查询日志',

icon:'images/search.png',

leaf:true

}]

}

})]

}]

});

</script>

十七.关于Ext的回调函数

function callBack(param)

param:就是当前执行事件的this

十八.ajax的标准写法

//Ajax的请求

Ext.Ajax.request({

url:'addUsers.jsp?shijian='+new Date(),

method:'post',

success:function(res){

var mess=res.responseText;

while(true){

if(mess.indexOf("\r\n")!=-1){

mess=mess.replace("\r\n","");

}else{

break;

}

if(mess=="true"){

alert("添加成功");

win.close();

findUsers();

}else{

alert("添加失败");

}

failure:function(){

alert("添加失败");

params:{

uname:Ext.getCmp("username").getValue(),

upass:Ext.getCmp("pass").getValue(),

tel:Ext.getCmp("tel").getValue()

}

});

ExtJs中ComboBox通过表单传值

{

xtype:'combo',

fieldLabel:"所属部门",

store:storedep ,

id:'combo',

typeAhead: true,

mode: 'local',

valueField:'value',

displayField:'text',

allowBlank:false,

hiddenName:'user.departmentid',//hiddenName是拿到vauleField的值

emptyText:'请选择',

blankText : '请选择',// 该项如果没有选择，则提示错误信息,

editable:false,

triggerAction :'all',

forceSelection: true,

selectOnFocus :true

/*listeners : {

select : function(combo, record, index) {

var depname = record.get('value');

this.setValue(depname);

alert(depname);

}

}*/

}

在formPanel有如上一个ComboBox，提交表单以后，通过request.getParameter("test")来获取值，可是我们很不幸的看到获得的值是displayField上显示的值，而我们需要的是valueField的值。

这就需要hiddenName了，将name改为它就可以了，即name:'test"->hiddenName:'test',则我们获得的值就是valueField中的了

猜你喜欢