包括普通文本框,数字框,日期,radio,checkbox等
Ext.onReady(function(){
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
title:'form示例',
labelAlign:'right',//右对齐
labelWidth:70,
frame:true,
width:600,
height:500,
items:[{
layout:"column",
items:[{
xtype:'fieldset',
columnWidth:.7,//列布局中占70%列宽
checkboxToggle:true,//在框中打钩则显示
title:'输入',
defaults:{width:300},//items中各个框的默认宽度
// defaultType:'textfield',//默认类型
items:[{
xtype:"textfield",
fieldLabel:"文本",
name:'text'
},{
xtype:"numberfield",
fieldLabel:"数字",
name:'number'
},{
xtype:"combo",
fieldLabel:"选择",
emptyText:"--请选择--",
displayField:'text',
valueField:"value",
mode:'local',
triggerAction:'all',
editable:false,
store:new Ext.data.SimpleStore({
fields:['text','value'],
data:[['text1','value1'],['text2','value2']]
}),
name:'combo'
},{
xtype:"datefield",
fieldLabel:"日期",
name:'date'
},{
xtype:"timefield",
fieldLabel:"时间",
name:'time'
},{
xtype:"textarea",
fieldLabel:"多行文本",
height:80,
name:'area'
},{
xtype:'hidden',
name:'hidden'
}]
},{
columnWidth:.3,
items:[{
xtype:'fieldset',
checkboxToggle:true,
title:'多选',
hideLabels: true,
style:'margin-left:10px;',
bodyStyle:'margin-left:20px',
items:[{
xtype:'checkboxgroup',
defaultType:'checkbox',
columns:1,
items:[{
boxLabel:'埃尔伯',
value:'1',
name:'check'
},{
boxLabel:'马凯',
value:'2',
name:'check'
},{
boxLabel:'托尼',
value:'3',
name:'check'
},{
boxLabel:'戈麦斯',
value:'4',
name:'check',
checked:true
},]
}]
},{
xtype:'fieldset',
title:'单选',
checkboxToggle:true,
hideLabels: true,
style:'margin-left:10px;',
bodyStyle:'margin-left:20px',
items:[{
xtype:'radiogroup',
columns:1,
defaultType:'radio',
items:[{
boxLabel:'里贝里',
name:'player'
},{
boxLabel:'罗本',
checked:true,
name:'player'
},]
}]
}]
}]
},{
layout:'form',
labelAlign:'top',
items:[{
xtype:'htmleditor',
fieldLabel:'编辑器',
anchor:'95%'//占据宽度
}]
}],
buttons:[{text:'保存'},{text:'读取'},{text:'取消'},]
});
});
效果图如下:
分享到:
相关推荐
8.2 Form表单组件 226 8.2.1 DisplayField控件 226 8.2.2 在FormPanel中使用TabPanel 229 8.2.3 DirectLoad与DirectSubmit 232 8.2.4 使用DirectSubmit上传文件 235 8.3 Grid组件 238 8.3.1 一个结合DataWrite和...
8.4.1 组件管理及查询:ext.componentmanager与ext.componentquery / 423 8.4.2 焦点管理:ext.focusmanager / 424 8.4.3 z-order管理:ext.zindexmanager与ext.windowmanager / 425 8.4.4 状态管理:ext.state....
7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext....
使用TYPO3表单框架的示例 此TYPO3扩展附带了TYPO3表单框架的一些示例。 由于TYPO3版本之间的某些配置已更改,因此您可以在此处选择此扩展的兼容版本: 要立即使用,此扩展还附带必需的YAML和TypoScript设置,以及...
7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext.form.TextArea 7.2.3 单选框 7.2.4 复选框 7.2.5 下拉列表框 7.2.6 日期输入控件Ext....
在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...
TYPO3表格分发 此TYPO3扩展可以用作入门工具包,以基于TYPO3表单框架的自定义模板配置单个表单。...一个新的Form原型,以允许自定义表单模板 可以在以下位置找到更多示例(上传表单,自定义电子邮件模板等): :
-增加示例:form/form_validate.aspx +2009-10-19 v2.1.3 +增加支持在AJAX时改变的控件属性列表(/ajax.aspx)。 -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是...
-增加示例:form/form_validate.aspx +2009-10-19 v2.1.3 +增加支持在AJAX时改变的控件属性列表(/ajax.aspx)。 -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是...
其源代码可免费检查和检查是否没有恶意软件或危险代码,并且从未通过网络传输任何数据:https://github.com/LucianoBestia/efrro_form_c_chrome_ext此Chrome扩展程序仅执行一项事:它以JSON格式提供的数据填充表单。...