`

extjs4.2 form

 
阅读更多
form.js

Ext.require([
    //'Ext.form.*',
    //'Ext.layout.container.Column',
    //'Ext.tab.Panel'
    '*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

    var simple = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'simpleForm',
        url: 'save-form.php',
        frame: true,
        title: 'Simple Form',
        bodyPadding: '5 5 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            afterLabelTextTpl: required,
            name: 'first',
            allowBlank:false
        },{
            fieldLabel: 'Last Name',
            afterLabelTextTpl: required,
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            afterLabelTextTpl: required,
            name: 'email',
            vtype:'email'
        }, {
            fieldLabel: 'DOB',
            name: 'dob',
            xtype: 'datefield'
        }, {
            fieldLabel: 'Age',
            name: 'age',
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 100
        }, {
            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.widget({
        xtype: 'form',
        id: 'fieldSetForm',
        collapsible: true,
        url: 'save-form.php',
        frame: true,
        title: 'Simple Form with FieldSets',
        bodyPadding: '5 5 0',
        width: 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',
                afterLabelTextTpl: required,
                name: 'first',
                allowBlank:false
            },{
                fieldLabel: 'Last Name',
                afterLabelTextTpl: required,
                name: 'last'
            },{
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                afterLabelTextTpl: required,
                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.widget({
        xtype: 'form',
        id: 'multiColumnForm',
        collapsible: true,
        frame: true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyPadding: '5 5 0',
        width: 600,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },

        items: [{
            xtype: 'container',
            anchor: '100%',
            layout: 'hbox',
            items:[{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    afterLabelTextTpl: required,
                    name: 'first',
                    anchor:'95%',
                    value: 'Don'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    afterLabelTextTpl: required,
                    name: 'last',
                    anchor:'100%',
                    value: 'Griffin'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    afterLabelTextTpl: required,
                    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.widget({
        xtype: 'form',
        id: 'tabForm',
        width: 350,
        border: false,
        bodyBorder: false,
        fieldDefaults: {
            labelWidth: 75,
            msgTarget: 'side'
        },
        items: {
            xtype:'tabpanel',
            activeTab: 0,
            defaults:{
                bodyPadding: 10,
                layout: 'anchor'
            },

            items:[{
                title:'Personal Details',
                defaultType: 'textfield',
                defaults: {
                    anchor: '100%'
                },
                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    afterLabelTextTpl: required,
                    allowBlank:false,
                    value: 'Ed'
                },{
                    fieldLabel: 'Last Name',
                    afterLabelTextTpl: required,
                    name: 'last',
                    value: 'Spencer'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    afterLabelTextTpl: required,
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                defaultType: 'textfield',
                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'
        }]
    });

    tabs.render(document.body);



    /*
     * ================  Form 5  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

    var tab2 = Ext.widget({
        title: 'Inner Tabs',
        xtype: 'form',
        id: 'innerTabsForm',
        collapsible: true,
        bodyPadding: 5,
        width: 600,
        fieldDefaults: {
            labelAlign: 'top',
            msgTarget: 'side'
        },
        defaults: {
            anchor: '100%'
        },

        items: [{
            xtype: 'container',
            layout:'hbox',
            items:[{
                xtype: 'container',
                flex: 1,
                border:false,
                layout: 'anchor',
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'First Name',
                    afterLabelTextTpl: required,
                    name: 'first',
                    anchor:'95%'
                }, {
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Last Name',
                    afterLabelTextTpl: required,
                    name: 'last',
                    anchor:'95%'
                },{
                    fieldLabel: 'Email',
                    afterLabelTextTpl: required,
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            height:235,
            defaults:{
                bodyPadding: 10
            },
            items:[{
                title:'Personal Details',
                defaults: {
                    width: 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: {
                    width: 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);
});
分享到:
评论

相关推荐

    EXTjs4.2中文版

    同时,EXTjs4.2提供了强大的布局管理器,支持多种布局模式,如fit、form、border等,使界面布局更加灵活。 在数据处理方面,EXTjs4.2加强了数据绑定和模型(Model)的概念,允许开发者方便地处理和展示后台数据。它...

    extjs 4.2 开发 参考书

    ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括数据管理、图表、表格、菜单、工具栏等,使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...

    extjs4.2 分页combo动态条数 源码

    EXTJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大...

    ExtJs4.2 下拉框树

    综上所述,`ExtJs4.2 下拉框树`的实现涉及到了组件扩展、树形数据处理、界面布局和交互设计等多个方面,通过对`TreePicker.js`的修改,开发者成功地克服了原生框架的限制,提供了更符合需求的下拉树功能。

    ext_image.rar_ext_image_extjs_extjs 4.2 img_extjs image_extjs图片上

    图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件可能需要配合第三方插件,如SWFUpload或jQuery File Upload,以实现浏览器兼容性和异步...

    Extjs4.2时间选择插件精确到时分秒

    在ExtJS 4.2中实现时间选择插件,首先需要理解Ext.form.field.Time类,这是ExtJS提供的用于创建时间选择字段的基础组件。这个组件提供了基本的时间输入功能,但默认情况下可能不支持秒的选择。为了精确到时分秒,...

    extjs4.2 日期控件扩展带时分秒

    ### Extjs4.2 日期控件扩展带时分秒:深入解析与应用 #### 一、概述 在Web开发中,特别是在使用ExtJS这样的框架进行界面构建时,日期和时间的选择器是不可或缺的一部分。ExtJS 4.2提供了一个强大的日期控件,但是...

    extjs4.2 动态生成toolbar

    "ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用...

    ExtJs4.2.1年月日时分秒、时分秒控件

    总之,"ExtJs4.2.1年月日时分秒、时分秒控件"是关于使用ExtJS框架创建日期和时间选择功能的。通过理解和利用提供的组件、配置以及测试样例,开发者可以轻松地在Web应用中集成这些控件,提升用户体验。

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS的`Ext.form.Panel`可以用来创建这样的面板,展示和处理用户的输入。 5. **保存与加载**:工作流设计需要有保存和加载的功能。ExtJS的Ajax接口和JSON数据模型可以帮助实现这个功能,将设计的流程图保存为JSON...

    ExtJS-4.2.6扩展ux插件89个

    - **版本号**:4.2.6.1811 - Ext JS 4.2.6是该框架的一个稳定版本,对先前版本进行了错误修复和性能优化。它支持现代浏览器,包括IE8+,并且提供了一套完整的组件库,如表格、面板、窗口、树形视图等,以及数据...

    Extjs自动最大化panel

    它提供了丰富的组件系统,包括Panel、Grid、Form等,而Panel是EXTJS中的核心组件之一,可以视为一个可自定义的容器,可以包含其他组件。 在传统的EXTJS中,`viewport`是一个特殊的布局,用于将整个页面作为其渲染...

    EXtjs 图片批量上传

    在ExtJS中,我们可以创建一个`Ext.form.Panel`,并在其中包含一个`Ext.form.FileField`组件,该组件支持多选文件,从而实现批量上传的功能。配置`allowMultiple`属性为`true`,即可启用多选文件功能: ```...

    extjs4 实现下拉树并支持复选

    这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下是对这段代码的详细解释: 1. **组件定义**: 组件名为`Ext.ux.comboboxtree`,它扩展了`Ext.form.field.Picker`,...

    extjs 简单框架搭建

    5. **创建组件**:EXTJS提供了大量的预定义组件,如面板(Panel)、表格(Grid)、树形控件(Tree)、表单(Form)等。在`app`目录下创建对应的类文件,如`views/MyPanel.js`,定义组件的配置和行为。 6. **数据...

    EXTJS4.0视频教程

    - **Form Panel**:表单组件,包含多个输入字段,支持数据验证。 - **Tab Panel**:标签页组件,可以在不同的标签页之间切换内容。 - **Window**:弹出窗口组件,常用于显示额外信息或收集用户输入。 - **Tree Panel...

    Extjs搜索过滤 类似百度、google搜索

    首先,ExtJS中的`Ext.form.field.Text`组件可以作为搜索输入框,它提供了基本的用户输入事件监听,如`keyup`或`change`,这些事件可以触发搜索过滤操作。当用户在搜索框中输入文字时,可以通过监听这些事件来实时...

    一个extjs表格的实例

    extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。

    extjs4.1-ux.rar

    Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide ...注明:在Extjs4.1上是可以使用的,Extjs4.2部分会有问题。

    extjs4.2日期控件datefield拓展加上选择时分秒功能

    在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...

Global site tag (gtag.js) - Google Analytics