Extjs表单控件入门

妖狐艹你老母 2022-08-23 14:42 162阅读 0赞

ExtJs表单控件用formPanel来做为表单元素的容器。默认情况下，是使用Ajax异步提交。

大家知道要使用Extjs必须引入他的库,所以我们要引入以下几个文件:

ext-all.css

ext-base.js

ext-all.js

PS:笔者采用的是extjs3.0版本

那怎么加载插件呢?放心,extjs有自己加载的方法:

Ext.onReady(function()\{

//coding...

\}

实例代码:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

var formPanel=new Ext.form.FormPanel({
    
                title:'登陆',
    
                id:'loginId',
    
                autoHeight:true,
    
                x:200,
    
                y:200,
    
                width:300,
    
                renderTo:Ext.getBody(),
    
                frame:true,
    
                cls:'text-align:center',
    
                labelAlign:'center',
    
                items:[{
    
                    xtype:'textfield',
    
                    name:'username',
    
                    fieldLabel:'用户名',
    
                    allowBlank:false,
    
                    blankText:'请输入用户名',
    
                    msgTarget:'under'
    
                },{
    
                    xtype:'textfield',
    
                    name:'pwd',
    
                    fieldLabel:'密码',
    
                    allowBlank:false,
    
                    blankText:'请输入密码',
    
                    msgTarget:'under'
    
                }],
    
                buttonAlign:'center',
    
                buttons:[{
    
                    xtype:'button',
    
                    text:'登陆',
    
                    scope:this,
    
                    handler:login
    
                },{
    
                    xtype:'button',
    
                    text:'重置',
    
                    scope:this,
    
                    handler:reset
    
                }]
    
            });
    
     
    
                function login(){
    
                formPanel.form.submit({
    
                    clientValidation:true,
    
                    waitMsg:'登陆中,请稍后....',
    
                    url:'login.action',
    
                    method:'POST',
    
                    //success
    
                    success:function(form,action){
    
                        Ext.Msg.alert('提示','登陆成功');
    
                    },
    
                    failure:function(form,action){
    
                        Ext.Msg.alert('提示','登陆失败');
    
                    }
    
                });
    
            }
    
            function reset(){
    
                formPanel.form.reset();
    
            }

![142034563124047.png][]![142035064378040.png][]

[ContractedBlock.gif]: http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220823/1adfde28ed1a4bd8897247ea30759a0d.png
[142034563124047.png]: http://images.cnitblog.com/i/562629/201405/142034563124047.png
[142035064378040.png]: /images/20220823/c9c6557026424857bf7ff5e8c73d964c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 3、Winform表单控件

在学习了[布局控件][Link 1]之后，我们就该学习表单控件了。表单控件可以设置默认值，使用属性窗口或使用代码都是可以的。属性窗口最终也很转化成代码。程序的本质=输入+处

Dear 丶/ 2024年03月17日 23:50/ 0 赞/ 23 阅读

相关访问表单控件

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

た入场券/ 2022年09月21日 03:59/ 0 赞/ 146 阅读

相关 Extjs表单控件入门

ExtJs表单控件用formPanel来做为表单元素的容器。默认情况下，是使用Ajax异步提交。大家知道要使用Extjs必须引入他的库,所以我们要引入以下几个文件: ex

妖狐艹你老母/ 2022年08月23日 14:42/ 0 赞/ 163 阅读

相关 Extjs树形控件入门

Extjs树形控件由Ext.tree.TreePanel类定义,控件的名称为TreePanel,TreePanel继承自Panel类,在Extjs中使用树形控件其实很简单.

梦里梦外;/ 2022年08月23日 14:42/ 0 赞/ 184 阅读

相关 ExtJs之表格控件入门

　　extjs的表格功能非常强大,包括了排序,缓存,拖动,隐藏某一列,自动显示行号,列汇总,单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Pan

快来打我*/ 2022年08月23日 14:42/ 0 赞/ 154 阅读

相关 ExtJS form表单控件创建

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

Love The Way You Lie/ 2022年07月19日 01:26/ 0 赞/ 174 阅读

相关 ExtJS4-页面控件（Form表单）

Ext.form.Panel 说明：Form fields包括：hiddenfield，displayfield，textfield，textareafield，filef

偏执的太偏执、/ 2022年07月13日 00:12/ 0 赞/ 163 阅读

相关表单控件和属性

　　 ·email 电子邮箱文本框　　·tel 电话号码（主要功能在移动端，一个键盘的切换）　　·url 网页的url 　　·search 搜索引擎（chrome

朴灿烈づ我的快乐病毒、/ 2021年12月22日 01:29/ 0 赞/ 278 阅读

相关 Bootstarp4 表单控件

1：Input Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local,

悠悠/ 2021年11月15日 12:31/ 0 赞/ 338 阅读

相关 HTML表单的输入控件

HTML表单的输入控件主要有以下几种：文本框，对应的 `<input type="text">`，用于输入文本；口令框，对应的`<input type="passwor

Dear 丶/ 2021年07月26日 20:59/ 0 赞/ 461 阅读