第6章 EXTForm应用.docx
- 文档编号:28324439
- 上传时间:2023-07-10
- 格式:DOCX
- 页数:12
- 大小:31.40KB
第6章 EXTForm应用.docx
《第6章 EXTForm应用.docx》由会员分享,可在线阅读,更多相关《第6章 EXTForm应用.docx(12页珍藏版)》请在冰豆网上搜索。
第6章EXTForm应用
第6章Form应用
1.FormPanel
表单面板显然很重要,首先弄清楚这个问题,创建的时候:
//查看源代码便知,两种方法是一样的
Ext.form.FormPanel = Ext.FormPanel;
另外,使用FormPanel和使用表单没有必然的联系,用一般的panel也可以生成表单。
真正决定表单功能的是Ext.form.BasicForm,只是在使用FormPanel的时候,Ext会自动根据配置属性产生BasicForm的对象。
所以对FormPanel做标单操作的时候,可以通过getForm()方法得到BasicForm对象。
我们还是从最简单的代码实例开始吧:
var form1 = new Ext.form.FormPanel({
width:
350,
frame:
true,//圆角和浅蓝色背景
renderTo:
"form1",//呈现
title:
"FormPanel",
bodyStyle:
"padding:
5px 5px 0",
items:
[
{
fieldLabel:
"UserName",//文本框标题
xtype:
"textfield",//表单文本框
name:
"user",//元素名称
allowBlank:
false,//不允许为空
blankText:
'帐户不能为空'//错误提示内容
id:
"user",
width:
200
},
{
fieldLabel:
"PassWord",
xtype:
"textfield",
//inputType:
"password",
name:
"pass",
id:
"pass",
width:
200
}
],
buttons:
[{text:
"确定"},{text:
"取消",handler:
function(){alert("事件!
");}}]
});
关于inputType,常见参数如下:
radio,checkbox,text(默认),
file,
password等等.
//把前面代码重写items属性
items:
[
{
xtype:
'fieldset', title:
'个人信息',collapsible:
true,
autoHeight:
true, width:
330, defaults:
{width:
150},
defaultType:
'textfield',
items :
[{
fieldLabel:
'邮箱', name:
'meil',
value:
'test@'
},{
xtype:
"combo", name:
'sex',
store:
["男","女","保密"],//数据源为一数组
fieldLabel:
"性别",
emptyText:
'请选择性别.'
}]
}
]
1.labelAlign:
fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"
2.labelWidth:
fieldlabel的占位宽
3.method:
"get"或"post"
4.url:
"提交的地址"
5.submit:
提交函数
关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:
我们看更多的例子:
Form components
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
关于xtype的类型,在extjs的form表单中已经定义的有:
2.
Ext.onReady(function(){
var combo=new Ext.form.ComboBox({
store:
['湖北','江西','安徽'],
emptyText:
'请选择一个省份....',
applyTo:
'combo'
});
});
ComboBox详解
先看一个很简单的combo:
在前面的例子里面,我们一直给ComboBox的数据源store赋值一维数组,其实store支持多维和Store.data.Store类型。
//下面就几种数据以代码举例说明
1.一维数组:
["江西","湖北"],值同时赋给ComboBox的value和text
2.二维和多维数组:
[["one","bbar","111"],["two","tbar","222"]],第一维和第二维分别赋值给value和text,其他维忽略
3.store类型:
包括GroupingStore, JsonStore, SimpleStore.
//我们分三步走:
//第一步:
提供数据:
var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
//第二步:
导入到store中:
var store = new Ext.data.SimpleStore({
fields:
['chinese', 'english'],
data :
data
});
//第三步 :
把store托付给comboBox的store
var combo = new Ext.form.ComboBox({
store:
store,
displayField:
'english',//store字段中你要显示的字段,多字段必选参数,默认当mode为remote时displayField为undefine,当select列表时displayField为"text"
mode:
'local',//因为data已经取数据到本地了,所以'local',默认为"remote",枚举完
emptyText:
'请选择一个省份...',
applyTo:
'combo'
});
我们可以给combo添加listeners事件:
//ComboBox的事件很多(api),我们无法一一讲解,但是我们可以举一反三,select事件就是其中典型的一个
listeners:
{
"select":
function(){
alert(Ext.get("combo").dom.value); //获取id为combo的值
}
}
把Extjs的ComboBox样式应用到select的下拉框中去
核心参数介绍
//js代码
var ExtSelect=new Ext.form.ComboBox({
transform:
"select",//html中的id
width:
80//宽度
});
//html代码
//是不是超级简单?
transform:
id//用于转换样式的,TimeField作为ComboBox的子类也有此属性
1.valueField:
"valuefield"//value值字段
2.displayField:
"field" //显示文本字段
3.editable:
false//false则不可编辑,默认为true
4.triggerAction:
"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项
5.hiddenName:
string //真正提交时此combo的name,请一定要注意
6.typeAhead:
true,//延时查询,与下面的参数配合
7.typeAheadDelay:
3000,//默认250
ComboBox的其他重要参数
3.其他组件示例
1.checkbox简单示例
Ext.onReady(function(){
var myform=new Ext.FormPanel({
frame:
true,
width:
330,
layout:
"form",
labelWidth:
30,
title:
"checkbox简单示例",
labelAlign:
"left",
renderTo:
Ext.getBody(),
items:
[{
xtype:
"panel",
layout:
"column",//也可以是table,实现多列布局
fieldLabel:
'爱好',
isFormField:
true,//非常重要,否则panel默认不显示fieldLabel
items:
[{
columnWidth:
.5,//宽度为50%
xtype:
"checkbox",
boxLabel:
"足球",//显示在复选框右边的文字
name:
""
},{
columnWidth:
.5,
xtype:
"checkbox",
boxLabel:
"篮球",
name:
""
}]
}]
});
});
checkbox几个常见参数:
checked
值为true表示初始状态为已选,false则表示未选,默认值是false
disabled
值为true表示初始状态为禁止使用,false则表示可以使用,默认值是false
labelSeparator
标签分隔符
inputValue
Checkbox的实际提交值。
如果不设置该值,无论value设置为什么值,Checkbox提交值都为“on”
name
控件名称
readOnly
值为true则表示初始状态为只读,false则表示可写,默认值为false
CheckboxSelectionModel
多选框
RowNumberer
编号
2.
items:
[{
columnWidth:
.5,
xtype:
"radio",
boxLabel:
"男",
name:
"sex"
//inputValue
},{
columnWidth:
.5,
checked:
true,
xtype:
"radio",
boxLabel:
"女",
name:
"sex"
}]
radio简单示例
基本上和checkbox一样,不过注意一组单选框必须name值相同,才能单选。
3.
//基本上同上
Ext.onReady(function(){
var myform=new Ext.FormPanel({
frame:
true,
width:
600,
layout:
"form",
labelWidth:
50,
title:
"htmleditor简单示例",
labelAlign:
"top",//指form表单中items各项的label位置,默认值为left,枚举值有left,right,top
renderTo:
Ext.getBody(),
items:
[{
xtype:
"htmleditor",
id:
"he",
fieldLabel:
"编辑器",
anchor:
"99%"
}]
});
});
htmleditor简单示例
几个其他的参数:
1.hideLabel:
true//默认为false,还适用于有标签的所有表单组件
//下面的一组参数控制编辑器的工具栏选项,都是默认值为true
2.enableColors:
true//默认为true,显示字体颜色,字体背景颜色
3.enableAlignments:
true//左,中,右对齐
4.enableFont:
true//字体
5.enableFontSize:
false//字体大小,就是A旁边有个小箭头的
6.enableFormat:
false//粗体,斜体,下划线
7.enableLinks:
true//链接
8.enableLists:
true//列表
9.enableSourceEdit:
true//源代码编辑
4.datefield简单示例
效果图:
Ext.onReady(function(){
var myform=new Ext.FormPanel({
frame:
true, width:
200,
layout:
"form",
labelWidth:
30,
title:
"dateditor简单示例",
labelAlign:
"left",
renderTo:
Ext.getBody(),
items:
[{
xtype:
"datefield",
fieldLabel:
"生日",
anchor:
"99%"
}]
});
});
5.timefield简单示例
把上面的例子中datefield改为timefield,效果图:
6.numberfield简单示例:
把上面的datefield改为numberfield,就只能输入数字了
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第6章 EXTForm应用 EXTForm 应用