Ext.form.Basic

Alternate names

Ext.form.BasicForm

Hierarchy

Requires

Files

为在Ext.container.Container内的Field实例集合提供输入栏管理,验证,提交和加载服务。 建议使用Ext.form.Panel作为表单容器,因为其会自动挂靠Ext.form.Basic的实例(加上其他与域有关的方便配置)

表单操作

Basic类委托给Ext.form.action.Action的实例控制表单加载和提交。 查看不同的Action对于每一个功能的特殊细节实现,和doAction文档,详细说明了规定在每个action调用中的配置项。

默认的提交Action是Ext.form.action.Submit,使用Ajax请求把表单的值提交到配置的URL。 为了使标准浏览器提交Ext表单,使用standardSubmit配置选项。

文件上传

标准的Ajax技术不能执行文件上传;详情查看hasUpload的描述。 如果应用文件上传,应该查看方法描述。

用法示例:

Ext.create('Ext.form.Panel', {
    title: 'Basic Form',
    renderTo: Ext.getBody(),
    bodyPadding: 5,
    width: 350,

    // Any configuration items here will be automatically passed along to
    // the Ext.form.Basic instance when it gets created.

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    items: [{
        xtype: 'textfield',
        fieldLabel: 'Field',
        name: 'theField'
    }],

    buttons: [{
        text: 'Submit',
        handler: function() {
            // The getForm() method returns the Ext.form.Basic instance:
            var form = this.up('form').getForm();
            if (form.isValid()) {
                // Submit the Ajax request and handle the response
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result ? action.result.msg : 'No response');
                    }
                });
            }
        }
    }]
});
Defined By

Config options

Ext.form.Basic
: Object

如果指定,加载和提交操作将用Ext.form.action.DirectLoadExt.form.action.DirectLoad进行处理。 已导入了的Ext.direct.Manager方法可以在这里指定加载和提交表单。 API方法也可以被指定为字符串。参考Ext.data.proxy.Direct.directFn。 例如:

api: {
    load: App.ss.MyProfile.load,
    submit: App.ss.MyProfile.submit
}

加载操作可以用paramOrderparamsAsHash定制加载方法的调用方式。 提交操作将一直使用标准表单提交。该“formHandler”配置必须在已导入的Ext.direct.Manager关联的服务端方法设置。

Ext.form.Basic
baseParams : Object

参数,来传递所有的请求。例如:baseParams: {id: '123', foo: 'bar'}

使用Ext.Object.toQueryString把参数编译成标准HTTP参数。

参数,来传递所有的请求。例如:baseParams: {id: '123', foo: 'bar'}

使用Ext.Object.toQueryString把参数编译成标准HTTP参数。

一个Ext.data.DataReader(例如:Ext.data.reader.Xml)用来读取表单“submit”操作返回的错误消息。 这是可选的,因为有内置的处理JSON响应支持。

这对于无效的字段提供信息的记录必须使用字段名称(或ID)作为记录的ID, 并且必须包含一个名为“msg”字段包含错误信息。

该errorRader不必是个成熟的Reader实现。 它仅需要实现“read(xhr)”函数,返回一个Record数组对象, 使用如下结构:

{
    records: recordArray
}

一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象, 一次添加多个事件处理函数。

Ext JS 组建的DOM事件

虽然一些Ext JS组件类输出选定的DOM事件(例如"click"、"mouseover"等), 但是这只能通过添加额外的值(如果能)。例如,DataViewitemclick传递被单击的节点。为了通过Component的子元素直接访问DOM事件, 我们需要指定element选项来标识要 添加DOM监听器的Component属性:

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});
Ext.form.Basic
method : String

如果操作选项未提供时使用的表单操作的请求方法(GET或POST)

如果操作选项未提供时使用的表单操作的请求方法(GET或POST)

Ext.form.Basic
: String/String[]

要被服务端执行的参数列表。仅被用来api“load”配置。

规定必须在服务端执行的有序参数即可以是String数组也可以是带分隔符的String,分隔符有空格、逗号、或竖线。 例如,下面的任何格式都合格:

