Ext form

最新推荐文章于 2017-01-09 16:52:47 发布
最新推荐文章于 2017-01-09 16:52:47 发布
阅读量106 收藏
点赞数
分类专栏： EXT 文章标签： EXT prototype JSP
function  form1() {
    Ext.BLANK_IMAGE_URL  =   " /learn/ext/resources/images/default/s.gif " ;
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget  =   " side " ;
     var  form  =   new  Ext.form.FormPanel({
        title :  " 用户登陆 " ,
        labelWidth :  60 ,
        labelSeparator :  " :  " ,
        bodyStyle :  " padding:15 5 5 5 " ,
        height :  120 ,
        width :  250 ,
        frame :  true ,
        labelWidth :  60 ,
        labelAlign :  " right " ,
        applyTo :  " form " ,
        items : [ new  Ext.form.TextField({
                    fieldLabel :  " 用户名 " ,
                    id :  " userName " ,
                    minLength :  6 ,
                    minLengthText :  " 长度不能小于6个字符 " ,
                    maxLength :  20 ,
                    maxLengthText :  " 长度超过了20个字符 " ,
                    selectOnFocus :  true ,
                    allowBlank :  false ,
                    blankText :  " 请填写用户名 " ,
                    regex :  /^ ([\w] + )(.[\w] + ) * @([\w - ] + \.){ 1 , 5 }([A - Za - z]){ 2 , 4 }$ / ,
                    regexText :  " 用户名格式错误 "
                }),  new  Ext.form.TextField({
                    inputType :  " password " ,
                    fieldLabel :  " 密码 " ,
                    allowBlank :  false ,
                    blankText :  " 请填写密码 " ,
                    minLength :  6 ,
                    minLengthText :  " 长度不能小于6个字符 " ,
                    maxLength :  20 ,
                    maxLengthText :  " 长度超过了20个字符 "
                })]
    })
}
 function  form2() {
    Ext.BLANK_IMAGE_URL  =   " /learn/ext/resources/images/default/s.gif " ;
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget  =   " side " ;
     var  form  =   new  Ext.form.FormPanel({
                title :  " 多行文本 " ,
                labelWidth :  60 ,
                labelSeparator :  " :  " ,
                bodyStyle :  " padding:15 5 5 5 " ,
                height :  250 ,
                width :  250 ,
                frame :  true ,
                labelWidth :  60 ,
                labelAlign :  " right " ,
                applyTo :  " form " ,
                items : [ new  Ext.form.TextArea({
                                    fieldLabel :  " 备注 " ,
                                    id :  " memo " ,
                                    width :  150
                                }),  new  Ext.form.Radio({
                                    name :  " sex " ,
                                    fieldLabel :  " 性别 " ,
                                    boxLabel :  " 男 "

                                }),  new  Ext.form.Radio({
                                    name :  " sex " ,
                                    fieldLabel :  " 性别 " ,
                                    boxLabel :  " 女 "

                                }),  new  Ext.form.Checkbox({
                                    name :  " walk " ,
                                    fieldLabel :  " 爱好 " ,
                                    boxLabel :  " 散步 "
                                })],
                buttons : [{
                            text :  " 确定 " ,
                            handler : showValue
                        }]
            })
     function  showValue() {
         var  memo  =  form.findById( " memo " );
        alert(memo.getValue());
    }
}
 function  triggerField() {
     var  form  =   new  Ext.form.FormPanel({
                title :  " 练习Trigger " ,
                labelSeparator :  " :  " ,
                labelWidth :  80 ,
                bodyStyle :  " padding:5 5 5 5 " ,
                frame :  true ,
                height :  100 ,
                width :  270 ,
                applyTo :  " form " ,
                items : [ new  Ext.form.TriggerField({
                            id :  " memo " ,
                            fieldLabel :  " 触发字段 " ,
                            hideTrigger :  false ,
                            onTriggerClick :  function (e) {
                                 var  memo  =  form.findById( " memo " );
                                alert(memo.getValue());
                            }
                        })]
            })
}
 function  form4() {
     var  store  =   new  Ext.data.SimpleStore({
                fields : [ " province " ,  " post " ],
                data : [[ " 南充 " ,  " 0 " ], [ " 成都 " ,  " 1 " ], [ " 广元 " ,  " 2 " ], [ " 乐山 " ,  " 3 " ]]
            });
     var  form  =   new  Ext.form.FormPanel({
                title :  " 练习Trigger " ,
                labelSeparator :  " :  " ,
                labelWidth :  80 ,
                bodyStyle :  " padding:5 5 5 5 " ,
                frame :  true ,
                height :  100 ,
                width :  270 ,
                applyTo :  " form " ,
                items : [ new  Ext.form.ComboBox({
                            id :  " post " ,
                            fieldLabel :  " 四川的城市 " ,
                            triggerAction :  " all " ,
                            store : store,
                            displayField :  " province " ,
                            valueField :  " post " ,
                            mode :  " local " ,
                            forceSelection :  true ,
                            resization :  true ,
                            typeAhead :  true ,
                            value :  " 3 " ,
                            handleHeight :  100
                        })]

            })
}
 function  form5() {
     var  store  =   new  Ext.data.SimpleStore({
                proxy :  new  Ext.data.HttpProxy({
                            url :  " /learn/index.jsp "
                        }),
                fields : [ " bookName " ]
            });
     var  form  =   new  Ext.form.FormPanel({
                title :  " 远程数据 " ,
                labelSeparator :  " :  " ,
                labelWidth :  80 ,
                bodyStyle :  " padding:5 5 5 5 " ,
                frame :  true ,
                height :  100 ,
                width :  270 ,
                applyTo :  " form " ,
                items : [ new  Ext.form.ComboBox({
                            id :  " book " ,
                            allQuery :  " allbook " ,
                            loadingText :  " 正在加载数据 " ,
                            minChars :  3 ,
                            queyDelay :  300 ,
                            queryParam :  " searchbook " ,
                            fieldLabel :  " 书籍列表 " ,
                            triggerAction :  " all " ,
                            store : store,
                            displayField :  " bookName " ,
                            mode :  " remote "
                        })]
            })
}
 function  form6() {
    Ext.apply(Ext.form.VTypes, {
                dateRange :  function (val, field) {
                     if  (field.dateRange) {
                         var  beginId  =  field.dateRange.begin;
                         /* * 根据组件id得到组件  */
                         this .beginField  =  Ext.getCmp(beginId);
                         var  endId  =  field.dateRange.end;
                         this .endField  =  Ext.getCmp(endId);
                         var  beginDate  =   this .beginField.getValue();
                         var  endDate  =   this .endField.getValue();
                    }
                     if  (beginDate  <=  endDate) {
                         return   true ;
                    }  else  {
                         return   false ;
                    }
                },
                dateRangeText :  " 开始日期不能大于结束日期 "
            });
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget  =   " side " ;
     var  dateForm  =   new  Ext.form.FormPanel({
                title :  " 自定义form " ,
                labelSeparator :  " : " ,
                labelWidth :  80 ,
                bodyStyle :  " padding:5 5 5 5 " ,
                frame :  true ,
                height :  130 ,
                width :  300 ,
                applyTo :  " form " ,
                items : [ new  Ext.form.DateField({
                                    id :  " beginDate " ,
                                    format :  " Y年m月d日 " ,
                                    width :  150 ,
                                    allowBlank :  false ,
                                    readOnly :  true ,
                                    value :  new  Date(),
                                    fieldLabel :  " 开始日期 " ,
                                    dateRange : {
                                        begin :  " beginDate " ,
                                        end :  " endDate "
                                    },
                                    vtype :  " dateRange "
                                }),  new  Ext.form.DateField({
                                    id :  " endDate " ,
                                    format :  " Y年m月d日 " ,
                                    width :  150 ,
                                    allowBlank :  false ,
                                    readOnly :  true ,
                                    value :  new  Date(),
                                    fieldLabel :  " 开始日期 " ,
                                    dateRange : {
                                        begin :  " beginDate " ,
                                        end :  " endDate "
                                    },
                                    vtype :  " dateRange "
                                })],
                buttons : [ new  Ext.Button({
                            text :  " 提交 " ,
                            handler :  function () {
                                 if  (dateForm.form.isValid()) {
                                    Ext.Msg.alert( " 提示 " ,  " 验证通过提交表单 " );
                                }
                            }
                        })]
            })
}
 function  form7() {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget  =   " side " ;
     var  productForm  =   new  Ext.form.FormPanel({
                title :  " 表单加载示例 " ,
                labelWidth :  100 ,
                width :  300 ,
                frame :  true ,
                labelSeparator :  " :  " ,
                applyTo :  " form " ,
                items : [ new  Ext.form.TextField({
                                    fieldLabel :  " 产品名称 " ,
                                    name :  " productName " ,
                                    width :  150 ,
                                    value :  " HP5720本本 "
                                }),  new  Ext.form.NumberField({
                                    fieldLabel :  " 金额 " ,
                                    name :  " price " ,
                                    width :  150 ,
                                    value :  100
                                }),  new  Ext.form.DateField({
                                    fieldLabel :  " 生产日期 " ,
                                    formate :  " Y年m月d日 " ,
                                    width :  150 ,
                                    name :  " date " ,
                                    value :  new  Date()
                                }),  new  Ext.form.TextArea({
                                    id :  " introduction " ,
                                    name :  " introduction " ,
                                    fieldLabel :  " 产品简介 " ,
                                    width :  150
                                })],
                buttons : [ new  Ext.Button({
                            text :  " 加载简介 " ,
                            handler : loadCallBack
                        })]
            });
     function  loadCallBack() {
        productForm.form.load({
                    waitMsg :  " 正在加载产品简介信息 " ,
                    waitTitle :  " 提示 " ,
                    url :  " /learn/productServe.jsp " ,
                    method :  " POST " ,
                    success :  function (form, action) {
                        Ext.Msg.alert( " 提示 " ,  " 产品加载成功 " );
                    },
                    failure :  function (form,action) {
                        Ext.Msg.alert( " 提示 " ,  " 产品简介加载失败<br/>失败原因: "   +  action.failureType);
                    }
                });
    }
}
 function  form8()
{
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = " side " ;
     var  loginForm  =   new  Ext.form.FormPanel({
        title: " 登陆 " ,
        labelWidth: 60 ,
        width: 230 ,
        frame: true ,
        labelSeparator: " : " ,
        applyTo: " form " ,
        items:[
             new  Ext.form.TextField({
                fieldLabel: " 用户名 " ,
                name: " userName " ,
                allowBlank: false ,
                vtype: " email "
            }),
             new  Ext.form.NumberField({
                fieldLabel: " 密码 " ,
                name: " password " ,
                allowBlank: false
            })
        ],
        buttons:[
             new  Ext.Button({
                text: " 登陆 " ,
                handler:login
            }),
             new  Ext.Button({
                text: " 重置 " ,
                handler:reset
            })
        ]
    });
     function  login()
    {
        loginForm.form.submit({
        clientValidation: true ,waitMsg: " 正在登录系统请稍后 " ,
        waitTitle: " 提示 " ,
        url: " /learn/loginServe.jsp " ,
        method: " GET " ,
        success: function (form,action)
        {
            Ext.Msg.alert( " 提示 " , " 系统登录成功 " );
        },
        failure: function (form,action)
        {
            Ext.Msg.alert( " 提示 " , " 系统登陆失败 "   +  action.failureType);
        }});
    }
     function  reset(){
        loginForm.form.reset();
    }
}
Ext.onReady(form8);
hwpokay
关注
专栏目录
Ext Form用法详解
Andy_java_的博客
10-27 1458
创建Extjs Form控件 //验证ip地址 Ext.apply(Ext.form.field.VTypes, {    IPAddress: function (v) {        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);    },    IPAddressText: '只能输入ip地址',    IP
Ext 添加功能form表单实例
03-22
Ext 添加功能form表单实例 适合Ext初学者
Ext Form全攻略
09-02
Ext Form全攻略 Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略
Ext之Form
qinjingkai的专栏
03-02 254
    form是开发中页面最经常用到的元素了,它的功能就是和用户交互,把用户输入的参数发送到后台,以及根据后台的处理结果执行进一步的操作;现在把Ext中的form总结如下(代码形式):     &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt;   &lt;head&gt...
