ExtJs-05-FormPanel

最新推荐文章于 2021-01-17 13:19:24 发布

转载最新推荐文章于 2021-01-17 13:19:24 发布 · 505 阅读

收录于

JavaScript

本文介绍如何使用 Ext JS 库创建两个不同的 FormPanel 实例。第一个实例包含简单的用户名和密码输入框，第二个实例则展示了更复杂的字段集，包括文本字段、组合框等，并使用了 fieldset 进行布局。此外还列举了 Ext.form 下多种组件类型。

HTML:

3.FormPanel
<div id="formPanel" style="padding: 20px;"></div><hr/>
<div id="form" style="padding: 20px;"></div><hr />

JS:

//3.FormPanel
            var formPanel = Ext.create('Ext.form.FormPanel', {
                width: 350,
                frame: true,
                renderTo: 'formPanel',
                title: 'Form Panel',
                bodyStyle: 'padding:5px 5px 0',
                defaults:{width:200},
                items: [
                    {
                        fieldLabel: 'UserName',
                        xtype: 'textfield',
                        name: 'UserName',
                        id: 'UserName',
                        //width: 200
                    },
                    {
                        fieldLabel: 'Password',
                        xtype: 'textfield',
                        name: 'password',
                        id: 'password',
                        //width: 200
                    }
                ],
                buttons: [
                    { text: '确定' },
                    { text: '取消', handler: function () { alert(); } }
                ],
                buttonAlign:'center'
            });

            var form = Ext.create('Ext.form.FormPanel',{
                width: 350,
                frame: true,
                renderTo: 'form',
                title: 'Form Panel',
                bodyStyle: 'padding:5px 5px 0',
                items:[
                    {
                        xtype:'fieldset',
                        title:'个人信息',
                        collapsible:true,
                        width:300,
                        defaults:{width:200},
                        defaultType:'textfield',
                        items:[
                            {fieldLabel:'姓名',name:'username',value:'AutoBest'},
                            {fieldLabel:'性别',name:'sex',xtype:'combo',store:['男','女','保密'],emptyText:'请选择'}
                        ]
                    }
                ],
                buttons: [
                    { text: '确定' },
                    { text: '取消', handler: function () { alert(); } }
                ],
                buttonAlign:'center'
            });