paramOrder: ['param1','param2','param3']
paramOrder: 'param1 param2 param3'
paramOrder: 'param1,param2,param3'
paramOrder: 'param1|param2|param'
Ext.form.Basic
: Boolean

仅被用来api“load”配置。 如果为true,参数将作为命名参数的一个哈希集合。 提供的paramOrder取消这种配置。

Defaults to: false

一个Ext.data.DataReader(例如:Ext.data.reader.Xml)用来当执行“load”操作时读取数据。 这是可选的,因为有内置的处理JSON响应支持。

Ext.form.Basic
: Boolean

如果设为true,使用标准HTML表单提交替代XHR(Ajax)式样表单提交。 所有字段值,再加上通过baseParams配置任何额外的参数或“options”来submit,将会包括在提交表单中的值。

Ext.form.Basic
: Number

超时时间,以秒为单位。

Defaults to: 30

Ext.form.Basic
: Boolean

如果设为true,reset()重置到最近被加载的或setValues()的数据,而不是最初创建表单时的。

Defaults to: false

Ext.form.Basic
url : String

如果doAction未被提供时使用的表单操作URL。

如果doAction未被提供时使用的表单操作URL。

Ext.form.Basic
: String/HTMLElement/Ext.Element

默认用Ext.MessageBox.wait作为等待消息的显示。 你可以以特定元素为目标通过传入它或它的id或者遮罩表单本身传入都合规。

Ext.form.Basic
: String

等待消息框显示的默认标题

Defaults to: "Please Wait..."

Defined By

Properties

扩展事件

Defaults to: []

本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听...

本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发,它的值是真的, 如果没有必要,就是假的。

本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次,这尤其有用。 用法:

 if (this.hasListeners.foo) {
     this.fireEvent('foo', this, arg1);
 }

在本类中设置为true将一个对象标识为实例化的Observable或其子类。

Defaults to: true

附加在BasicForm上的容器组件。

附加在BasicForm上的容器组件。

本身 获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 ...

本身

获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 参见 statics 详细对比

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // 依赖 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard' 雪豹

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Methods

Defined By

Instance Methods

Ext.form.Basic
new( Ext.container.Container owner, Object config ) : Object

创建新表单。

Parameters

Returns

( Object config )private

添加配置

Parameters

向本Observable可能触发的事件列表中添加指定的事件。

Parameters

  • eventNames : Object/String...

    要么是有事件名作为属性,属性值为 true的对象。例如:

    this.addEvents({
        storeloaded: true,
        storecleared: true
    });
    

    要么是作为参数的任意个数的事件名。例如:

    this.addEvents('storeloaded', 'storecleared');
    

Parameters

( String/Object eventName, [Function fn], [Object scope], [Object options] )
向本对象添加一个事件处理函数,例如: myGridPanel.on("mouseover", this.onMouseOver, this); 这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如: ...

向本对象添加一个事件处理函数,例如:

myGridPanel.on("mouseover", this.onMouseOver, this);

这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

你也能为每个事件处理函数单独指定选项:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

也能使用在特定作用域的方法。注意 必须指定scope:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters

  • eventName : String/Object

    被监听的事件名。 也可以是属性名字是事件名字的对象。

  • fn : Function (optional)

    事件调用的方法, 或者如果指定了scope,在指定scope的方法名*。 会被调用, 参数为fireEvent的参数加上下述options参数。

  • scope : Object (optional)

    事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

  • options : Object (optional)

    包含事件处理函数配置的对象。

    注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

    这个对象可能包含以下任何一个属性:

    • scope : Object

      事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

    • delay : Number

      事件触发后,调用事件处理函数延时毫秒数。

    • single : Boolean

      设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。

    • buffer : Number

      使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数再调用, 新的事件处理函数接替。

    • target : Ext.util.Observable

      只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数

    • element : String

      这个选项只对绑定在Components上的监听器有效。 Component的一个属性名,这个属性引用一个待添加监听器的元素

      这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      

      组合选项

      使用options参数, 可以组合不同类型的监听器:

      一个延时的一次性监听器:

      myPanel.on('hide', this.handleClick, this, {
          single: true,
          delay: 100
      });
      
向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除 ...

