Ext.onReady(function() {
// 动态切换图片,不赋值,讲联网ext官网查询
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
// 初始化信息提示框
Ext.QuickTips.init();
// turn on validation errors beside the field globally
// 定义统一错误提示的样式 1、qtip 2、title 3、under 4、side
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/* * ================ Simple form ======================= */
bd.createChild({
tag : 'h2',
html : '简单的 form panel'
});
var formPanel = new Ext.form.FormPanel({
title:'Ext.form.FormPanel',
height:400,
width:800,
frame:true,
labelSeparator:':',
labelWidth:60,
labelAlign:'right',
items:[
new Ext.form.TextField({
fieldLabel:'userName',
allowBlank:false,
blankText:'填写姓名'
}),
new Ext.form.NumberField({
fieldLabel:'age',
allowBlank:false,
blankText:'填写年龄',
emptyText:'age',
maxLength:2,
maxLengthText:'不能超过100岁',
baseChars:'789'//接受有效数字的一组基础字符
//msgTarget:'qtip'
}),
new Ext.form.TextArea({
id:'textAreaId',
width:150,
fieldLabel:'remark'
}),
new Ext.form.Checkbox({ // checkbox、radio 横排
name:'cb1',
fieldLabel:'爱好',
boxLabel:'游泳',
checked:true,
readOnly:true
}),
new Ext.form.Checkbox({
name:'cb2',
boxLabel:'爬山',
disabled:true
}),
new Ext.form.Checkbox({
name:'cb3',
boxLabel:'旅游'
}),
new Ext.form.Radio({ // checkbox、radio 横排
name:'sex',
fieldLabel:'性别',
boxLabel:'男'
}),
new Ext.form.Radio({
name:'sex',
boxLabel:'女',
hiddenLabel:true
}),//触发字段
new Ext.form.TriggerField({
id:'trigerFieldId',
fieldLabel:'触发字段',
hideTrigger:false,
onTriggerClick:function(e){
alert(formPanel.findById('trigerFieldId').getValue());
}
})
],
buttons:[{
text:'btn1',
handler:showValue
}]
});
function showValue(){
var ta = formPanel.findById('textAreaId');
alert(ta.getValue());
}
formPanel.render(document.body);
});
分享到:
相关推荐
【标题】:“EXT入门程序登录例子” EXT是一个强大的JavaScript库,用于构建富客户端Web应用程序。这个入门程序是一个基于EXTJS的登录示例,它在不依赖数据库的情况下展示了用户登录的基本功能。EXTJS以其丰富的...
在"Ext技术入门篇详细讲解"中,我们将深入探讨如何利用EXT技术来实现BS(Browser/Server)架构下与CS(Client/Server)架构相媲美的漂亮界面。 EXT技术的核心优势在于它提供了丰富的组件库,包括表格、树形视图、...
1. **EXT基础**:讲解EXT的基本概念,如如何创建一个简单的EXT应用,以及如何引入和配置EXT库。 2. **组件使用**:详细介绍EXT的各种组件,如GridPanel(数据网格)、FormPanel(表单)、Window(窗口)等,以及...
通过`Ext.form.FormPanel`,可以轻松构建功能完善的表单,并进行数据验证和提交。 ##### 模板(Templates) 模板是用于数据呈现的强大工具,EXT通过`XTemplate`实现了模板引擎的功能。`XTemplate`允许开发者定义...
### Ext中文文档:北大青鸟老师入门教程精要 #### ExtJS:JavaScript的高级框架 ExtJS是一款基于JavaScript的开源框架,专为构建现代、响应式Web应用程序而设计。它提供了一套丰富的UI组件库,使得开发者能够快速...
var formPanel = new Ext.FormPanel({ title: '登录表单', width: 300, bodyStyle: 'padding:10px', items: [ { xtype: 'textfield', fieldLabel: '用户名' }, { xtype: 'textfield', inputType: 'password',...
提交 `Ext.form.FormPanel` 表单可以通过调用 `form.submit()` 方法来实现。该方法接受一个配置对象,其中可以指定服务器端的 URL、提交成功或失败后的回调函数等。 ```javascript formPanel.getForm().submit({ ...
1. **快速入门**:介绍如何搭建开发环境,设置基本的HTML页面结构,引入ExtJS库,并创建第一个简单的应用。 2. **组件基础**:讲解各种基础组件的使用,如按钮(Button)、窗口(Window)、菜单(Menu)等。 3. **...
- **其它新组件**:除了以上提到的组件外,EXT2还增加了一些其他新组件,如Tree、FormPanel等。 通过上述知识点的梳理,我们不仅了解了EXT的基本用法,还深入探索了EXT的高级特性和组件开发技巧。无论是对于初学者...
对于初学者而言,ExtJS的学习曲线虽然陡峭,但通过系统的学习资料,如《轻松搞定ExtJS》这样的教程,可以有效地降低入门难度,帮助新学员迅速掌握框架的基本使用。 #### 第二章:准备与资源 在开始学习ExtJS之前,...
例如,了解GridPanel如何配置,如何使用FormPanel提交数据等。 六、EXTJS 3.04入门学习资源 "最新编排”EXTJS入门教程(超级详细)-20.pdf,可能是针对EXTJS 3.04的详细教程,涵盖了从基础概念到实际应用的全面指导。...
7. **Ajax与ExtJS结合**:学习如何利用ExtJS的Ajax API进行数据请求,如Ext.Ajax.request方法,以及如何绑定数据到组件。 8. **事件处理**:掌握ExtJS中的事件模型,如何监听和处理用户交互。 9. **数据存储**:...
### ExtJS快速入门教程知识点概览 #### 一、ExtJS简介 - **定义**: ExtJS是一个用JavaScript编写的前端框架,旨在简化Web应用程序的开发过程,尤其适用于创建丰富的交互式用户界面(RIA)。它独立于后端技术,可以...
本部分讲述了Ext.data相关类的使用,包括Ext.data.DataProxy、Ext.data.DataReader和Ext.data.Store类,以及如何实现下拉列表框,如何获取下拉列表框的值。 ### 第十部分:Ajax与ComboBox 在ExtJS中,Ajax的使用...