Ext 表单FormPanel的简单使用

最新推荐文章于 2024-03-26 17:18:18 发布

smile_wlxt

最新推荐文章于 2024-03-26 17:18:18 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext 学习文章标签： ext form anchor FormPanel

本文链接：https://blog.youkuaiyun.com/smile_wlxt/article/details/84462086

Ext 学习专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用 ExtJS 构建一个完整的表单，包括文本输入、日期选择、下拉列表、复选框等多种组件，并展示了如何设置验证规则及提交表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){
                Ext.QuickTips.init();
                var form = new Ext.FormPanel({
                    frame:true,
                    width:500,
                    monitorValid:true,//把有formBind:true的按钮与验证绑定
                    layout:'form',
                    labelWidth:55,
                    title:'添加个人信息',
                    labelAlign:'right',
                    renderTo:Ext.getBody(),
                    submit:function() {
                                this.getEl().dom.action = 'getForm';
                                this.getEl().dom.method = 'POST';
                                this.getEl().dom.submit();
                            },
                    items:[{
                            xtype:'panel',
                            layout:'column', //布局格式，使items里的标签元素在同一行
                            items:[{
                                    fieldLabel:'用户名',
                                    columnWidth:.5,
                                    layout:'form',//layout:'column'布局格式不显示fieldLabel字段,需要嵌套layout：'form'布局格式
                                    xtype:'textfield',
                                    allowBlank:false,
                                    labelWidth:60,
                                    labelAlign:'right',
                                    blankText:'不能为空，请填写',
                                    name:'userName',
                                    anchor:'90%'
                                },{
                                    columnWidth:.2,
                                    layout:'form',
                                    labelAlgin:'right',
                                    items:[{
                                            xtype:'radio',
                                            fieldLabel:'性别',
                                            labelWidth:40,
                                            labelAlign:'right',
                                            layout:'form',
                                            boxLabel:'男',
                                            name:'sex',
                                            checked:true,
                                            inputValue:'man',
                                            anchor:'95%'
                                        }]
                                },{
                                    columnWidth:.3,
                                    layout:'form',
                                    items:[{
                                            xtype:'radio',
                                            boxLabel:'女',
                                            labelSeparator:'',//去除分隔符
                                            name:'sex',
                                            inputValue:'woman',
                                            anchor:'95%'

                                        }]
                                }]
                        },{//上面是第一行
                            xtype:'panel',
                            layout:'column',
                            items:[{
                                    columnWidth:.5,
                                    fieldLabel:'出生日期',
                                    xtype:'datefield',
                                    layout:'form',
                                    labelWidth:60,
                                    labelAlign:'right',
                                    name:'birthday',
                                    anchor:'90%'
                                },{
                                    columnWidth:.5,
                                    layout:'form',
                                    items:[{
                                            labelWidth:40,
                                            xtype:'combo',
                                            name:'degree',
                                            labelAlign:'right',
                                            fieldLabel:'学位',
                                            store:['小学','初中','高中','专科','本科','硕士','博士'],
                                            emptyText:'请选择适合你的学历..',
                                            anchor:'90%'
                                        }]
                                }]
                        },{//上面是第二行
                            xtype:'panel',
                            layout:'column',
                            items:[{
                                    columnWidth:.3,
                                    fieldLabel:'使用框架',
                                    labelWidth:60,
                                    labelAlign:'right',
                                    layout:'form',
                                    xtype:'checkbox',
                                    boxLabel:'spring',
                                    name:'spring',
                                    inputValue:'spring'

                                },{
                                    columnWidth:.2,
                                    layout:'form',
                                    items:[{
                                            xtype:'checkbox',
                                            boxLabel:'struts2',
                                            name:'struts2',
                                            inputValue:'struts2',
                                            anchor:'95%'
                                        }]
                                },{
                                    columnWidth:.5,
                                    layout:'form',
                                    items:[{
                                        xtype:'checkbox',
                                        boxLabel:'hibernate',
                                        name:'hibernate',
                                        inputValue:'hibernate',
                                        ancher:'95%'
                                    }]
                                }]
                        },{//上面是第三行
                            xtype:'textfield',
                            fieldLabel:'Email',
                            labelWidth:60,
                            labelAlign:'right',
                            name:'email',
                            vtype:'email',//email验证
                            vtypeText:'Email格式错误',
                            anchor:'56%'//控制文本框长度

                        },{//上面是第四行
                            xtype:'textarea',
                            fieldLabel:'个性签名',
                            labelWidth:60,
                            labelAlign:'right',
                            name:'oneWord',
                            height:50,
                            anchor:'95%'
                        },{//上面是第五行
                            xtype:'htmleditor',
                            fieldLabel:'想说的话',
                            labelWidth:'60',
                            labelAlign:'right',
                            name:'wantToSay',
                            anchor:'95%',
                            enableAlignments:false,//去除左右对其工具栏
                            enableLists:false //去除列表工具栏
                        }],
                        buttons:[{text:'确定',handler:login,formBind:true},{text:'取消',handler:reset}]
                });
                function login(){
                    form.form.submit();
                }
                function reset(){
                    form.form.reset();
                }
            })
效果展示
[img]http://dl2.iteye.com/upload/attachment/0087/3474/c0ebeece-8345-3953-a344-e5e8390ac244.jpg[/img]