向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除

Parameters

  • item : Ext.util.Observable/Ext.Element

    添加监听器的目标项。

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

  • opt : Object

    (可选的)如果ename参数是事件名, 这就是addListener的选项。

( Object name, Object member )private

Parameters

( Object xtype )private

添加 Xtype

Parameters

Ext.form.Basic
( Ext.form.action.Action action, Boolean success )private

action被执行后被调用。

Parameters

Ext.form.Basic
( Object obj ) : Ext.form.Basic

调用Ext.applyIf使表单中全部字段包括传入的对象。

Parameters

  • obj : Object

    要被apply的对象

Returns

Ext.form.Basic
( Object obj ) : Ext.form.Basic

调用Ext.apply使表单中全部字段包括传入的对象。

Parameters

  • obj : Object

    要被apply的对象

Returns

Ext.form.Basic
( Ext.form.action.Action action )private

action被执行前被调用。

Parameters

( Array/Arguments ) : Objectdeprecatedprotected
调用原来的方法,这是以前的override重写 Ext.define('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); ...

调用原来的方法,这是以前的override重写

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callOverridden();

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

This method has been deprecated since 4.1

版本 使用 callParent 代替.

Parameters

  • : Array/Arguments

    参数的参数,数组或'参数'对象 来自当前方法,例如: this.callOverridden(arguments)

Returns

  • Object

    返回调用重写方法的结果。

( Array/Arguments args ) : Objectprotected

所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

这可以用来重写如下:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // 调用原来的My.Derived构造
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // 现在提示 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Base.method
         }
     }
 });

 alert(My.Base.method(10);     // alerts 10
 alert(My.Derived2.method(10); // alerts 20

然后,它也可以重写静态方法。

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10); // 现在提示 40

Parameters

  • args : Array/Arguments

    这个参数, 通过当前方法得到数组或者 arguments 对象, 例如: this.callParent(arguments)

Returns

  • Object

    返回调用父类的方法的结果。

Ext.form.Basic
( )

检查整个表单的dirty状态从上一次检查后是否改变了,如果改变了,触发dirtychange事件。 当单个字段的dirty状态改变时,该项自动被调用

Ext.form.Basic
( )

检查整个表单的有效性自动上一次检查后是否发生了变化,如果改变了,触发validitychange事件。 当单个字段的有效性发生变化,该项自动调用。

Ext.form.Basic
( ) : Ext.form.Basic

清除表单中的全部无效字段消息。

Returns

移除本对象的包括受管理的监听器在内的所有监听器

移除本对象的所有受管理的监听器

( String eventName, Array args, Boolean bubbles )private

Continue to fire event.

Parameters

( Object newName, [Array beginEnd] ) : Functionprivate

Creates an event handling function which refires the event from this object as the passed event name.

Parameters

  • newName : Object
  • beginEnd : Array (optional)

    The caller can specify on which indices to slice

Returns

Ext.form.Basic
( )

销毁该对象。

Ext.form.Basic
( String/Ext.form.action.Action action, [Object options] ) : Ext.form.Basic

执行欲定义的动作(Ext.form.action.Action的实现)来执行应用特有的处理。

Parameters

  • action : String/Ext.form.action.Action

    预定义操作类型的名字,或者要执行的Ext.form.action.Action实现。

  • options : Object (optional)

    如果action参数是String,这些选项传入Ext.form.action.Action将获得创建。

    所有下面列出的配置项被submitload操做都支持, 除非另有说明(自定义操作也可以接受其他的配置项):

    • url : String

      action的url(默认为表单的url。)

    • method : String

      表单使用的方法(默认表单的method,未定义时为POST)

    • params : String/Object

      传入参数(默认表单的baseParams,未定义时为none)

      使用Ext.Object.toQueryString把参数被编码成标准的HTTP参数。

    • headers : Object

      action设置的请求头。

    • success : Function

      成功相应后将被调用的回调函数(参见上面的submitload,描述了什么是成功的相应)。

      Parameters

    • failure : Function

      The callback that will be invoked after a failed transaction attempt.

      Parameters

    • scope : Object

      调用回调函数的作用域(回调函数的引用)。

    • clientValidation : Boolean

      只有提交Action。在提交前最终调用isValid,确定表单域是否有效。 设置为false,以防止这一点。如果未定义,提交前执行域校验。

Returns

通过调用this.getBubbleTarget()(如果存在)允许本Observable对象触发的事件沿着继承体系起泡 在Observable基类中没有实现类。 ...

通过调用this.getBubbleTarget()(如果存在)允许本Observable对象触发的事件沿着继承体系起泡 在Observable基类中没有实现类。

这通常被Ext.Components用来将事件起泡到它的容器。 见Ext.Component.getBubbleTarget。Ext.Component中的默认实现 返回Component的直接容器。但是如果需要一个明显的target, 它可以被重写 以更快地访问需要的target。

使用范例:

Ext.override(Ext.form.field.Base, {
    //  Add functionality to Field's initComponent to enable the change event to bubble
    initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
        this.enableBubble('change');
    }),

    //  We know that we want Field's events to bubble directly to the FormPanel.
    getBubbleTarget : function() {
        if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
        }
        return this.formPanel;
    }
});

