|
|
Ext.form.field Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
Base
|
Base class for form fields that provides default event handling, rendering, and other common functionality
needed by all form field types. Utilizes the Ext.form.field.Field mixin for value handling and validation,
and the Ext.form.Labelable mixin to provide label and error message display. In most cases you will want to use a subclass, such as Ext.form.field.Text or Ext.form.field.Checkbox,
rather than creating instances of this class directly. However if you are implementing a custom form field,
using this as the parent class is recommended. Values and Conversions Because BaseField implements the Field mixin, it has a main value that can be initialized with the
value config and manipulated via the getValue and setValue methods. This main
value can be one of many data types appropriate to the current field, for instance a Date
field would use a JavaScript Date object as its value type. However, because the field is rendered as a HTML
input, this value data type can not always be directly used in the rendered field. Therefore BaseField introduces the concept of a "raw value". This is the value of the rendered HTML input field,
and is normally a String. The getRawValue and setRawValue methods can be used to directly
work with the raw value, though it is recommended to use getValue and setValue in most cases. Conversion back and forth between the main value and the raw value is handled by the valueToRaw and
rawToValue methods. If you are implementing a subclass that uses a non-String value data type, you
should override these methods to handle the conversion. Rendering The content of the field body is defined by the fieldSubTpl XTemplate, with its argument data
created by the getSubTplData method. Override this template and/or method to create custom
field renderings.
Example usage: // A simple subclass of BaseField that creates a HTML5 search field. Redirects to the
// searchUrl when the Enter key is pressed.
Ext.define('Ext.form.SearchField', {
extend: 'Ext.form.field.Base',
alias: 'widget.searchfield',
inputType: 'search',
// Config defining the search URL
searchUrl: 'http://www.google.com/search?q={0}',
// Add specialkey listener
initComponent: function() {
this.callParent();
this.on('specialkey', this.checkEnterKey, this);
},
// Handle enter key presses, execute the search if the field has a value
checkEnterKey: function(field, e) {
var value = this.getValue();
if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {
location.href = Ext.String.format(this.searchUrl, value);
}
}
});
Ext.create('Ext.form.Panel', {
title: 'BaseField Example',
bodyPadding: 5,
width: 250,
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'searchfield',
fieldLabel: 'Search',
name: 'query'
}]
renderTo: Ext.getBody()
});
|
|
|
BaseConfig
|
|
|
|
BaseEvents
|
|
|
|
Checkbox
|
Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. Also serves as a
parent class for radio buttons. Labeling: In addition to the standard field labeling options, checkboxes
may be given an optional boxLabel which will be displayed immediately after checkbox. Also see
Ext.form.CheckboxGroup for a convenient method of grouping related checkboxes. Values:
The main value of a checkbox is a boolean, indicating whether or not the checkbox is checked.
The following values will check the checkbox:
true 'true' '1' 'on' Any other value will uncheck the checkbox. In addition to the main boolean value, you may also specify a separate inputValue. This will be
sent as the parameter value when the form is submitted. You will want to set
this value if you have multiple checkboxes with the same name. If not specified, the value on
will be used.
Example usage: Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width : 300,
title : 'Pizza Order',
items: [
{
xtype : 'fieldcontainer',
fieldLabel : 'Toppings',
defaultType: 'checkboxfield',
items: [
{
boxLabel : 'Anchovies',
name : 'topping',
inputValue: '1',
id : 'checkbox1'
}, {
boxLabel : 'Artichoke Hearts',
name : 'topping',
inputValue: '2',
checked : true,
id : 'checkbox2'
}, {
boxLabel : 'Bacon',
name : 'topping',
inputValue: '3',
id : 'checkbox3'
}
]
}
],
bbar: [
{
text: 'Select Bacon',
handler: function() {
var checkbox = Ext.getCmp('checkbox3');
checkbox.setValue(true);
}
},
'-',
{
text: 'Select All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(true);
checkbox2.setValue(true);
checkbox3.setValue(true);
}
},
{
text: 'Deselect All',
handler: function() {
var checkbox1 = Ext.getCmp('checkbox1'),
checkbox2 = Ext.getCmp('checkbox2'),
checkbox3 = Ext.getCmp('checkbox3');
checkbox1.setValue(false);
checkbox2.setValue(false);
checkbox3.setValue(false);
}
}
],
renderTo: Ext.getBody()
});
|
|
|
CheckboxConfig
|
|
|
|
CheckboxEvents
|
|
|
|
ComboBox
|
A combobox control with support for autocomplete, remote loading, and many other features. A ComboBox is like a combination of a traditional HTML text <input> field and a <select>
field; the user is able to type freely into the field, and/or pick values from a dropdown selection
list. The user can input any value by default, even if it does not appear in the selection list;
to prevent free-form values and restrict them to items in the list, set forceSelection to true. The selection list's options are populated from any Ext.data.Store, including remote
stores. The data items in the store are mapped to each option's displayed text and backing value via
the valueField and displayField configurations, respectively. If your store is not remote, i.e. it depends only on local data and is loaded up front, you should be
sure to set the queryMode to 'local', as this will improve responsiveness for the user. Example usage: // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
Events To do something when something in ComboBox is selected, configure the select event: var cb = Ext.create('Ext.form.ComboBox', {
// all of your config options
listeners:{
scope: yourScope,
'select': yourFunction
}
});
// Alternatively, you can assign events after the object is created:
var cb = new Ext.form.field.ComboBox(yourOptions);
cb.on('select', yourFunction, yourScope);
Multiple Selection ComboBox also allows selection of multiple items from the list; to enable multi-selection set the
multiSelect config to true.
|
|
|
ComboBoxConfig
|
|
|
|
ComboBoxEvents
|
|
|
|
Date
|
Provides a date input field with a date picker dropdown and automatic date
validation. This field recognizes and uses the JavaScript Date object as its main value type. In addition,
it recognizes string values which are parsed according to the format and/or altFormats
configs. These may be reconfigured to use date formats appropriate for the user's locale. The field may be limited to a certain range of dates by using the minValue, maxValue,
disabledDays, and disabledDates config parameters. These configurations will be used both
in the field's validation, and in the date picker dropdown by preventing invalid dates from being selected.
Example usage: Ext.create('Ext.form.Panel', {
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date() // defaults to today
}],
renderTo: Ext.getBody()
});
Date Formats Examples This example shows a couple of different date format parsing scenarios. Both use custom date format
configurations; the first one matches the configured format while the second matches the altFormats. Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
// The value matches the format; will be parsed and displayed using that format.
format: 'm d Y',
value: '2 4 1978'
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
// The value does not match the format, but does match an altFormat; will be parsed
// using the altFormat and displayed using the format.
format: 'm d Y',
altFormats: 'm,d,Y|m.d.Y',
value: '2.4.1978'
}]
});
|
|
|
DateConfig
|
|
|
|
DateEvents
|
|
|
|
Display
|
A display-only text field which is not validated and not submitted. This is useful for when you want
to display a value from a form's loaded data but do not want to allow the
user to edit or submit that value. The value can be optionally HTML encoded if it contains
HTML markup that you do not want to be rendered. If you have more complex content, or need to include components within the displayed content, also
consider using a Ext.form.FieldContainer instead. Example: Ext.create('Ext.form.Panel', {
width: 175,
height: 120,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
buttons: [{
text: 'Update',
}],
renderTo: Ext.getBody()
});
|
|
|
DisplayConfig
|
|
|
|
DisplayEvents
|
|
|
|
FieldConfig
|
|
|
|
FieldEvents
|
|
|
|
File
|
A file upload field which has custom styling and allows control over the button text and other
features of text fields like empty text.
It uses a hidden file input element behind the scenes to allow user selection of a file and to
perform the actual upload during form submit. Because there is no secure cross-browser way to programmatically set the value of a file input,
the standard Field setValue method is not implemented. The getValue method will return
a value that is browser-dependent; some have just the file name, some have a full path, some use
a fake path.
Example Usage: Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
|
|
|
FileConfig
|
|
|
|
FileEvents
|
|
|
|
Hidden
|
A basic hidden field for storing hidden values in forms that need to be passed in the form submit. This creates an actual input element with type="submit" in the DOM. While its label is
not rendered by default, it is still a real component and may be sized according to
its owner container's layout. Because of this, in most cases it is more convenient and less problematic to simply
pass hidden parameters directly when
submitting the form. Example: new Ext.form.Panel({
title: 'My Form',
items: [{
xtype: 'textfield',
fieldLabel: 'Text Field',
name: 'text_field',
value: 'value from text field'
}, {
xtype: 'hiddenfield',
name: 'hidden_field_1',
value: 'value from hidden field'
}],
buttons: [{
text: 'Submit',
handler: function() {
this.up('form').getForm().submit({
params: {
hidden_field_2: 'value from submit call'
}
});
}
}]
}); Submitting the above form will result in three values sent to the server:
text_field=value+from+text+field&hidden_field_1=value+from+hidden+field&hidden_field_2=value+from+submit+call
|
|
|
HiddenConfig
|
|
|
|
HiddenEvents
|
|
|
|
HtmlEditor
|
Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be
automatically hidden when needed. These are noted in the config options where appropriate. The editor's toolbar buttons have tooltips defined in the buttonTips property, but they are not
enabled by default unless the global Ext.tip.QuickTipManager singleton is initialized. An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs. Example usage // Simple example rendered with default options:
Ext.tip.QuickTips.init(); // enable tooltips
Ext.create('Ext.form.HtmlEditor', {
width: 580,
height: 250,
renderTo: Ext.getBody()
});
// Passed via xtype into a container and with custom options:
Ext.tip.QuickTips.init(); // enable tooltips
new Ext.panel.Panel({
title: 'HTML Editor',
renderTo: Ext.getBody(),
width: 550,
height: 250,
frame: true,
layout: 'fit',
items: {
xtype: 'htmleditor',
enableColors: false,
enableAlignments: false
}
});
|
|
|
HtmlEditorConfig
|
|
|
|
HtmlEditorEvents
|
|
|
|
Number
|
A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,
and numeric validation to limit the value to a range of valid numbers. The range of acceptable number
values can be controlled by setting the minValue and maxValue configs, and fractional
decimals can be disallowed by setting allowDecimals to false. By default, the number field is also rendered with a set of up/down spinner buttons and has
up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the
step value. To hide the spinner buttons set hideTrigger:true; to disable the arrow key
and mouse wheel handlers set keyNavEnabled:false and
mouseWheelEnabled:false. See the example below. Example usage: Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
value: 99,
maxValue: 99,
minValue: 0
}],
buttons: [{
text: 'Take one down, pass it around',
handler: function() {
this.up('form').down('[name=bottles]').spinDown();
}
}]
});
Removing UI Enhancements Ext.create('Ext.form.Panel', {
title: 'Personal Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'age',
fieldLabel: 'Age',
minValue: 0, //prevents negative numbers
// Remove spinner buttons, and arrow key and mouse wheel listeners
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
}]
});
Using Step Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Step',
width: 300,
bodyPadding: 10,
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'evens',
fieldLabel: 'Even Numbers',
// Set step so it skips every other number
step: 2,
value: 0,
// Add change handler to force user-entered numbers to evens
listeners: {
change: function(field, value) {
value = parseInt(value, 10);
field.setValue(value + value % 2);
}
}
}]
});
|
|
|
NumberConfig
|
|
|
|
NumberEvents
|
|
|
|
Picker
|
An abstract class for fields that have a single trigger which opens a "picker" popup below
the field, e.g. a combobox menu list or a date picker. It provides a base implementation for
toggling the picker's visibility when the trigger is clicked, as well as keyboard navigation
and some basic events. Sizing and alignment of the picker can be controlled via the matchFieldWidth
and pickerAlign/pickerOffset config properties respectively. You would not normally use this class directly, but instead use it as the parent class for
a specific picker field implementation. Subclasses must implement the createPicker method
to create a picker component appropriate for the field.
|
|
|
PickerConfig
|
|
|
|
PickerEvents
|
|
|
|
Radio
|
Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checked
at a time within a group of radios with the same name. Labeling:
In addition to the standard field labeling options, radio buttons
may be given an optional boxLabel which will be displayed immediately to the right of the input. Also
see Ext.form.RadioGroup for a convenient method of grouping related radio buttons. Values:
The main value of a Radio field is a boolean, indicating whether or not the radio is checked. The following values will check the radio:
true 'true' '1' 'on' Any other value will uncheck it. In addition to the main boolean value, you may also specify a separate inputValue. This will be sent
as the parameter value when the form is submitted. You will want to set this
value if you have multiple radio buttons with the same name, as is almost always the case.
Example usage: Ext.create('Ext.form.Panel', {
title : 'Order Form',
width : 300,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [
{
xtype : 'fieldcontainer',
fieldLabel : 'Size',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'M',
name : 'size',
inputValue: 'm',
id : 'radio1'
}, {
boxLabel : 'L',
name : 'size',
inputValue: 'l',
id : 'radio2'
}, {
boxLabel : 'XL',
name : 'size',
inputValue: 'xl',
id : 'radio3'
}
]
},
{
xtype : 'fieldcontainer',
fieldLabel : 'Color',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [
{
boxLabel : 'Blue',
name : 'color',
inputValue: 'blue',
id : 'radio4'
}, {
boxLabel : 'Grey',
name : 'color',
inputValue: 'grey',
id : 'radio5'
}, {
boxLabel : 'Black',
name : 'color',
inputValue: 'black',
id : 'radio6'
}
]
}
],
bbar: [
{
text: 'Smaller Size',
handler: function() {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if L is selected, change to M
if (radio2.getValue()) {
radio1.setValue(true);
return;
}
//if XL is selected, change to L
if (radio3.getValue()) {
radio2.setValue(true);
return;
}
//if nothing is set, set size to S
radio1.setValue(true);
}
},
{
text: 'Larger Size',
handler: function() {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if M is selected, change to L
if (radio1.getValue()) {
radio2.setValue(true);
return;
}
//if L is selected, change to XL
if (radio2.getValue()) {
radio3.setValue(true);
return;
}
//if nothing is set, set size to XL
radio3.setValue(true);
}
},
'-',
{
text: 'Select color',
menu: {
indent: false,
items: [
{
text: 'Blue',
handler: function() {
var radio = Ext.getCmp('radio4');
radio.setValue(true);
}
},
{
text: 'Grey',
handler: function() {
var radio = Ext.getCmp('radio5');
radio.setValue(true);
}
},
{
text: 'Black',
handler: function() {
var radio = Ext.getCmp('radio6');
radio.setValue(true);
}
}
]
}
}
]
});
|
|
|
RadioConfig
|
|
|
|
RadioEvents
|
|
|
|
Spinner
|
A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
instead it is subclassed and the onSpinUp and onSpinDown methods are implemented
to handle when the buttons are clicked. A good example of this is the Ext.form.field.Number field
which uses the spinner to increment and decrement the field's value by its step
config value.
For example: Ext.define('Ext.ux.CustomSpinner', {
extend: 'Ext.form.field.Spinner',
alias: 'widget.customspinner',
// override onSpinUp (using step isn't neccessary)
onSpinUp: function() {
var me = this;
if (!me.readOnly) {
var val = me.step; // set the default value to the step value
if(me.getValue() !== '') {
val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
}
me.setValue((val + me.step) + ' Pack');
}
},
// override onSpinDown
onSpinDown: function() {
var me = this;
if (!me.readOnly) {
if(me.getValue() !== '') {
val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
}
me.setValue((val - me.step) + ' Pack');
}
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with SpinnerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items:[{
xtype: 'customspinner',
fieldLabel: 'How Much Beer?',
step: 6
}]
});
By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
to prevent this, set keyNavEnabled = false.
|
|
|
SpinnerConfig
|
|
|
|
SpinnerEvents
|
|
|
|
Text
|
A basic text field. Can be used as a direct replacement for traditional text inputs,
or as the base class for more sophisticated input controls (like Ext.form.field.TextArea
and Ext.form.field.ComboBox). Has support for empty-field placeholder values (see emptyText). Validation The Text field has a useful set of validations built in: allowBlank for making the field required minLength for requiring a minimum value length maxLength for setting a maximum value length (with enforceMaxLength to add it
as the maxlength attribute on the input element) regex to specify a custom regular expression for validation In addition, custom validations may be added: vtype specifies a virtual type implementation from Ext.form.field.VTypes which can contain
custom validation logic validator allows a custom arbitrary function to be called during validation The details around how and when each of these validation options get used are described in the
documentation for getErrors. By default, the field value is checked for validity immediately while the user is typing in the
field. This can be controlled with the validateOnChange, checkChangeEvents, and
checkChangeBugger configurations. Also see the details on Form Validation in the
Ext.form.Panel class documentation. Masking and Character Stripping Text fields can be configured with custom regular expressions to be applied to entered values before
validation: see maskRe and stripCharsRe for details.
Example usage: Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});
|
|
|
TextArea
|
This class creates a multiline text field, which can be used as a direct replacement for traditional
textarea fields. In addition, it supports automatically growing the height of the textarea to
fit its content. All of the configuration options from Ext.form.field.Text can be used on TextArea.
Example usage: Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
name : 'message',
fieldLabel: 'Message',
anchor : '100%'
}]
});
Some other useful configuration options when using grow are growMin and growMax. These
allow you to set the minimum and maximum grow heights for the textarea.
|
|
|
TextAreaConfig
|
|
|
|
TextAreaEvents
|
|
|
|
TextConfig
|
|
|
|
TextEvents
|
|
|
|
Time
|
Provides a time input field with a time dropdown and automatic time validation. This field recognizes and uses JavaScript Date objects as its main value type (only the time
portion of the date is used; the month/day/year are ignored). In addition, it recognizes string values which
are parsed according to the format and/or altFormats configs. These may be reconfigured
to use time formats appropriate for the user's locale. The field may be limited to a certain range of times by using the minValue and maxValue
configs, and the interval between time options in the dropdown can be changed with the increment config. Example usage: Ext.create('Ext.form.Panel', {
title: 'Time Card',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'timefield',
name: 'in',
fieldLabel: 'Time In',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
}, {
xtype: 'timefield',
name: 'out',
fieldLabel: 'Time Out',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
}]
});
|
|
|
TimeConfig
|
|
|
|
TimeEvents
|
|
|
|
Trigger
|
Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
The trigger has no default action, so you must assign a function to implement the trigger click handler by
overriding onTriggerClick. You can create a Trigger field directly, as it renders exactly like a combobox
for which you can provide a custom implementation.
For example: Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
// override onTriggerClick
onTriggerClick: function() {
Ext.Msg.alert('Status', 'You clicked my trigger!');
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items:[{
xtype: 'customtrigger',
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger',
}]
});
However, in general you will most likely want to use Trigger as the base class for a reusable component.
Ext.form.field.Date and Ext.form.field.ComboBox are perfect examples of this.
|
|
|
TriggerConfig
|
|
|
|
TriggerEvents
|
|
|
|
VTypes
|
This is a singleton object which contains a set of commonly used field validation functions.
The validations provided are basic and intended to be easily customizable and extended. To add custom VTypes specify the vtype validation
test function, and optionally specify any corresponding error text to display and any keystroke
filtering mask to apply. For example: // custom Vtype for vtype:'time'
var timeTest = /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i;
Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
time: function(val, field) {
return timeTest.test(val);
},
// vtype Text property: The error text to display when the validation function returns false
timeText: 'Not a valid time. Must be in the format "12:34 PM".',
// vtype Mask property: The keystroke filter mask
timeMask: /[\d\s:amp]/i
});
Another example: // custom Vtype for vtype:'IPAddress'
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: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
});
|
|
|
VTypesConfig
|
|
|
|
VTypesEvents
|
|
Interfaces
|
Field
|
This mixin provides a common interface for the logical behavior and state of form fields, including: Getter and setter methods for field values Events and methods for tracking value and validity changes Methods for triggering validation *NOTE**: When implementing custom fields, it is most likely that you will want to extend the Ext.form.field.Base
component class rather than using this mixin directly, as BaseField contains additional logic for generating an
actual DOM complete with label and error message display and a form input field,
plus methods that bind the Field value getters and setters to the input field's value. If you do want to implement this mixin directly and don't want to extend Ext.form.field.Base, then
you will most likely want to override the following methods with custom implementations: getValue,
setValue, and getErrors. Other methods may be overridden as needed but their base
implementations should be sufficient for common cases. You will also need to make sure that initField
is called during the component's initialization.
|
|
SharpKit.AspNetAjax
Ext