`
hwpok
  • 浏览: 250709 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext form

    博客分类:
  • EXT
阅读更多
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);
分享到:
评论

相关推荐

    Ext Form全攻略

    Ext Form全攻略 Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略

    ext form 例子

    ext form 例子,有输入框,选择框,下拉框,复选框,日历等的复杂ExtJS例子

    ext form gridpanel

    "Ext Form GridPanel"是Ext JS库中的一个重要组件,它结合了表格(Grid)和表单(Form)的功能,提供了一种强大而灵活的方式来显示和编辑数据。在Web应用程序开发中,这种组件常用于数据录入和展示,尤其适用于处理...

    ext form小例子

    在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...

    Ext Form 示例

    Ext Form 是 Ext JS 库中的一个关键组件,用于创建丰富的、交互式的网页表单。它在Web应用程序中扮演着至关重要的角色,允许用户输入、编辑和提交数据。本示例旨在展示如何使用 Ext Form 来构建基本的表单结构以及与...

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...

    Ext form_load

    在Ext JS中,`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制,这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释: 1...

    Ext2.0 form使用实例的例程

    在这个“Ext2.0 form使用实例的例程”中,我们将深入探讨Ext 2.0的表单(form)组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色,用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...

    EXT.form组件

    EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...

    EXT制作的FORM,可以与Servlet进行交互

    EXT form通常由`Ext.form.Panel`或者`Ext.form.FieldSet`构建,其中包含各种字段如文本框、复选框、下拉框等。每个字段都有自己的配置选项,如`fieldLabel`(字段标签)、`name`(标识符)等。通过这些配置,我们...

    Ext.form表单中各种属性应用详解

    ### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...

    ext文档 和实例

    以下将详细介绍EXT中的"form"、"grid"及"高级详解"的相关知识点。 一、EXT Form EXT Form组件是用于创建复杂Web表单的强大工具。它支持多种输入类型,如文本框、密码框、下拉选择、复选框、单选按钮等,并提供了...

    EXT dojochina文本框示例Ext.form.TextField.rar

    在本示例中,"EXT dojochina文本框示例Ext.form.TextField.rar"是一个压缩包,包含了EXT框架中关于`Ext.form.TextField`组件的示例代码。 `Ext.form.TextField`是EXT框架中的一个核心组件,用于创建基本的输入字段...

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    在本文中,我们将深入探讨Ext Form组件,这是Ext JS中的核心组件之一,用于创建复杂的表单界面。表单是任何Web应用中收集用户输入的关键部分,而Ext JS提供了一套完整的工具来帮助开发者创建、验证和提交表单数据。 ...

    Ext-2.1 Ext 2全文档

    Ext 2.1提供了多种布局模式,如fit布局、border布局、form布局等,以适应不同类型的用户界面需求。布局管理器负责调整组件大小和位置,确保它们在容器中正确显示。 此外,Ext 2.1还包含一套强大的表格处理功能。Ext...

    Ext 动态加载表单数据

    首先,理解Ext JS中的表单(Form)组件是至关重要的。表单通常由一系列字段(Fields)组成,如文本框、复选框、下拉列表等,用于用户输入数据。Ext Form提供了一种结构化的方式来组织这些字段,并提供了验证、提交和...

    EXT异步提交FORM表单

    ### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...

    ext form 表单提交数据的方法小结

    在EXT JS中,表单(Form)是数据输入和验证的核心组件。本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) ...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    ext培训文档doc

    6. **EXT Form**:EXT的表单组件支持各种输入类型,如文本、密码、日期、下拉框等,还有表单验证功能,保证了数据的准确性和完整性。 7. **EXT Tree**:EXT的树形视图组件适用于层次结构数据的展示,可以进行展开、...

Global site tag (gtag.js) - Google Analytics