var myForm = new Ext.formPanel({
    title: 'User Details',
    items: [{
        ...
    }],
    listeners: {
        change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
        }
    }
});

Parameters

  • eventNames : String/String[]

    待起泡的事件名,或者事件名数组。

( Object config )private

拓展

Parameters

Ext.form.Basic
( String id ) : Ext.form.field.Field

通过id或name查找表单内的特定Ext.form.field.Field

Parameters

Returns

使用传递过来的参数(去掉事件名,加上传递给addListener的options对象 )触发指定的事件。 ...

使用传递过来的参数(去掉事件名,加上传递给addListeneroptions对象 )触发指定的事件。

通过调用enableBubble,一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。

Parameters

  • eventName : String

    待触发的事件名。

  • args : Object...

    传递给事件处理函数的可变数量的参数

Returns

  • Boolean

    如果任何一个事件处理函数返回false,就返回false,否则返回true。

Ext.form.Basic
( ) : Ext.util.MixedCollectionprivate

查找并返回一组表单内部绑定到的域的所有项

Returns

Gets the bubbling parent for an Observable

Returns

( Object name )private

得到配置项

Parameters

Ext.form.Basic
( [Boolean dirtyOnly] ) : Object

检索表单中字段为一组键值对的,用getSubmitData()方法收集值。 如果相同的name下有多个字段返回多值,将被合并成一个数组。 这类似getValues,除了这个方法收集特定类型数据值(例如Date对象的日期字段)之外, getValues仅收集提交的String值。

Parameters

  • dirtyOnly : Boolean (optional)

    如果为true,只有那些dirty的字段将被包含在结果中。

    Defaults to: false

Returns

返回所有者容器中的所有的Ext.form.field.Field的组件。

Returns

得到初始化配置项

Parameters

Ext.form.Basic
( ) : Ext.data.Model

返回上次被加载的Ext.data.Model实例

Returns

Ext.form.Basic
( [Boolean asString], [Boolean dirtyOnly], [Boolean includeEmptyText] ) : String/Object

检索表单中字段为一组键值对的,用getSubmitData()方法收集值。 如果相同的name下有多个字段返回多值,将被合并成一个数组。 这类似getFieldValues,除了这个方法仅收集提交的String值之外, getFieldValues收集特定类型数据值(例如Date对象的日期字段)。

Parameters

  • asString : Boolean (optional)

    如果为true,将返回键值集合作为单一的URL编码的参数字符串。

    Defaults to: false

  • dirtyOnly : Boolean (optional)

    如果为true,只有那些dirty的字段将被包含在结果中。

    Defaults to: false

  • includeEmptyText : Boolean (optional)

    ] 如果为true,空字段的配置emptyText将被使用。

    Defaults to: false

Returns

( Object config )private

根据名称判断配置项是否存在

Parameters

Ext.form.Basic
( )

如果表单包含任何无效字段时返回true。 该方法返回后,没有字段会被标记为无效;要触发字段的标记,使用 isValid代替。

