<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.form.Panel',{
renderTo:'formDiv',
fieldLabel: 'Text Area',
// html:'content',
width:600,
items:[{
//textfield文本域,只能输入一行文本
xtype:'textfield',
//文本域名称
fieldLabel:'文本域'
},{
//文本区域,可以输入多行文本
xtype:'textarea',
fieldLabel:'文本区域'
},{
//显示文本字段,值用value属性
xtype:'displayfield',
fieldLabel:'显示文本字段',
value:'字段值'
},{
xtype:'datefield',
fieldLabel:'日期字段'
},{
xtype:'button',
text:'button',
fieldLabel:'button按钮'
},{
xtype:'fieldcontainer',
fieldLabel:'Radio field',
defaultType:'radiofield',
defaults:{
flex:1
},
layout:'hbox',
items:[{
boxLabel:'A',
inputValue:'a',
id:'rado1'
},{
boxLabel:'B',
inputValue:'b',
id:'radio2'
},{
boxLabel:'C',
inputValue:'c',
id:'radio3'
}]
},{
xtype:'fieldcontainer',
fieldLabel:'checkbox',
defaultType:'checkboxfield',
defaults:{
flex:1
},
layout:'hbox',
items:[{
id:'box1',
boxLabel:'HTML',
inputValue:'html',
checked:true
},{
id:'box2',
inputValue:'js',
boxLabel:'JS'
},{
id:'box3',
inputValue:'css',
boxLabel:'CSS'
}]
}]
});
});
</script>
</head>
<body>
<div id="formDiv"></div>
</body>
</html>