第六章-ExtJs-Form

最新推荐文章于 2021-06-09 13:41:28 发布

原创最新推荐文章于 2021-06-09 13:41:28 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extJs #extJs表单 #extJs面向对象 #extjs oop #form

FY_Extjs_sir 专栏收录该内容

10 篇文章

订阅专栏

本章详细介绍了使用Ext JS库创建表单组件的方法，包括配置表单布局、添加输入字段、设置验证规则以及实现保存和取消操作。通过实例演示了如何构建一个简单的表单界面。

Form

本章任务

1.Form

//Ext.QuickTips.init();
//
//var form = new Ext.form.FormPanel({
//    labelWidth: 75,
//    title: 'Form Layout',
//    bodyStyle:'padding:15px',
//    //renderTo:Ext.getBody(),
//    width: 350,
//    labelPad: 10,
//    defaultType: 'textfield',
//    defaults: {
//        // applied to each contained item
//        width: 230,
//        msgTarget: 'side'
//    },
//    layoutConfig: {
//        // layout-specific configs go here
//        labelSeparator: ':'
//    },
//    items: [{
//            fieldLabel: 'First Name',
//            name: 'first',
//            allowBlank: false,
//            blankText:'不允许为空',
//		     msgTarget:'under'
//        },{
//            fieldLabel: 'Last Name',
//            name: 'last'
//        },{
//            fieldLabel: 'Company',
//            name: 'company'
//        },{
//            fieldLabel: 'Email',
//            name: 'email',
//            vtype:'email'
//        }
//    ],
//    buttons: [{
//        text: 'Save'
//    },{
//        text: 'Cancel'
//    }]
//    
//    
//});
//Ext.reg("a", form.show())

Ext.onReady(function(){

	   var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:'save-form.php',
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            })
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });
    
simple.render(document.body);
})

本章目标

1. 理解Form