检查本对象是否有特定事件的监听器, 或者检查事件是否起泡。 检查的结果表明事件是否需要出发。

Parameters

  • eventName : String

    待检查的事件名

Returns

  • Boolean

    如果事件被监听或者起泡,返回true, 否则返回false

Ext.form.Basic
( )
如果表单包含文件上传域,返回true。这是用于确定提交表单的方法: 文件上传不能用标准“Ajax”技术执行,也就是不能执行XMLHttpRequests。 ...

如果表单包含文件上传域,返回true。这是用于确定提交表单的方法: 文件上传不能用标准“Ajax”技术执行,也就是不能执行XMLHttpRequests。 作为替代,一个隐藏的包含全部域的<form>元素被暂时创建,并与其target提交设置为指向一个动态生成的, 隐藏的<iframe>被插入到document,但是在返回数据已经收集后被移除。

浏览器解析服务器响应以创建document的IFRAME。如果服务器用JSON发送返回的对象, 那么Content-Type头必须设置成"text/html",为了统治浏览器插入未改变的文本到document的body。

作用于HTML解析的字符必须被作为HTML实体,所以把"<"编码为"&lt;",把"&"编码为"&amp;"等等。

相应文本从document中检索,并创建一个假XMLHttpRequest对象包含以符合时间处理程序和回调要求的responseText属性。

注意,文件上传包被发送的内容类型multipart/form和一些服务器技术(特别是JEE), 可能需要一些自定义的处理,以从包内容检索参数名和参数值。

