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
分享到:
相关推荐
#### 第六讲:Extjs 4.0的数据集—Store - **数据集(Store)**: - Store是Extjs中用于存储和管理数据集合的对象。 - 如何创建和配置Store,以及如何与Model和Proxy协同工作。 - **具体实例**: - 使用Store加载和...
6. **第六章 - Editor Grids(可编辑表格)**: 进一步扩展第五章,讲解如何在Grid中集成编辑功能,使得用户可以直接在表格单元格内进行编辑,提高数据操作的便捷性。 7. **第七章 - ...(未提供)**: 可能包括其他...
第六讲: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...
第六讲: EXTJS4.0的数据集Store 第七讲: EXTJS4.0的事件机制Event 第八讲: EXTJS4.0的Ajax 第九讲: EXTJS4.0的Core包和Ext类 第十讲: EXTJS4.0的Util包 ***************第二部分高级组件**************** 第十一讲:...
第六章“ExtJS takes form”则专注于表单的处理,包括如何构建表单、验证数据以及提交数据等。 ### 数据驱动的组件应用 第三部分“Data-Driven Components”主要聚焦于如何利用ExtJS来处理数据密集型的应用场景。...
第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()...
6. **扩展组件(Plugins)**:EXTJS社区提供了一些第三方插件,如`Ext.ux.form.FileUploadField`,可以增强文件上传功能,比如添加多文件选择、预览功能等。 7. **安全性与权限控制**:在实现文件上传时,还需要...
### ExtJs教程_完整版 —— 第一章起步(1)关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架,专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...
ExtJS是一款广泛应用于Web应用程序开发的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者能够构建出交互性强、界面美观的应用程序。在ExtJS中,图标(Icon)是一种重要的视觉元素,用于增强...
### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...
"Extjs4.0 Web应用开发指南(第二版)-源代码"这本书的源码部分,不仅提供了EXTJS4.0的源代码,还提供了书中实例的实现,这对于学习EXTJS4.0的实际开发流程非常有帮助。通过对照书中的讲解和源码,开发者可以更深入地...
6. **模块化与按需加载**:为了优化性能,ExtJS 4及以上版本引入了CMD(Command Line Compiler)和AMD(Asynchronous Module Definition)模块化加载机制。通过Sencha CMD工具,开发者可以将应用拆分为模块,并在...
ExtJS 2.0的组件系统是其核心部分,包括各种UI元素,如按钮(Button)、表格(Grid)、面板(Panel)、表单(Form)等。这些组件可以独立使用,也可以组合构建复杂的用户界面。学习ExtJS 2.0时,理解每个组件的功能...
this.unitEl.addClass('x-form-unit'); // 如果当前 width 存在(当定义为自动宽度或百分比时 width 不存在),则根据单位名称大小调整文本框的长度 if (typeof (this.width) !== 'undefined' && this.width > 0...
### ExtJS4 下拉树组件知识点详解 #### 一、概述 在ExtJS4中,下拉树组件(TreeComboBox)是一种特殊的组合框,它结合了下拉列表和树形结构的功能,允许用户通过选择树节点来填充组合框的值。这种组件广泛应用于...
第6章 页面元素与模板 6.1 构成用户界面的元素 6.2 获取页面元素 6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小...
#### 第六讲: Extjs4.0的数据集(Store) - **Store的作用**:解释了Store在Extjs中的角色,它是存储和管理数据的地方,可以绑定到各种UI组件上,如GridPanel等。 - **配置和使用Store**:介绍了如何创建和配置Store...
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...