Ext Form全攻略1
小S
10-21 2529
1 Form概述Formpanel是一个重要的页面组件，在具体的应用开发中，信息的添加和修改，数据的提交和加载， 都离不开formpanel的支持。Formpanel自动实现了form布局模式。　　虽然没有列出的选项,配置FormPanel一样,FormPanel类还接受了所有的配置选项要求配置内部Ext.form.BasicForm为文件上传或提供的功能,验证并递交了加载形式。　　注:如果子类F
Ext.form.TextField组件
weixin_34032827的博客
01-21 235
Ext.form.TextField组件的基本用法: &lt;form id="form1" runat="server"&gt;&lt;div&gt;&lt;div id="Bind_TextField"&gt;&lt;/div&gt;&lt;br /&gt;&lt;div id="Bind_Button"&gt;&lt;
ext form gridpanel
03-28
"Ext Form GridPanel"是Ext JS库中的一个重要组件，它结合了表格（Grid）和表单（Form）的功能，提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中，这种组件常用于数据录入和展示，尤其适用于处理...
ext form 表单提交数据的方法小结
09-06
在EXT JS中，表单（Form）是数据输入和验证的核心组件。本文主要总结了EXT表单提交数据的三种常见方法：EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交（默认提交方式） ...
ext form 例子
11-07
ext form 例子，有输入框，选择框，下拉框，复选框，日历等的复杂ExtJS例子
Ext.form
Blitz_Man
06-09 539
Ext.form ol { margin-left:60px; list-style-type:decimal; } var myForm; Ext.onReady(function(){ Ext.QuickTips.init();//是弹出了提示，不过是英文的，这个需要改 Ext.BLANK_IMAGE_
Ext系列form控件篇
Kenshin Cui's Blog
08-16 9592
在这里我们一块看一下form中几个控件，因为form控件较多这里只简单看几个比较有代表性的。 TextField 这个是最基本的form控件了，我们看一段代码： Ext.QuickTips.init();//显示提示信息 Ext.form.Field.prototype.msgTarget = 'side'; //验证未通过时在对应的控件右侧显示红色提示 var tfUserName=new Ext.form.TextField({     id:"userName",     name:'u
Ext2.0 form使用实例
热门推荐
黄灯桥的专栏
10-02 2万+
 Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！我们先来看看我们将要设计的form的情况：
Ext2中form提交
yuejun13的专栏
04-09 208
使用ext2中的form 照文档上的来做始终无法成功 [code="js"] onSubmit: Ext.emptyFn, submit: function() { this.getEl().dom.action='form.jsp'; this.getEl().dom.submit(); } [/code] 这样写，虽然后台程序可以获取值但无法将信息返回页面，原因还不知...
Ext 复杂Form布局
年华耗尽，繁星满地。
12-10 404
[code="Html"] New Document [/code]
Extjs学习 Ext.form.FormPanel
jazywoo_在路上
07-13 2737
ExtJS的表单是在html表单的基础上封装来的，样式变成漂亮的样式，但是如果你使用FireBug查看，你就会发现，这些表单控件依然是原来的控件，只是加上了css，让他变得漂亮。     但是如果只是加上css样式，在我看来，ExtJS无法给我一个理由，让我选择它的表单控件，而不是选择控件，因为我已经使用原有的控件相当熟练。     Extjs考虑了类似我这样的想法，它当然有更强大的功
ExtJS学习笔记(三) Form
左手121
01-09 496
Ext.onReady(function () { setForm(); });var store = Ext.create('Ext.data.Store', { fields: ['id', 'title'], data: [ { "id": "0", "title": "Aa" }, { "id": "1", "title": "Bb"
EXT.form组件详解：FormPanel到TriggerField
"EXT.form组件包括一系列用于构建Web应用程序表单的高级组件，如FormPanel、Checkbox、ComboBox、DateField、Field、FieldSet、Hidden、HtmlEditor、NumberField、Radio、TextArea、TextField、TimeField和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值