• 一个简单的EXTJS案例


    aria-form.js

    Ext.require([
        'Ext.form.*',
        'Ext.layout.container.Column',
        'Ext.tab.*'
    ]);
    
    Ext.onReady(function() {
    
        Ext.QuickTips.init();
    
        var bd = Ext.getBody();
    
        /*
         * ================  Simple form  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
    
    
        var simple = Ext.create('Ext.form.Panel', {
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
             350,
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 75
            },
            defaultType: 'textfield',
            defaults: {
                anchor: '100%'
            },
    
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, {
                fieldLabel: 'DOB',
                name: 'dob',
                xtype: 'datefield'
            }, {
                fieldLabel: 'Age',
                name: 'age',
                xtype: 'numberfield',
                minValue: 0,
                maxValue: 100
            }, {
                fieldLabel: 'Qualified',
                name: 'qualified',
                xtype: 'checkbox'
            }, {
                fieldLabel: 'Which',
                xtype: 'radiogroup',
                items: [{
                    boxLabel: 'This',
                    name: 'which'
                }, {
                    boxLabel: 'That',
                    name: 'which'
                }]
            }, {
                xtype: 'timefield',
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        simple.render(document.body);
    
    
        /*
         * ================  Form 2  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
    
        var fsf = Ext.create('Ext.form.Panel', {
            url:'save-form.php',
            frame:true,
            title: 'Simple Form with FieldSets',
            bodyStyle:'padding:5px 5px 0',
             350,
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 75
            },
            defaults: {
                anchor: '100%'
            },
    
            items: [{
                xtype:'fieldset',
                checkboxToggle:true,
                title: 'User Information',
                defaultType: 'textfield',
                collapsed: true,
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                items :[{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                xtype:'fieldset',
                title: 'Phone Number',
                collapsible: true,
                defaultType: 'textfield',
                layout: 'anchor',
                defaults: {
                    anchor: '100%'
                },
                items :[{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        fsf.render(document.body);
    
        /*
         * ================  Form 3  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
    
    
        var top = Ext.create('Ext.form.Panel', {
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
             600,
            fieldDefaults: {
                labelAlign: 'top',
                msgTarget: 'side'
            },
    
            items: [{
                xtype: 'container',
                anchor: '100%',
                layout:'column',
                items:[{
                    xtype: 'container',
                    columnWidth:.5,
                    layout: 'anchor',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'96%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'96%'
                    }]
                },{
                    xtype: 'container',
                    columnWidth:.5,
                    layout: 'anchor',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'100%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'100%'
                    }]
                }]
            }, {
                xtype: 'htmleditor',
                name: 'bio',
                fieldLabel: 'Biography',
                height: 200,
                anchor: '100%'
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        top.render(document.body);
    
    
        /*
         * ================  Form 4  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
    
    
    
        var tabs = Ext.create('Ext.form.Panel', {
             350,
            border: false,
            bodyBorder: false,
            fieldDefaults: {
                labelWidth: 75,
                msgTarget: 'side'
            },
            defaults: {
                anchor: '100%'
            },
    
            items: {
                xtype:'tabpanel',
                activeTab: 0,
                defaults:{
                    bodyStyle:'padding:10px'
                },
    
                items:[{
                    title:'Personal Details',
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Ed'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Spencer'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                }]
            },
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        tabs.render(document.body);
    
    
    
        /*
         * ================  Form 5  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
    
        var tab2 = Ext.create('Ext.form.Panel', {
            title: 'Inner Tabs',
            bodyStyle:'padding:5px',
             600,
            fieldDefaults: {
                labelAlign: 'top',
                msgTarget: 'side'
            },
            defaults: {
                anchor: '100%'
            },
    
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    border:false,
                    layout: 'anchor',
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    border:false,
                    layout: 'anchor',
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'Personal Details',
                    defaults: { 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jamie'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Avins'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    defaults: { 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                },{
                    cls: 'x-plain',
                    title: 'Biography',
                    layout: 'fit',
                    items: {
                        xtype: 'htmleditor',
                        name: 'bio2',
                        fieldLabel: 'Biography'
                    }
                }]
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        tab2.render(document.body);
    });

    aria-form.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <title>ARIA compliant Forms built with JavaScript</title>
    
            <!-- ExtJS -->
            <link href="../resources/css/ext-all.css" rel="stylesheet"
                type="text/css" />
            <script src="../ext-all.js" type="text/javascript"></script>
    
    
      
            <!-- Example -->
            <script type="text/javascript" src="aria-form.js"></script>
    
        </head>
        <body>
    
    <hr color="blue" align="left">
            <h1>
                ARIA compliant Forms built with JavaScript
            </h1>
    
            <p>
                These forms do not do anything and have very little validation. They
                solely demonstrate how you can use Ext Forms to build and layout ARIA
                compliant forms on the fly.
            </p>
    
            <p>
                The js is not minified so it is readable. See
                <a href="aria-form.js">aria-form.js</a>.
            </p>
    
        </body>
    </html>

    运行效果:

    image

  • 相关阅读:
    JS对象、包装类
    js刷题网站
    typeof 返回的数据类型
    一文讲懂什么是函数柯里化,柯里化的目的及其代码实现
    JS 中深拷贝的几种实现方法
    JavaScript 开发的45个经典技巧
    JavaScript中的delete操作符
    IE下iframe不能正常加载,显示空白
    使用Costura.Fody插件将自己写的程序打包成一个可以独立运行的EXE文件
    list获取所有上级
  • 原文地址:https://www.cnblogs.com/J-wym/p/3270767.html
Copyright © 2020-2023  润新知