1.1 文本域
{ xtype: 'textfield', fieldLabel: 'Text field' }1.2 文本区域
{ xtype: 'textarea', fieldLabel: 'Text Area' }
1.3 lable
{ xtype: 'displayfield', fieldLabel: 'Display Field' }
1.4 时间空间
{ xtype: 'datefield', fieldLabel: 'Date picker' }
1.5 按钮
{ xtype: 'button', text : 'Button' }1.6 单选按钮
{ 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' }] }
1.7 多选
{ 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' }] }
1.8 下拉列表
{ 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' }1.9 文件选择
{ xtype: 'filefield', fieldLabel: 'File field', labelWidth: 50, msgTarget: 'side', allowBlank: false, anchor: '100%', buttonText: 'Select File...' }1.10 数字增减
{ xtype: 'numberfield', anchor: '100%', fieldLabel: 'Numeric field', maxValue: 99, minValue: 0 }2.1 代码
<!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', { 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>2.2 效果
