Javascript - ExtJs - FormPanel组件

自定义验证

配置字段的vtype属性可以自动开启验证,你也可以替换掉Ext内置的验证程序,替换方式如下所示。

//自定义验证
Ext.apply(Ext.form.VTypes, {
    otherTest1: function () { }, otherText: "",
    otherTest2: function () { }, otherText: ""
});

//替换之后再配置字段时可使用vtype:otherTest指向验证程序

//自定义验证
Ext.apply(Ext.form.VTypes, {
    testEmail: function (val, field) {
        var re = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
        if (!re.test(val)) { return false; }
        return true;
    },
    //验证失败信息
    testEmailText: ‘错误的邮箱格式‘
});

//在表单子控件里配置vtype : "testEmail"

时间: 2024-10-12 17:35:44

Javascript - ExtJs - FormPanel组件的相关文章

Javascript - ExtJs - 基本组件

与JQuery一样,ExtJs也有一个文档加载完毕的事件. Ext.onReady(function () { }); 基本组件(Basic components) 弹框组件 MessageBox MessageBox是Ext函数的静态函数成员,它提供一些列的弹出框方法. alert(title,suggest) title是标题,suggest是提示信息,弹出一个确定对话框. Ext.onReady(function () { Ext.MessageBox.alert("好吧,成功"

Javascript - ExtJs - GridPanel组件 - 编辑

如果要对表格进行编辑需要完成以下三步 1.将columns中需要编辑的列设为editor并提供编辑列时所要使用的控件. 2.在gridPanel渲染出来之前实例化插件类的子类,一个列编辑器对象. 3.将列编辑器对象绑定到gridPanel里. 4.指示gridPanel的选择模式为列选择模式. 以下仅仅只有配置编辑列的关键代码,代码片段如下: var columns = [ { header: '编号', dataIndex: 'id' }, { header: '性别', dataIndex:

Javascript - ExtJs - Window组件

Ext.create("Ext.window.Window", {    id: "AuthorizationWin",    title: "正在编辑……",    autoShow: true,     modal: true,//设置是否添加遮罩    layout: "anchor",    width:600,    height: 450,    items: [            Ext.getCmp(&qu

Javascript - ExtJs - TreePanel组件

TreePanel组件(Ext.tree.TreePanel) 树与节点 树面板组件的根是源头,从根上拓展出其它的子节点和叶子节点,前者可以继续拓展出子节点,后者因为是叶子,所以不再有子节.Json自身就有树的结构,所以使用Json作为树面板的data是顺理成章的事.节点都来自Ext.data.NodeInterface接口,该接口提供了对节点的创建.删除.替换.查找.获取.插入等操作. 树.配置.config store: Ext.data.store //配置数据存储器.配置root指定节点

Javascript - ExtJs - TabPanel组件

示例 Ext.create('Ext.tab.Panel', {    width: "100%",    renderTo: "tabBox",    items: [        {            title: "权限查询",            items: [                Ext.getCmp("TbRightPanel") //将组件放进tab            ]        }

ExtJs学习笔记之FormPanel组件

FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域. 1.示例: 在window窗体中添加一个FormPanel组件 <!DOCTYPE html> <html> <head> <meta

ExtJs FormPanel布局

FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接决定布局能否顺利实现.如果不再使用默认布局,那么我们必须为每一个元素指定一种布局方式,另外,还必须遵循以下几点:[1]落实到任何一个表单组件后,最后总是form布局[2]defaultType属性不一定起作用,必须显式为每一个表单组件指定xtype或new出新对象[3]在column布局中,通过co

extjs自定义组件类

在使用extjs开发应用系统时,难免会出现一个js文件内包含数百行甚至上千行代码的情况,例如程序主界面或者复杂一点的界面,下面介绍如何通过自定义组件减少单个extjs javascript代码行数的方法. 下图中的主界面显示了两个统计图: 最初的时候统计图的js代码是写死在tagpanel里面的,通过extjs 自定义组件的方法拆分成单独的类文件以后的代码: Ext.define('app.view.main.Main_Pie_Chart', { extend: 'Ext.panel.Panel

Extjs获得组件值的方式

 Extjs中找Form,Extjs找组件的方式: 1,Extjs.getCmp 2,通过组件之间的关系,up,down 结论: 1,form.getValues()和form.getForm().getValues()效果是一样的,如gradeCode和gradeCode2 2,form如果取单个值,可以通过先找组件,然后取组件值,如gradeCode3 3,form.getValues()返回的是一个数组,可以通过 . 来取得 在上次Grid选择多行提交的时候,我们获取records的内容是