<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://cdn.bootcss.com/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/extjs/6.0.0/ext-all.js"></script>
<style>
</style>
</head>
<body>
<div id="helloWorldPanel"></div>
</body>
<script type="text/javascript">
Ext.onReady(function() {
var genderStore = Ext.create("Ext.data.Store", {
fields: ["Name", "Value"],
data: [{
Name: "男",
Value: 1
}, {
Name: "女",
Value: 2
}]
});
var form = Ext.create("Ext.form.FormPanel", {
layout: "column",
title: "用户信息",
border: false,
margin: "10",
width: 800,
defaultType: "textfield",
fieldDefaults: {
labelAlign: 'right',
labelWidth: 80,
margin: "5 0",
columnWidth: 0.3,
msgTarget: "qtip",
selectOnFocus: true
},
items: [{
name: "UserName",
fieldLabel: "姓名",
allowBlank: false
}, {
xtype: "combobox",
name: "Gender",
fieldLabel: "性别",
store: genderStore,
editable: false,
displayField: "Name",
valueField: "Value",
emptyText: "--请选择--",
queryMode: "local"
}],
renderTo: Ext.getBody()
});
});
</script>
</html>
