`
chengyu2099
  • 浏览: 471172 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Ext 入门的简单 formPanel ②

阅读更多
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入门程序登录例子” EXT是一个强大的JavaScript库,用于构建富客户端Web应用程序。这个入门程序是一个基于EXTJS的登录示例,它在不依赖数据库的情况下展示了用户登录的基本功能。EXTJS以其丰富的...

    Ext技术入门篇详细讲解

    在"Ext技术入门篇详细讲解"中,我们将深入探讨如何利用EXT技术来实现BS(Browser/Server)架构下与CS(Client/Server)架构相媲美的漂亮界面。 EXT技术的核心优势在于它提供了丰富的组件库,包括表格、树形视图、...

    ext2.0中文教程.rar

    1. **EXT基础**:讲解EXT的基本概念,如如何创建一个简单的EXT应用,以及如何引入和配置EXT库。 2. **组件使用**:详细介绍EXT的各种组件,如GridPanel(数据网格)、FormPanel(表单)、Window(窗口)等,以及...

    EXT 中文手册

    通过`Ext.form.FormPanel`,可以轻松构建功能完善的表单,并进行数据验证和提交。 ##### 模板(Templates) 模板是用于数据呈现的强大工具,EXT通过`XTemplate`实现了模板引擎的功能。`XTemplate`允许开发者定义...

    Ext中文文档

    ### Ext中文文档:北大青鸟老师入门教程精要 #### ExtJS:JavaScript的高级框架 ExtJS是一款基于JavaScript的开源框架,专为构建现代、响应式Web应用程序而设计。它提供了一套丰富的UI组件库,使得开发者能够快速...

    ExtJs入门实例

    var formPanel = new Ext.FormPanel({ title: '登录表单', width: 300, bodyStyle: 'padding:10px', items: [ { xtype: 'textfield', fieldLabel: '用户名' }, { xtype: 'textfield', inputType: 'password',...

    老师整理的extjs学习笔记

    提交 `Ext.form.FormPanel` 表单可以通过调用 `form.submit()` 方法来实现。该方法接受一个配置对象,其中可以指定服务器端的 URL、提交成功或失败后的回调函数等。 ```javascript formPanel.getForm().submit({ ...

    Ext中文手册+2.0实例

    1. **快速入门**:介绍如何搭建开发环境,设置基本的HTML页面结构,引入ExtJS库,并创建第一个简单的应用。 2. **组件基础**:讲解各种基础组件的使用,如按钮(Button)、窗口(Window)、菜单(Menu)等。 3. **...

    ExtJS中文手册.pdf

    - **其它新组件**:除了以上提到的组件外,EXT2还增加了一些其他新组件,如Tree、FormPanel等。 通过上述知识点的梳理,我们不仅了解了EXT的基本用法,还深入探索了EXT的高级特性和组件开发技巧。无论是对于初学者...

    轻松搞定ext

    对于初学者而言,ExtJS的学习曲线虽然陡峭,但通过系统的学习资料,如《轻松搞定ExtJS》这样的教程,可以有效地降低入门难度,帮助新学员迅速掌握框架的基本使用。 #### 第二章:准备与资源 在开始学习ExtJS之前,...

    EXTJS 3.04包/中文版API/入门学习资料

    例如,了解GridPanel如何配置,如何使用FormPanel提交数据等。 六、EXTJS 3.04入门学习资源 "最新编排”EXTJS入门教程(超级详细)-20.pdf,可能是针对EXTJS 3.04的详细教程,涵盖了从基础概念到实际应用的全面指导。...

    ajax extjs 入门ppt 我和ajax有个约会

    7. **Ajax与ExtJS结合**:学习如何利用ExtJS的Ajax API进行数据请求,如Ext.Ajax.request方法,以及如何绑定数据到组件。 8. **事件处理**:掌握ExtJS中的事件模型,如何监听和处理用户交互。 9. **数据存储**:...

    extjs的快速入门教程

    ### ExtJS快速入门教程知识点概览 #### 一、ExtJS简介 - **定义**: ExtJS是一个用JavaScript编写的前端框架,旨在简化Web应用程序的开发过程,尤其适用于创建丰富的交互式用户界面(RIA)。它独立于后端技术,可以...

    extjs中文教程

    本部分讲述了Ext.data相关类的使用,包括Ext.data.DataProxy、Ext.data.DataReader和Ext.data.Store类,以及如何实现下拉列表框,如何获取下拉列表框的值。 ### 第十部分:Ajax与ComboBox 在ExtJS中,Ajax的使用...

Global site tag (gtag.js) - Google Analytics