免費(fèi)AI編程助手
Ext.js 表單
描述
形式：在大多數(shù)Web應(yīng)用程序表單是最重要的小部件從用戶獲取信息，如登錄表單/反饋表單，以便該值可以保存在數(shù)據(jù)庫(kù)中，以供將來(lái)參考。窗體小部件用于此目的。
在創(chuàng)建表單之前，我們應(yīng)該知道xtype。
xType定義Ext JS UI組件的類型，它在組件的渲染期間確定，例如元素可以是一個(gè)文本框，對(duì)于該文本框我們有xType作為textField，或者元素可以只有數(shù)值，我們有Numeric xType。
不同類型的xType：
文本域此xType表示用戶可以輸入值的文本字段。 文本框的Ext JS類是“Ext.Form.Field.Text”
{
xtype: 'textfield',
fieldLabel: 'Text field'
} 這是為了表示一個(gè)文本區(qū)域。 Ext JS類為“Ext.form.field.TextArea”
{
xtype: 'textarea',
fieldLabel: 'Text Area'
}這是為了表示一個(gè)顯示文本字段。 Ext JS類為“Ext.form.Label”
{
xtype: 'displayfield',
fieldLabel: 'Display Field''
}這是為了表示一個(gè)日期字段，它具有日期選擇器來(lái)選擇日期。 Ext JS類為“Ext.form.field.Date”
{
xtype: 'datefield',
fieldLabel: 'Date picker'
}這是一個(gè)按鈕。 Ext JS類為“Ext.button.Button”
{
xtype: 'button',
text : 'Button'
}這是一個(gè)單選按鈕，我們可以在所有單選按鈕中選擇任何一個(gè)，或者可以自定義一次選擇多個(gè)。 Ext JS類為“Ext.form.field.Radio”。
{
xtype : 'fieldcontainer',
fieldLabel : 'Radio field',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel : 'A',
inputValue: 'a',
id : 'radio1'
},{
boxLabel : 'B',
inputValue: 'b',
id : 'radio2'
},{
boxLabel : 'C',
inputValue: 'c',
id : 'radio3'
}]
}這是一個(gè)復(fù)選框字段，我們可以一次選擇多個(gè)值。 Ext JS類為“Ext.form.field.Checkbox”
{
xtype: 'fieldcontainer',
fieldLabel: 'Check Box Field',
defaultType: 'checkboxfield',
items: [{
boxLabel : 'HTML',
inputValue: 'html',
id : 'checkbox1'
},{
boxLabel : 'CSS',
inputValue: 'css',
checked : true,
id : 'checkbox2'
},{
boxLabel : 'JavaScript',
inputValue: 'js',
id : 'checkbox3'
}]
}這是一個(gè)組合框。 組合框包含項(xiàng)目列表。 Ext JS類為“Ext.form.field.ComboBox”
{
xtype : 'combobox',
fieldLabel: 'Combo box',
store: store,
valueField: 'name'
}
// store for drop down values
var store = Ext.create('Ext.data.Store', {
id : 'statesid',
fields: ['abbr', 'name'],
data : [
{"abbr":"HTML", "name":"HTML"},
{"abbr":"CSS", "name":"CSS"},
{"abbr":"JS", "name":"JavaScript"}
]
});這是為了表示一個(gè)時(shí)間字段，其中可以預(yù)定義最大和最小時(shí)間值。 Ext JS類為“Ext.form.field.Time”
{
xtype: 'timefield',
fieldLabel: 'Time field',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
}這是一個(gè)文件上傳字段，我們可以瀏覽和上傳文件。 Ext JS類為“Ext.form.field.File”
{
xtype: 'filefield',
fieldLabel: 'File field',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select File...'
}這是一個(gè)微調(diào)字段，其中列表可以旋轉(zhuǎn)和添加。 Ext JS類為“Ext.form.field.Spinner”
{
xtype: 'spinnerfield',
fieldLabel: 'Spinner field'
}這是為了表示一個(gè)數(shù)字字段，其中我們可以預(yù)先定義max和min值。 Ext JS類為“Ext.form.field.Number”
{
xtype: 'numberfield',
anchor: '100%',
fieldLabel: 'Numeric field',
maxValue: 99,
minValue: 0
}作為名稱解釋這個(gè)xtype是保持值隱藏。
{
xtype: 'hiddenfield',
value: 'value from hidden field'
}下面是創(chuàng)建表單的簡(jiǎn)單語(yǔ)法
Ext.create('Ext.form.Panel');
下面是一個(gè)簡(jiǎn)單的例子，顯示所有xtype的形式。
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
id: 'newForm',
renderTo: 'formId',
border: true,
width: 600,
items: [{
xtype: 'textfield',
fieldLabel: 'Text Field'
},{
xtype: 'displayfield',
fieldLabel: 'Display Field'
},{
xtype: 'textarea',
fieldLabel: 'Text Area'
},{
xtype: 'datefield',
fieldLabel: 'Date picker'
},{
xtype: 'button',
text: 'Button'
},{
xtype: 'fieldcontainer',
fieldLabel: 'Radio field',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel: 'A',
inputValue: 'a',
id: 'radio1'
},{
boxLabel: 'B',
inputValue: 'b',
id: 'radio2'
},{
boxLabel: 'C',
inputValue: 'c',
id: 'radio3'
}]
},{
xtype: 'fieldcontainer',
fieldLabel: 'Check Box Field',
defaultType: 'checkboxfield',
items: [{
boxLabel: 'HTML',
inputValue: 'html',
id: 'checkbox1'
},{
boxLabel: 'CSS',
inputValue: 'css',
checked: true,
id: 'checkbox2'
},{
boxLabel: 'JavaScript',
inputValue: 'js',
id: 'checkbox3'
}]
},{
xtype: 'hiddenfield',
name: 'hidden field ',
value: 'value from hidden field'
},{
xtype: 'numberfield',
anchor: '100%',
fieldLabel: 'Numeric Field',
maxValue: 99,
minValue: 0
},{
xtype: 'spinnerfield',
fieldLabel: 'Spinner Field',
step: 6,
// override onSpinUp (using step isn't neccessary)
onSpinUp: function() {
var me = this;
if (!me.readOnly) {
var val = me.step; // set the default value to the step value
if(me.getValue() !== '') {
val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
}
me.setValue((val + me.step) + ' Pack');
}
},
// override onSpinDown
onSpinDown: function() {
var me = this;
if (!me.readOnly) {
if(me.getValue() !== '') {
val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
}
me.setValue((val - me.step) + ' Pack');
}
}
},{
xtype: 'timefield',
fieldLabel: 'Time field',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
},{
xtype: 'combobox',
fieldLabel: 'Combo Box',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'HTML',
'name': 'HTML'
},{
'abbr': 'CSS',
'name': 'CSS'
},{
'abbr': 'JS',
'name': 'JavaScript'
}]
}),
valueField: 'abbr',
displayField: 'name'
},{
xtype: 'filefield',
fieldLabel: 'File field',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select File...'
}]
});
});
</script>
</head>
<body>
<div id = "formId"></div>
</body>
</html>運(yùn)行結(jié)果如下：
更多建議：