ExtJS4-页面控件（Form表单）

来源：互联网发布：图案编辑软件编辑：程序博客网时间：2024/06/06 00:05
Ext.form.Panel
说明：Form fields包括：hiddenfield，displayfield，textfield，textareafield，filefield，timefield，datefield，combobox，numberfield，checkboxfield，radiofield，multislider，sliderfield
示例：
<script type="text/javascript">    <!--在页面加载完成后调用JS代码-->    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>
效果
0 0