文档章节

ExtJs中的Form表单基础篇

乔康007
 乔康007
发布于 2016/06/20 08:55
字数 221
阅读 11
收藏 0

在软件开发中,通过Form表单向后台提交数据是一种很常见的行为.在使用ExtJs这种富客户端时,跟平时的html开发有一定的区别. 一般的jsp和struts2的开发为: <!-- lang: html --> <form action='UserAction_save.action' method='post'> 姓名: <input type='text' name='name'/> 年龄: <input type='text' name='age'/> <input type='submit' value='提交'> </form>

而在Ext中则不同;
先做个简单的例子!
<!-- lang: js -->
Ext.onready(function(){
    //创建放表单的容器window
    var win = Ext.create('Ext.window.Window',{
        title : '注册用户',
        width : 600,
        height :500,
        layout : 'fit',
        bodyPadding : 10,
        store : store,
        items :[
            {
                xtype : 'form',
                layout : 'fit',
                defaultfield :{
                    type : 'textfield'    //默认表单类型为文本框
                },
                url : '',  
                items : [
                    {
                        fieldLabel : '姓名',
                        name : 'name',
                        allowBlank : true,  //验证姓名必须填写
                        anchor : '100%'
                    },{
                        fieldLabel : '年龄',
                        name : 'age',
                        anchor: '100%',
                        allowBlank : true,
                        emptyText : '必须填' //当文本框空白时,显示的内容
                    }
                ],
                bbar : [
                    {
                        text : '保存',
                        iconCls : 'save', //按钮图片的css
                        handler : function(){
                            //保存的事件
                        }
                    }
                ]
            }
        ]
    });
    //显示窗体
    win.show();
});

© 著作权归作者所有

上一篇: Ajax
乔康007
粉丝 2
博文 15
码字总数 7726
作品 0
海淀
程序员
私信 提问
extjs form表单提交返回成功与否

一直不知道extjs的form表单提交后返回的成功与否 其实在form提交返回的字符串(Json)中要有一个"success:true/false" 这样在extjs才会知道成功与否 例如:返回的字符串{ “success":"true"...

蜡笔小白
2014/02/23
81
0
Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成...

鱼煎
2017/11/02
48
0
ExtJS Form无刷新文件上传

文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传。今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传。 首先,我们创建一个Form,...

鱼煎
2017/11/02
23
0
Ext GWT 2.2 Beta 发布

GWT-Ext 是基于 Google Web Toolkit(GWT) 和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度...

红薯
2010/07/22
559
0
Dijit、ExtJS、jQuery UI 异同浅析

简介: 当今,各类 JavaScript 框架在前端开发中已经相当普及。Dojo、Ext jQuery 等主流 JavaScript 框架不仅提供了一系列核心 API 来屏蔽浏览器差异,简化 DOM 操作、增强 JavaScript 原生 ...

索隆
2012/02/21
526
0

没有更多内容

加载失败,请刷新页面

加载更多

崛起于Springboot2.X之5分钟解决单点登陆(53)

SpringBoot2.X心法总纲 1、pom文件依赖 <dependency> <groupId>com.majiaxueyuan</groupId> <artifactId>sso-core</artifactId> <version>1.2.2</version></dependency> 2、......

木九天
10分钟前
11
0
面向对象和面向过程的区别

面向过程 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机、嵌入式开发、Linux/Unix等一般采用面向过程开发,性能是最重要的因素。 缺点:没有面向对...

无名氏的程序员
12分钟前
8
0
OpenStack大事记

2010年7月19日,Rackspace、NASA、Citrix、Dell共同开发并发布OpenStack第一个版本。 2011年10月,Rackspace放弃OpenStack控制权,交由一新成立的OpenStack基金会管理。 2012年5月NASA宣布退...

大别阿郎
12分钟前
4
0
面向对象的简单应用—以交通工具(Vehicle)为列

请定义一个交通工具(Vehicle)的类其中有: 属性: 速度(speed)、 体积(size)等,方法:移动(move())、设置速度(setSpeed(int speed))、加速 speedUp()、减速 speedDown()等。最后在测试类 Ve...

INEVITABLE
23分钟前
4
0
通往艺术家之路

通往艺术家之路 并发编程中,开发者往往需要权衡锁的颗粒粗细,锁住的代码块太大呢会导致可能的线程堵塞,锁的颗粒太细呢又会因为频繁地加锁解锁导致系统用户态内核态的转换从而消费很多时间...

StupidZhe
24分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部