ExtJS4-页面控件（Form表单）

偏执的太偏执、 2022-07-13 00:12 228阅读 0赞

Ext.form.Panel  
说明：Form fields包括：hiddenfield，displayfield，textfield，textareafield，filefield，timefield，datefield，combobox，numberfield，checkboxfield，radiofield，multislider，sliderfield

示例：

<script type="text/javascript">
        
        Ext.onReady(function(){
        Ext.create('Ext.form.Panel', {
            frame: true,
            title: 'Form Fields',
            width: 340,
            bodyPadding: 5,
            renderTo: 'myForm',
            fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 90,
            anchor: '100%'
            },
            items: [{
            //隐藏的文本框
            xtype: 'hiddenfield', //1
            name: 'hiddenfield1',
            value: '隐藏的文本框'
            },{
            //显示文本框，相当于label
            xtype: 'displayfield', //2
            name: 'displayfield1',
            fieldLabel: 'Display field',
            value: '显示文本框'
            },{
            //输入文本框
            xtype: 'textfield', //3
            name: 'textfield1',
            fieldLabel: 'Text field',
            value: '输入文本框'
            },{
            //输入密码的文本框，输入的字符都会展现为.
            xtype: 'textfield', //4
            name: 'password1',
            inputType: 'password',
            fieldLabel: 'Password field'
            },{
            //多行文本输入框
            xtype: 'textareafield', //5
            name: 'textarea1',
            fieldLabel: 'TextArea',
            value: '啦啦啦，我是卖报的小行家'
            },{
            //上传文件文本框
            xtype: 'filefield', //6
            name: 'file1',
            fieldLabel: 'File upload'
            },{
            //时间文本框
            xtype: 'timefield', //7
            name: 'time1',
            fieldLabel: 'Time Field',
            minValue: '8:00 AM',
            maxValue: '5:00 PM',
            increment: 30
            },{
            //日期文本框
            xtype: 'datefield', //8
            name: 'date1',
            fieldLabel: 'Date Field',
            value: new Date()
            },{
            //下拉列表框
            xtype: 'combobox', //9
            fieldLabel: 'Combobox',
            displayField: 'name',
            store: Ext.create('Ext.data.Store', {
            fields: [
            {type: 'string', name: 'name'}
            ],
            data: [
            {
       "name":"Alabama"},
            {
       "name":"Alaska"},
            {
       "name":"Arizona"},
            {
       "name":"Arkansas"},
            {
       "name":"California"}
            ]
            }),
            queryMode: 'local',
            typeAhead: true
            },{
            //只能输入数字的文本框
            xtype: 'numberfield',
            name: 'numberfield1', //10
            fieldLabel: 'Number field',
            value: 20,
            minValue: 0,
            maxValue: 50
            },{
            //复选框
            xtype: 'checkboxfield', //11
            name: 'checkbox1',
            fieldLabel: 'Checkbox',
            boxLabel: '复选框'
            },{
            //单选框，注意name和下面的单选框相同
            xtype: 'radiofield', //12
            name: 'radio1',
            value: 'radiovalue1',
            fieldLabel: 'Radio buttons',
            boxLabel: 'radio 1'
            },{
            //单选框，注意name和上面的单选框相同
            xtype: 'radiofield', //13
            name: 'radio1',
            value: 'radiovalue2',
            fieldLabel: '',
            labelSeparator: '',
            hideEmptyLabel: false,
            boxLabel: 'radio 2'
            },{
            //拖动组件
            xtype: 'multislider', //14
            fieldLabel: 'Multi Slider',
            values: [25, 50, 75],
            increment: 5,
            minValue: 0,
            maxValue: 100
            },{
            //拖动组件
            xtype: 'sliderfield', //15
            fieldLabel: 'Single Slider',
            value: 50,
            increment: 10,
            minValue: 0,
            maxValue: 100
            }]
            });
        });
    </script>

效果  
![SouthEast][]

[SouthEast]: /images/20220713/f950a5fdaa7b4e6596e2187ac5fd816a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 ExtJS4 form组件收缩

效果图 ![Center][] 添加属性：collapsible Ext.define('V5.projectinfo.view.Left', \{ exten

拼搏现实的明天。/ 2022年09月25日 08:20/ 0 赞/ 195 阅读

相关 ExtJS4 表单横向布局

效果图： ![Center][] 源码: var win = Ext.create("Ext.window.Window", \{ title: "审计底稿",

谁借莪１个温暖的怀抱￠/ 2022年09月25日 03:29/ 0 赞/ 165 阅读

相关访问表单控件

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

た入场券/ 2022年09月21日 03:59/ 0 赞/ 215 阅读

相关 Extjs表单控件入门

ExtJs表单控件用formPanel来做为表单元素的容器。默认情况下，是使用Ajax异步提交。大家知道要使用Extjs必须引入他的库,所以我们要引入以下几个文件: ex

妖狐艹你老母/ 2022年08月23日 14:42/ 0 赞/ 227 阅读

相关 ExtJS form表单控件创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

Love The Way You Lie/ 2022年07月19日 01:26/ 0 赞/ 222 阅读

相关 ExtJS4-页面控件（Form表单）

Ext.form.Panel 说明：Form fields包括：hiddenfield，displayfield，textfield，textareafield，filef

偏执的太偏执、/ 2022年07月13日 00:12/ 0 赞/ 229 阅读

相关 Extjs form validate 表单验证代码总结心得

extjs表单验证 //放在onReady的function（）\{\}中 Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客

秒速五厘米/ 2022年07月10日 04:09/ 0 赞/ 185 阅读

相关 Bootstarp4 表单控件

1：Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local,

悠悠/ 2021年11月15日 12:31/ 0 赞/ 396 阅读

相关 form表单下使用原生button控件会提交

<form name="loginform" action="loginSubmit.jsp" method="get"> 账号：<input type

r囧r小猫/ 2021年09月29日 00:04/ 0 赞/ 390 阅读

相关 Bootstrap4 表单form-control以及表单控件

Bootstrap4 表单布局堆叠表单 (全屏宽度)：垂直方向 Bootstrap4 支持以下表单控件： input textarea ch

浅浅的花香味﹌/ 2021年09月15日 01:50/ 0 赞/ 750 阅读