4章：Ext.form.Basic 基本表單組件一
圖片html
<div id="myForm" class="w_320"> <h2>展現不一樣位置的字段提示信息</h2> <span id="myErrorMsg"></span> </div> <div id="loginForm" class="w_320"> <h2>登陸表單案列text</h2> </div> <div id="textAreaForm" class="w_320"> <h2>登陸表單案列textArea</h2> </div> <div id="numberForm" class="w_320"> <h2>登陸表單案列numberForm</h2> </div> <div id="radioCheckboxForm" class="w_320"> <h2>登陸表單案列radioCheckboxForm</h2> </div> <div id="radioCheckboxGroupForm" class="w_320"> <h2>單選多選橫排演示</h2> </div> <div id="triggerForm" class="w_320"> <h2>表單觸發字段(5.0被棄用)</h2> </div> <div id="textTriggerForm" class="w_320"> <h2>表單觸發(配置)(6.0使用)</h2> </div>
Ext.onReady(function(){
//Ext表單
//Ext.form.Basic 基本表單組件
//開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
//與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
//1.提交方式(同步---異步)
//2.表單驗證(須要手動驗證----配置便可使用)
//3.表單組件(基本的組件------擴展的功能強大的組件)
//1、展現不一樣位置的字段提示信息
//1.初始化信息提示功能
Ext.QuickTips.init();
//2.建立表單面板
var form = new Ext.form.Panel({
title : '用戶信息',//標題
width : 200,
height : 160,
frame : true,//是否渲染表單
renderTo : 'myForm',//顯示在id爲myForm的元素內
defaults : {//統一設置表單字段默認屬性
//autoFitErrors : false ,//展現錯誤信息是是否自動調整字段組件的寬度(6.0版本中驗證器會自動調整)
labelSeparator : ' : ',//分隔符
labelWidth : 50,//標籤寬度
width : 150,//字段寬度
allowBlank : false,//是否容許爲空
blankText : '不容許爲空',
labelAlign : 'right',//標籤對齊方式
//msgTarget的值:
//'qtip'(顯示一個浮動的提示信息)
//'title'(顯示一個瀏覽器原始的浮動的提示信息)
//'under'(在字段下方顯示一個提示信息)(須要調整表單的高度)
//'side'(在字段右邊顯示一個提示信息)
//'none'(不顯示提示信息)
//'errorMsg'(在myErrorMsg(id自定義)元素內顯示提示信息)
msgTarget : 'side'
},
items : [{
xtype : 'textfield',
fieldLabel : '姓名'
},{
xtype : 'numberfield',
fieldLabel : '年齡'
}]
});
//2、登陸表單示例loginForm Ext.form.field.Text
var loginForm = new Ext.form.Panel({
title : 'Ext.form.field.Text示例',
bodyStyle : 'background:#F1F1F1;padding:5px',//表單邊框
frame : true,
width : 250,
height : 160,
renderTo : 'loginForm',
defaultType : 'textfield',//設置表單字段的默認類型
defaults : {
labelSeparator : ': ',//分隔符
labelWidth : 50,
width : 150,
allowBlank : false,
labelAlign : 'right',
msgTarget : 'side'
},
items : [{
name : 'userName',
fieldLabel : '用戶名',
selectOnFocus : true,//獲得焦點自動選擇文本
regex : /^([\w]+)(.[\w+])*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,//;
regexText : '郵箱格式錯誤!'
},{
name : 'password',
fieldLabel : '密碼',
inputType : 'password'//設置輸入類型
}],
buttons : [{
text : '登陸',
handler : function(){
loginForm.form.setValues({
userName : 'user@com',
password : '123456'
});
//獲取表單所有值的JSON對象
console.info(loginForm.getForm().getValues());
}
}]
});
//3、文本輸入框示例textAreaForm Ext.form.field.TextArea
var textAreaForm = new Ext.form.Panel({
title : 'Ext.form.field.TextArea案列',
width : 250,
height : 160,
renderTo : 'textAreaForm',
frame : true,
bodyStyle : 'padding:5px',
items : [{
xtype : 'textarea',
fieldLabel : '備註',
id : 'memo',//字段組件id,一會取值用
name : 'otherInfo',
labelSeparator : ': ',
labelWidth : 60,
width : 200,
allowBlank : false,
labelAlign : 'right',
msgTarget : 'side'
}],
buttons : [{
text : '肯定',
handler : showValue
}]
});
function showValue(){
var memo = textAreaForm.getForm().findField('memo');//取的輸入控件
//獲取單個字段的值
console.info(memo.getValue());
//獲取表單所有值的JSON對象
console.info(textAreaForm.getForm().getValues());
}
//4、數字輸入框Ext.form.field.Number
var numberForm = new Ext.form.Panel({
title : 'Ext.form.field.Number示例',
width : 250,
height : 160,
renderTo : 'numberForm',
frame : true,
bodyStyle : 'padding:5px',
defaultType : 'numberfield',
//統一設置默認屬性
defaults : {
width : 200,//字段寬度
labelWidth : 80,
labelSeparator : ': ',
labelAlign : 'left',
msgTarget : 'side'
},
items : [{
fieldLabel : '整數',
hideTrigger : true,//隱藏微調按鈕
allowDecimals : false,//不容許輸入小數
nanText : '請輸入有效的整數'//無效數字提示
},{
fieldLabel : '小數',
decimalPrecision : 2,//精確到小數點後2位
allowDecimals : true,//容許輸入小數
nanText : '請輸入有效的小數'
},{
fieldLabel : '數字限制',
hideTrigger : true,//隱藏微調按鈕
baseChars : '12345'//輸入數字範圍
},{
fieldLabel : '數值限制',
minValue : 50,
maxValue : 100
}]
});
//5、單選框Ext.form.field.Radio 複選框Ext.form.field.Checkbox
var radioCheckboxForm = new Ext.form.Panel({
title : '單/多選框Ext.form.field.Radio/Checkbox',
width : 250,
height: 210,
renderTo : 'radioCheckboxForm',
bodyStyle : 'padding:5px',
frame : true,
defaults : {
width : 200,
labelSeparator : ': ',
labelWidth : 80,
labelAlign : 'left'
},
items : [{
name : 'sex',//名字相同的單選框會做爲一組
fieldLabel : '性別',
xtype : 'radio',
boxLabel : '男'
},{
name : 'sex',
fieldLabel : ' ',
labelSeparator : '',
xtype : 'radio',
boxLabel : '女'
},{
name : 'swim',
fieldLabel : '愛好',
xtype : 'checkboxfield',
boxLabel : '游泳'
},{
name : 'walk',
fieldLabel : ' ',
labelSeparator : '',
xtype : 'checkboxfield',
boxLabel : '散步'
},{
name : 'smoke',
fieldLabel : ' ',
labelSeparator : '',
xtype : 'checkboxfield',
boxLabel : '抽菸'
}],
buttons : [{
text : '肯定' , handler : showRadioCheckValue
}]
});
//回調函數
function showRadioCheckValue(){
console.info(radioCheckboxForm.getForm().getValues());
}
//6、單選框,複選框橫排顯示
var radioCheckboxGroupForm = new Ext.form.Panel({
title : '單選框複選框橫排顯示',
width : 270,
height : 210,
renderTo : 'radioCheckboxGroupForm',
frame :true,
bodyStyle : 'padding:5px',
defaults : {
width : 200,
labelSeparator : ': ',
labelWidth : 50,
labelAlign : 'left'
},
items : [{
fieldLabel : '性別',
xtype : 'radiogroup',
columns : 2,//2列
items : [{
name : 'sex',
boxLabel : '男',
inputValue : 'male'
},{
name : 'sex',
boxLabel : '女',
inputValue : 'female'
}]
},{
fieldLabel : '愛好',
xtype : 'checkboxgroup',
columns : 3,
/*items : [{
name : 'swim',
boxLabel : '游泳',
inputValue : 0
},{
name : 'walk',
boxLabel : '散步',
inputValue : 1
},{
name : 'read',
boxLabell : '閱讀',
inputValue : 2
},{
name : 'game',
boxLabel : '遊戲',
inputValue : 3
},{
name : 'movie',
boxLabel : '電影',
inputValue : 4
}]*/
items : [{
name : 'love',
boxLabel : '游泳',
inputValue : 'swim'
},{
name : 'love',
boxLabel : '散步',
inputValue : 'walk'
},{
name : 'love',
boxLabell : '閱讀',
inputValue : 'read'
},{
name : 'love',
boxLabel : '遊戲',
inputValue : 'game'
},{
name : 'love',
boxLabel : '電影',
inputValue : 'movie'
}]
}],
buttons : [{
text : '肯定' , handler : showRadioCheckGroupValue
}]
});
//回調函數
function showRadioCheckGroupValue(){
console.info(radioCheckboxGroupForm.getForm().getValues());
}
//7、觸發字段Ext.form.field.Trigger(擴展自:Text)
//5.0被棄用,改用Text加triggers配置
/*var triggerForm = new Ext.form.Panel({
title : '',
width : 270,
height : 100,
renderTo : 'triggerForm',
frame : true,
bodyStyle : 'padding:5px',
defaults : {
width : 200,
labelSeparator : ': ',
labelWidth : 70,
labelAlign : 'left'
},
items : [{
name : 'triggerName',
id : 'triggerId',
fieldLabel : '觸發字段',
xtype : 'triggerfield',
hideTrigger : false,
onTriggerClick : function(){
var triggerId = triggerForm.getForm().findField("triggerId");
console.info(triggerId.getValue());
Ext.getCmp("triggerId").setValue("test");
}
}]
});*/
//6.0使用
var textTriggerForm = new Ext.form.Panel({
title : 'textTriggerForm配置觸發',
width : 270,
height : 100,
renderTo : 'textTriggerForm',
frame : true,
bodyStyle : 'padding:5px',
defaults : {
width : 200,
labelSeparator : ': ',
lableWidth : 70,
labelAlign : 'left'
},
items : [{
id : 'textTriggerId',
name : 'textTriggerName',
fieldLabel : '觸發配置',
xtype : 'textfield',
triggers: {
one: {
cls: 'myOneCls',
handler: function() {
console.log('one trigger clicked');
}
},
two: {
cls: 'myTwoCls',
handler: function() {
console.log('two trigger clicked');
}
},
three: {
cls: 'myThreeCls',
handler: function() {
console.log('three trigger clicked');
}
}
}
}]
});
});
相關文章
- 1. 基本文本組件（一）
- 2. 第4章常用組件-長列表組件
- 3. 10、基礎組件 —— 表單驗證
- 4. Netty（一）--基本組件
- 5. antd table表格組件基本使用
- 6. 表單及表單控件詳解一(表單佈局和基礎控件 Text,TextArea,Number,Checkbox,Radio,Date)
- 7. 第4章 表
- 8. Angular2組件開發—表單輸入（一）
- 9. Ant-Design-組件-——-Form表單（一）
- 10. Ant-Design-組件-——-Form表單（一）.md
- 更多相關文章...
- • Thymeleaf表單 - Thymeleaf 教程
- • Swift 基本語法 - Swift 教程
- • Kotlin學習（一）基本語法
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
