`

第六章-ExtJs-Form

阅读更多

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

分享到:
评论

相关推荐

    免费 Extjs4.0教程视频

    #### 第六讲:Extjs 4.0的数据集—Store - **数据集(Store)**: - Store是Extjs中用于存储和管理数据集合的对象。 - 如何创建和配置Store,以及如何与Model和Proxy协同工作。 - **具体实例**: - 使用Store加载和...

    ExtJS 教程

    6. **第六章 - Editor Grids(可编辑表格)**: 进一步扩展第五章,讲解如何在Grid中集成编辑功能,使得用户可以直接在表格单元格内进行编辑,提高数据操作的便捷性。 7. **第七章 - ...(未提供)**: 可能包括其他...

    EXTJS4.0视频教程配套代码

    第六讲:extjs4.0的数据集store [06]EXTJS4.0的数据集store.wmv (73.45M) 第七讲:extjs4.0的事件机制Event [07]EXTJS4.0的事件机制Event.001.zip (70.00M)[07]EXTJS4.0的事件机制Event.003.zip [07]EXTJS4.0...

    Extjs教程源码

    第六讲: EXTJS4.0的数据集Store 第七讲: EXTJS4.0的事件机制Event 第八讲: EXTJS4.0的Ajax 第九讲: EXTJS4.0的Core包和Ext类 第十讲: EXTJS4.0的Util包 ***************第二部分高级组件**************** 第十一讲:...

    ExtJS.in.Action

    第六章“ExtJS takes form”则专注于表单的处理,包括如何构建表单、验证数据以及提交数据等。 ### 数据驱动的组件应用 第三部分“Data-Driven Components”主要聚焦于如何利用ExtJS来处理数据密集型的应用场景。...

    ExtJSWeb应用程序开发指南(第2版)

    第6章 常用工具类与函数 6.1 非常有用的Ext.core.Element 6.2 Ext常用函数 6.2.1 Ext.onReady() 6.2.2 Ext.get() 6.2.3 Ext.select() 6.2.4 Ext.query() 6.2.5 Ext.getCmp() 6.2.6 Ext.getDom()...

    EXTJS-upload.rar_extjs

    6. **扩展组件(Plugins)**:EXTJS社区提供了一些第三方插件,如`Ext.ux.form.FileUploadField`,可以增强文件上传功能,比如添加多文件选择、预览功能等。 7. **安全性与权限控制**:在实现文件上传时,还需要...

    ExtJs教程_完整版

    ### ExtJs教程_完整版 —— 第一章起步(1)关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架,专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...

    Extjs小图标

    ExtJS是一款广泛应用于Web应用程序开发的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者能够构建出交互性强、界面美观的应用程序。在ExtJS中,图标(Icon)是一种重要的视觉元素,用于增强...

    Extjs中文教程

    ### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...

    extJs4.0 开发手册源码

    "Extjs4.0 Web应用开发指南(第二版)-源代码"这本书的源码部分,不仅提供了EXTJS4.0的源代码,还提供了书中实例的实现,这对于学习EXTJS4.0的实际开发流程非常有帮助。通过对照书中的讲解和源码,开发者可以更深入地...

    ExtJs中引用的三个js

    6. **模块化与按需加载**:为了优化性能,ExtJS 4及以上版本引入了CMD(Command Line Compiler)和AMD(Asynchronous Module Definition)模块化加载机制。通过Sencha CMD工具,开发者可以将应用拆分为模块,并在...

    ExtJs2.0学习系列

    ExtJS 2.0的组件系统是其核心部分,包括各种UI元素,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等。这些组件可以独立使用,也可以组合构建复杂的用户界面。学习ExtJS 2.0时,理解每个组件的功能...

    ExtJs 文本框后附件单位

    this.unitEl.addClass('x-form-unit'); // 如果当前 width 存在(当定义为自动宽度或百分比时 width 不存在),则根据单位名称大小调整文本框的长度 if (typeof (this.width) !== 'undefined' && this.width > 0...

    ExtJS4下拉树组件

    ### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...

    精通JS脚本之ExtJS框架.part2.rar

    第6章 页面元素与模板 6.1 构成用户界面的元素 6.2 获取页面元素 6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小...

    Extjs4.0视频教程和源代码,另附文档翻译

    #### 第六讲: Extjs4.0的数据集(Store) - **Store的作用**:解释了Store在Extjs中的角色,它是存储和管理数据的地方,可以绑定到各种UI组件上,如GridPanel等。 - **配置和使用Store**:介绍了如何创建和配置Store...

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

Global site tag (gtag.js) - Google Analytics