( Object config ) : Objectprotected
这个类的初始化配置。典型例子: Ext.define('My.awesome.Class', { // 这是默认配置 config: { name: 'Awesome', isAwes...

这个类的初始化配置。典型例子:

Ext.define('My.awesome.Class', {
    // 这是默认配置
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome' 超级棒

Parameters

Returns

  • Object

    mixins 混入原型 键-值对

Ext.form.Basic
( )private

做任何布局后的初始化

Ext.form.Basic
( )

如果任何表单中的字段的原始值改变了,返回true。

注意,如果BasicForm配置了trackResetOnLoad,那么字段的原始值被改变, 当值被setValuesloadRecord加载时。

Ext.form.Basic
( )

如果表单上的客户端验证成功,返回true。 任何无效字段将会被标记为invalid。 如果不做任何标记,仅想要确定真个表单的有效性,使用hasInvalidField代替。

Ext.form.Basic
( Object options ) : Ext.form.Basic

doload action的快捷方式。

Parameters

Returns

Ext.form.Basic
( Ext.data.Model record ) : Ext.form.Basic

加载Ext.data.Model到该表单,通过调用setValuesrecord data。 See also trackResetOnLoad.

Parameters

Returns

批量标记表单内无效字段。

Parameters

Returns

( Object name, Object mixinClass )private

内部使用混入预处理器(mixins pre-processor)

Parameters

addManagedListener的简写方法 向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除 ...

addManagedListener的简写方法

向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除

Parameters

  • item : Ext.util.Observable/Ext.Element

    添加监听器的目标项。

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

  • opt : Object

    (可选的)如果ename参数是事件名, 这就是addListener的选项。

removeManagedListener的简写方法 移除通过mon方法添加的监听器。 ...

removeManagedListener的简写方法

移除通过mon方法添加的监听器。

Parameters

  • item : Ext.util.Observable/Ext.Element

    待移除监听器的项

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

( String/Object eventName, [Function fn], [Object scope], [Object options] )
addListener的简写方法 向本对象添加一个事件处理函数,例如: myGridPanel.on("mouseover", this.onMouseOver, this); 这个方法也允许传递单个参数,参数为一个 包含指定...

addListener的简写方法

向本对象添加一个事件处理函数,例如:

myGridPanel.on("mouseover", this.onMouseOver, this);

这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

你也能为每个事件处理函数单独指定选项:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

也能使用在特定作用域的方法。注意 必须指定scope:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters

  • eventName : String/Object

    被监听的事件名。 也可以是属性名字是事件名字的对象。

  • fn : Function (optional)

    事件调用的方法, 或者如果指定了scope,在指定scope的方法名*。 会被调用, 参数为fireEvent的参数加上下述options参数。

  • scope : Object (optional)

    事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

  • options : Object (optional)

    包含事件处理函数配置的对象。

    注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

    这个对象可能包含以下任何一个属性:

    • scope : Object

      事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

    • delay : Number

      事件触发后,调用事件处理函数延时毫秒数。

    • single : Boolean

      设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。

    • buffer : Number

      使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数再调用, 新的事件处理函数接替。

    • target : Ext.util.Observable

      只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数

    • element : String

      这个选项只对绑定在Components上的监听器有效。 Component的一个属性名,这个属性引用一个待添加监听器的元素

      这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      

      组合选项

      使用options参数, 可以组合不同类型的监听器:

      一个延时的一次性监听器:

      myPanel.on('hide', this.handleClick, this, {
          single: true,
          delay: 100
      });
      
( Object names, Object callback, Object scope )private

更新配置项

Parameters

( Object fn, Object scope )private

扩展事件

Parameters

Ext.form.Basic
( Object parent, Object child )private

处理增加或移除子节点项目。使域缓存列表失效,以便getFields下一次刷新查询时被调用。 还在增加域时增加了状态改变事件的监听,并通过formBind=true跟踪组件。

Parameters

Ext.form.Basic
( Boolean valid )private

处理表单的有效性改变。 如果有带formBind=true的任何子组件,那么它们基于新的有效性使可用/禁用。

Parameters

让给定的类成为可观察的实例。 这个方法在有类从本类派生或者使用本类作为一个mixin时调用。

Parameters

( Object origin, String[] events, [String prefix] )

从指定的Observable接替选定的事件就好像事件是this触发的。

例如,如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:

this.relayEvents(this.getStore(), ['load']);

grid实例将会有一个observable的'load'事件, 这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数 可以使用this访问grid。

Parameters

  • origin : Object

    本对象要接替事件的Observable对象

  • events : String[]

    被接替的事件名数组

  • prefix : String (optional)

    附加到事件名的公共前缀。例如:

    this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
    

    这样grid将会以'storeload'和'storeclear'转发store的'load'和'clear'事件。

移除事件处理函数。

Parameters

  • eventName : String

    事件处理函数关联的事件类型

  • fn : Function

    待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。

  • scope : Object

    (可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。

移除通过mon方法添加的监听器。

Parameters

  • item : Ext.util.Observable/Ext.Element

    待移除监听器的项

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

Remove a single managed listener item

Parameters

  • isClear : Boolean

    True if this is being called during a clear

  • managedListener : Object

    The managed listener item See removeManagedListener for other args

Ext.form.Basic
( ) : Ext.form.Basic

重置表单中的全部字段。

Returns

继续事件的触发(见suspendEvents)。

如果事件被使用queueSuspended参数挂起, 那么所有 在事件挂起期间触发的事件将会被发送到任意监听器。

( Object config, Object applyIfNotSet )private

设置配置项

Parameters

Ext.form.Basic
( Object/Object[] values ) : Ext.form.Basic

批量设置表单内的字段值。

Parameters

  • values : Object/Object[]

    既可以是以下形式的数组:

    [{id:'clientName', value:'Fred. Olsen Lines'},
     {id:'portOfLoading', value:'FXT'},
     {id:'portOfDischarge', value:'OSL'} ]
    

    也可以是以下形式的对象哈希:

    {
        clientName: 'Fred. Olsen Lines',
        portOfLoading: 'FXT',
        portOfDischarge: 'OSL'
    }
    

Returns

获取从该对象被实例化的类的引用。 请注意不同于 self, this.statics()是独立的作用域,无论this是否运行,总是返回其中的调用类。

Ext.define('My.Cat', {
    statics: {
        totalCreated: 0,
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        var statics = this.statics();

        alert(statics.speciesName);     // 总是等于'Cat',无论'this'是什么,
                                        // 相当于:My.Cat.speciesName

        alert(this.self.speciesName);   // 依赖 'this'

        statics.totalCreated++;
    },

    clone: function() {
        var cloned = new this.self;                      // 依赖 'this'

        cloned.groupName = this.statics().speciesName;   // 相当于: My.Cat.speciesName

        return cloned;
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',

    statics: {
        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
    },

    constructor: function() {
        this.callParent();
    }
});

var cat = new My.Cat();                 // alerts 'Cat', 然后提示 'Cat'

var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
alert(clone.groupName);                 // alerts 'Cat'

alert(My.Cat.totalCreated);             // alerts 3

Returns

Ext.form.Basic
( Object options ) : Ext.form.Basic

dosubmit action的快捷方式。默认使用AJAX提交表单。 如果standardSubmit配置可用,将使用标准表单元素提交,如果api配置存在, 它会使用Ext.direct.Direct 提交操作

以下代码:

myFormPanel.getForm().submit({
    clientValidation: true,
    url: 'updateConsignment.php',
    params: {
        newStatus: 'delivered'
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.action.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.action.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.action.Action.SERVER_INVALID:
               Ext.Msg.alert('Failure', action.result.msg);
       }
    }
});

以下将会处理成功提交的服务器响应:

{
    "success":true, // note this is Boolean, not string
    "msg":"Consignment updated"
}

并且以下是失败提交的服务端相应:

{
    "success":false, // note this is Boolean, not string
    "msg":"You do not have permission to perform this operation"
}

Parameters

Returns

挂起所有事件的触发。(见resumeEvents)

Parameters

  • queueSuspended : Boolean

    传true,让挂起的事件排队而不是丢弃所有挂起的事件, 这些事件将会在调用resumeEvents之后触发。

配置扩展

removeListener的简写方法 移除事件处理函数。 ...

removeListener的简写方法

移除事件处理函数。

Parameters

  • eventName : String

    事件处理函数关联的事件类型

  • fn : Function

    待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。

  • scope : Object

    (可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。

Ext.form.Basic
( [Ext.data.Model record] ) : Ext.form.Basic

beginEdit/endEdit块中,传入的Ext.data.Model对象内保存表单中的值。 如果记录未指定,将会尝试修改提供给loadRecord的记录(如果存在)。

Parameters

Returns

Defined By

Static Methods

( Object members )static

方法/属性添加到这个类的原型。

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Parameters

添加/重写这个类的静态属性。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Parameters

Returns

( Ext.Base fromClass, Array/String members ) : Ext.Baseprivatestatic
这个类的原型借用另一个类的成员 Ext.define('Bank', { money: '$$$', printMoney: function() { alert('$$$$$$$'); } ...

这个类的原型借用另一个类的成员

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Parameters

Returns

创建这个类的新实例。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

所有参数传递至类的构造。

Returns

创建现有的原型方法的别名。例如: Ext.define('My.cool.Class', { method1: function() { ... ...

创建现有的原型方法的别名。例如:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Parameters

以字符串格式,获取当前类的名称。

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Returns

( Object members ) : Ext.Basedeprecatedstatic

重写这个类的成员。通过callParent重写的方法可以调用。

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫!"
                          // alerts "I'm a cat!我是一只猫!"
                          // alerts "Meeeeoooowwww"

在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:

Ext.define('My.CatOverride', {
    override: 'My.Cat',
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

以上完成了相同的结果,但可以由Ext.Loader重写, 其目标类和生成过程中,可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。

This method has been deprecated since 4.1.0

使用 Ext.define 代替

Parameters

  • members : Object

    添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。

Returns

Defined By

Events

Ext.form.Basic
( Ext.form.Basic this, Ext.form.action.Action action, Object eOpts )

action执行完时触发。

Parameters

Ext.form.Basic
( Ext.form.Basic this, Ext.form.action.Action action, Object eOpts )

当action失效时触发。

Parameters

Ext.form.Basic
( Ext.form.Basic this, Ext.form.action.Action action, Object eOpts )

任何action被执行前触发。返回false取消action。

Parameters

Ext.form.Basic
( Ext.form.Basic this, Boolean dirty, Object eOpts )

当整个表单的dirty状态改变时触发。

Parameters

Ext.form.Basic
( Ext.form.Basic this, Boolean valid, Object eOpts )

当整个表单的有效性改变时触发。

Parameters