Extjs4——表單與輸入控件
阿新 • • 發佈：2017-09-16
sel incr () 高度 add eset 自動 extjs 函數
1.表單的簡單形式：
var form = new Ext.form.FormPanel({ title: ‘form‘, defaultType: ‘textfield‘, buttonAlign: ‘center‘, frame: true, width: 220, fieldDefaults: { labelAlign: ‘right‘, labelWidth: 70 }, items: [{ fieldLabel:‘文本框‘ }], buttons: [{ text: ‘按鈕‘ }] }); form.render("form");
效果如下：
2.Ext中的輸入控件：
Ext中提供的包括的控件及其繼承關系如下圖：
2.1 基本輸入控件Ext.form.Field:
Field中定義了輸入控件通用的屬性和功能函數,它們大致分為三類：
// HtmlEditor需要這個 Ext.tip.QuickTipManager.init(); var field1 = newExt.form.TextField({ fieldLabel: ‘qtip‘, msgTarget: ‘qtip‘, allowBlank: false }); var field2 = new Ext.form.TextField({ fieldLabel: ‘title‘, msgTarget: ‘title‘, allowBlank: false }); var field3 = new Ext.form.TextField({ fieldLabel:‘side‘, msgTarget: ‘side‘, allowBlank: false }); var field4 = new Ext.form.TextField({ fieldLabel: ‘under‘, msgTarget: ‘under‘, allowBlank: false }); var form = new Ext.form.FormPanel({ title: ‘form‘, frame: true, items: [field1, field2, field3, field4], renderTo: ‘form‘ }); form.getForm().isValid();
2.2 文本輸入控件Ext.form.TextField:
除了Ext.form.Field提供的通用功能和屬性外，TextField還可以檢測輸入的數據是否為空和輸入內容的最大及最小長度
// HtmlEditor需要這個 Ext.QuickTips.init(); var field = new Ext.form.TextField({ fieldLabel: ‘empty‘, allowBlank: false, emptyText: ‘空‘, maxLength: 50, minLength: 10 }); var form = new Ext.form.FormPanel({ title: ‘form‘, frame: true, items: [field], renderTo: ‘form‘ }); });
效果如下：
2.3 多行文本輸入控件Ext.form.TextArea
// HtmlEditor需要這個 Ext.QuickTips.init(); var field = new Ext.form.TextArea({ width: 200, grow: true,
//grow設為true時，多行文本框會根據輸入內容自動修改高度，而Ext.form.TextFiel會自動修改寬度 preventScrollbars: true,
//防止出現滾動條 fieldLabel: ‘empty‘, allowBlank: false, emptyText: ‘空‘, maxLength: 50, minLength: 10, value: ‘第一行\n第二行\n第三行\n第四行‘ }); var form = new Ext.form.FormPanel({ title: ‘form‘, frame: true, items: [field], renderTo: ‘form‘ });
2.4 日期輸入控件Ext.form.DateField:
var field = new Ext.form.DateField({ fieldLabel: ‘日期‘, emptyText: ‘請選擇‘, format: ‘Y-m-d‘, disabledDays: [0,6]//禁止選星期六和星期日 });
2.5 時間輸入控件Ext.form.TimeField:
var field = new Ext.form.TimeField({ fieldLabel: ‘時間‘, emptyText: ‘請選擇‘, minValue: ‘10:00 AM‘, maxValue: ‘2:00 PM‘, increment: 30 //時間間隔 });
2.6 在線編輯器Ext.form.HtmlEditor:
通過enable選項啟用或禁用對應的功能按鈕
var field = new Ext.form.HtmlEditor({ fieldLabel: ‘在線編輯器‘, enableAlignments: true, enableColors: true, enableFont: true, enableFontSize: true, enableFormat: true, enableLinks: true, enableLists: true, enableSourceEdit: true, fontFamilies: [‘宋體‘, ‘黑體‘] });
效果如下:
2.7 隱藏域ext.form.Hidden:
隱藏域ext.form.Hidden直接繼承自Ext.form.Field,可以通過setValue（）和getValue（）函數對它執行賦值和取值操作，但她不會顯示在頁面上。
var field = new Ext.form.Hidden({ name: ‘hiddenId‘ }); field.setValue("some thing"); var value = field.getValue(); var form = new Ext.form.FormPanel({ title: ‘form‘, frame: true, items: [field], renderTo: ‘form‘ });
2.8 復選框（Checkbox)和單選按鈕（radio）：
2.8.1 復選框：
boxLabel是Checkbox和Radio兩個控件獨有的。
var form = new Ext.form.FormPanel({ labelAlign: ‘right‘, title: ‘form‘, labelWidth: 50, buttonAlign: ‘center‘, frame:true, url: ‘form2.jsp‘, width: 280, items: [{ xtype: ‘fieldset‘, title: ‘多選‘, autoHeight:true, defaultType: ‘checkbox‘, hideLabels: true, items: [ {boxLabel: ‘多選一‘, inputValue: ‘1‘, checked: true}, {boxLabel: ‘多選二‘, inputValue: ‘2‘}, {boxLabel: ‘多選三‘, inputValue: ‘3‘}//inputValue來指定這三個CheckBox的值，以來區分它們 ] }], buttons: [{ text: ‘提交‘, handler: function() { form.getForm().submit(); } }] }); form.render("form");
2.8.2 單選按鈕：
Ext中的單選按鈕繼承自復選框，radio有一個自己獨有的getGroupValue（）函數，可以用來或得某個分組中被選中的Radio的值
var form = new Ext.form.FormPanel({ labelAlign: ‘right‘, title: ‘form‘, labelWidth: 50, buttonAlign: ‘center‘, frame:true, url: ‘form2.jsp‘, width: 280, items: [{ xtype: ‘fieldset‘, title: ‘單選‘, autoHeight:true, defaultType: ‘radio‘, hideLabels: true, items: [ {boxLabel: ‘單選一‘, name: ‘radio‘, inputValue: ‘1‘, checked: true}, {boxLabel: ‘單選二‘, name: ‘radio‘, inputValue: ‘2‘}, {boxLabel: ‘單選三‘, name: ‘radio‘, inputValue: ‘3‘} ] }], buttons: [{ text: ‘提交‘, handler: function() { form.getForm().submit(); } }, { text: ‘getGroupValue‘, handler: function() { Ext.Msg.alert(‘信息‘, form.getForm().findField(‘radio‘).getGroupValue()); } }] }); form.render("form");
點擊getGroupValue後的效果：
2.8.3 CheckBoxGroup和RadioGroup控件
有了這兩個控件，我們就可以為復選框和單選按鈕控件實現各種復雜的排列方式了,默認橫向排列方式，可以通過設置column屬性來設置按列（一列或多列）排列，還可以自定義多列排列。
var form = new Ext.form.FormPanel({ title: ‘radio group‘, frame: true, width: 600, items: [{ xtype: ‘radiogroup‘, fieldLabel: ‘自動布局‘, items: [ {boxLabel: ‘Item 1‘, name: ‘cb-auto-1‘}, {boxLabel: ‘Item 2‘, name: ‘cb-auto-2‘, checked: true}, {boxLabel: ‘Item 3‘, name: ‘cb-auto-3‘}, {boxLabel: ‘Item 4‘, name: ‘cb-auto-4‘}, {boxLabel: ‘Item 5‘, name: ‘cb-auto-5‘} ] },{ xtype: ‘radiogroup‘, fieldLabel: ‘單列‘, itemCls: ‘x-check-group-alt‘, columns: 1, items: [ {boxLabel: ‘Item 1‘, name: ‘cb-col-1‘}, {boxLabel: ‘Item 2‘, name: ‘cb-col-2‘, checked: true}, {boxLabel: ‘Item 3‘, name: ‘cb-col-3‘} ] },{ xtype: ‘radiogroup‘, fieldLabel: ‘多列（水平）‘, columns: 3, items: [ {boxLabel: ‘Item 1‘, name: ‘cb-horiz-1‘}, {boxLabel: ‘Item 2‘, name: ‘cb-horiz-2‘, checked: true}, {boxLabel: ‘Item 3‘, name: ‘cb-horiz-3‘}, {boxLabel: ‘Item 4‘, name: ‘cb-horiz-4‘}, {boxLabel: ‘Item 5‘, name: ‘cb-horiz-5‘} ] },{ xtype: ‘radiogroup‘, fieldLabel: ‘多列（豎直）‘, itemCls: ‘x-check-group-alt‘, columns: 3, vertical: true, items: [ {boxLabel: ‘Item 1‘, name: ‘cb-vert-1‘}, {boxLabel: ‘Item 2‘, name: ‘cb-vert-2‘, checked: true}, {boxLabel: ‘Item 3‘, name: ‘cb-vert-3‘}, {boxLabel: ‘Item 4‘, name: ‘cb-vert-4‘}, {boxLabel: ‘Item 5‘, name: ‘cb-vert-5‘} ] },{ xtype: ‘radiogroup‘, fieldLabel: ‘多列<br />（自定義）‘, columns: [100, 100], vertical: true, items: [ {boxLabel: ‘Item 1‘, name: ‘cb-custwidth‘, inputValue: 1}, {boxLabel: ‘Item 2‘, name: ‘cb-custwidth‘, inputValue: 2, checked: true}, {boxLabel: ‘Item 3‘, name: ‘cb-custwidth‘, inputValue: 3}, {boxLabel: ‘Item 4‘, name: ‘cb-custwidth‘, inputValue: 4}, {boxLabel: ‘Item 5‘, name: ‘cb-custwidth‘, inputValue: 5} ] },{ xtype: ‘radiogroup‘, itemCls: ‘x-check-group-alt‘, fieldLabel: ‘自自定義布局‘, allowBlank: false, anchor: ‘95%‘, items: [{ columnWidth: ‘.25‘, items: [ {xtype: ‘label‘, text: ‘Heading 1‘, cls:‘x-form-check-group-label‘, anchor:‘-15‘}, {boxLabel: ‘Item 1‘, name: ‘cb-cust-1‘}, {boxLabel: ‘Item 2‘, name: ‘cb-cust-2‘} ] },{ columnWidth: ‘.5‘, items: [ {xtype: ‘label‘, text: ‘Heading 2‘, cls:‘x-form-check-group-label‘, anchor:‘-15‘}, {boxLabel: ‘A long item just for fun‘, name: ‘cb-cust-3‘} ] },{ columnWidth: ‘.25‘, items: [ {xtype: ‘label‘, text: ‘Heading 3‘, cls:‘x-form-check-group-label‘, anchor:‘-15‘}, {boxLabel: ‘Item 4‘, name: ‘cb-cust-4‘}, {boxLabel: ‘Item 5‘, name: ‘cb-cust-5‘} ] }] }] }); form.render(document.body);
效果如下：
2.9 滑動條表單控件：
var form = new Ext.form.FormPanel({ width : 400, height: 160, title : ‘滑動條表單控件‘, bodyStyle : ‘padding: 10px;‘, renderTo : ‘container‘, defaultType: ‘sliderfield‘, buttonAlign: ‘left‘, defaults: { anchor: ‘95%‘, tipText: function(thumb){ return String(thumb.value) + ‘%‘; } }, items: [{ fieldLabel: ‘Sound Effects‘, value: 50, name: ‘fx‘ },{ fieldLabel: ‘Ambient Sounds‘, value: 80, name: ‘ambient‘ },{ fieldLabel: ‘Interface Sounds‘, value: 25, name: ‘iface‘ }], buttons: [{ text: ‘submit‘ }, { text: ‘reset‘ }] });
效果如下：
也可以在同一滑動條上指定多個滑塊，讓用戶可以同時指定多個數值，只需為values屬性指定一個數組
var horizontal = new Ext.Slider({ renderTo: ‘multi-slider-horizontal‘, width : 214, minValue: 0, maxValue: 100, values : [10, 50, 90], plugins : new Ext.slider.Tip() }); var vertical = new Ext.Slider({ renderTo : ‘multi-slider-vertical‘, vertical : true, height : 214, minValue: 0, maxValue: 100, values : [10, 50, 90], plugins : new Ext.slider.Tip() }); Ext.get(‘btn‘).on(‘click‘, function() { Ext.Msg.alert(‘info‘, horizontal.getValues() + ‘|‘ + vertical.getValues()); });
效果如下：
2.10 ComboBox控件：
Ext中的combobox與HTML中的select沒有任何關系，它完全是div重寫的
Extjs4——表單與輸入控件