I can't seem to be able to focus a field in a form in extjs 4.
The doc lists a focus function for Text field (inherited from Component) but it doesn't do anything in terms of focusing to the input field.
Here's a sample code from the docs
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false
}, {
xtype: 'textfield',
id:'email',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email'
}]
});
If I call Ext.getCmp('email').focus() nothing visible happens.
What's the correct way to focus a field in extjs 4?
Sometimes a simple workaround is to slightly defer the focus call in case it's a timing issue with other code or even with the UI thread allowing the focus to take place. E.g.:
Ext.defer(function(){
Ext.getCmp('email').focus();
}, 0);
There isn't anything wrong with your code. I've made a jsfiddle for it and it works fine. Are you wrapping code in and Ext.onReady()? Also what browser are you using?
Try this:
Ext.getCmp('email').focus(false, 20);
Rather than work around with a delay, look for what is getting focus instead. Look out for focusOnToFront property on the parent.
Related
I need to add a little blip about an update to a form and I'm making it unnecessarily hard on myself. How do I add a text field that simply says Notice: XYZ underneath the Transfer date field? Is it a certain xtype I need to implement?
There are many possible way to add textfield/ displayfield in your form. Get hold of form and then add the textfield. Or simply add the textfield in form panel.
I created a fiddler for you in that I am adding next to 'Transfer Date' by this way.
{
xtype :'textfield',
name: 'last',
editable :false,
allowBlank: false,
fieldLabel: 'Notice',
value: 'xyz'
}
Since you asked for textfield so we can do like that and make editable :false, but the easier option is to achieve this is
{
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
}
Both type of solution is available in fiddler. Have a look and choose as per your choice. Fiddle
Add in your form object
formPanel.add({
xtype: 'displayfield',
fieldLabel: 'Notice',
value: 'xyz'
})
try adding a new component of xtype: label to your form panel.
for example:
formPanel.add({
xtype: 'label',
text: 'Notice: XYZ'
});
In ExtJS 5, I wanna remove border of textfield and make it like this:
Of course it can be done by two labels, but it's not very clean. I tried following two ways on ExtJS5 official website, but it doesn't work:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
// here 1
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
border: 0, // set border = 0 or false
hideBorders: true
}, {
// here 2
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
style: 'border: none;background-image:none;' // set style border none
}]
});
Results:
Anybody who have any idea? Thanks.
If you absolutely need to use the textfield xtype, you can remove the border by clearing the inputWrapCls config. Some Ext JS themes add a border to the div wrapping the input element (and any trigger buttons), so you may have to clear the triggerWrapCls config as well.
You will likely also want to modify the fieldStyle config to remove the input element's background:
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
// remove default styling for element wrapping the input element
inputWrapCls: '',
// remove default styling for div wrapping the input element and trigger button(s)
triggerWrapCls: '',
// remove the input element's background
fieldStyle: 'background:none'
}
Try with displayfiled in place of textfiled
for reference go through the link. http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html
I try to working with HTMLEditor in http://jsfiddle.net/WEEU3/
But when i chose Numbered list or Bullet list to typing then i press enter keyboard. That like
I think that like
1. first
2. second
3. third
And when i focus in third. I press to un-numbered. I think that like
1. first
2. second
third
But all word will be un-numbered
How to fix that. Thanks so much
It looks like there is a bug with htmleditor on 4.1.1. Also, you should NOT be using new to create the ExtJS objects. This will cause other ExtJS problems.
Upgrading to 4.2.x will fix your problem with the htmleditor.
Your code should be better formatted. You should also be using proper ExtJS methods to get items i.e. :
Ext.create('Ext.form.Panel', { // should be using Ext.create(), not new
title: 'HTML Editor',
width: 500,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'htmleditor',
name: 'editor',
enableColors: true,
enableAlignments: false,
enableLists: true,
enableSourceEdit: false,
anchor: '100%'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Get HTML',
handler: function(btn) {
// example of getting all form values
console.log(btn.up('form').getForm().getValues());
// proper example of getting by component
alert(btn.up('form').down('htmleditor').getValue());
}
}]
}]
});
How would I select all the child components of a FormPanel that are of the component type TextField?
I want to loop through only the TextField components and set their values to "".
I have this inside a method on a FormPanel
this.query('textfield').forEach(function(item) { console.log(item.id); } );
It selects too much stuff, it selects all the nested TextFields inside of ComboBox and DateField and what not.
How can I get only the Ext.form.field.TextField instances?
You need call the function getXType().
Extjs documentation http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-method-getXType
Example
var t = new Ext.form.field.Text();
alert(t.getXType()); // alerts 'textfield'
Using this form of query causes the Ext.ComponentQuery to lookup if the current component either is a textfield or extend from textfield. Simply use a property query for such a case like [xtype=textfield]. Is doesn'T matter if you create the textfield without setting the xtype or creating it by it's xtype it be set on the instance.
Here's example will return two results.
var form = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [Ext.create('Ext.form.field.Text',{
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
}]
});
console.log(Ext.ComponentQuery.query('[xtype=textfield]', form));
I need to implement validation messages that appear right next to invalid field. Any help would be appreciated.
msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.
if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[element id] Add the error message directly to the innerHTML of the specified element.
you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.
The msgTarget: 'elementId' can work, but it seem very limited, particularly when you want multiple instances of one reusable ExtJs component (and therefor multiple instances of the same msgTarget element). For example I have an MDI style editor where you can open multiple editors of one type in a tab interface. It also doesn't seem to work with itemId or recognize DOM/container hierarchy.
I therefor prefer to turn off the default handling if I don't want exactly one of the built in message display options by setting msgTarget: none and then performing my own message display by handling the fielderrorchange event which is designed for exactly this scenario. In this case I can now respect hierarchy of my forms even with multiple instances of the same editor form as I can select the error display element relative to the editor.
Here's how I do it:
{
xtype: 'fieldcontainer',
fieldLabel: 'My Field Label',
layout: 'hbox', // this will be container with 2 elements: the editor & the error
items: [{
xtype: 'numberfield',
itemId: 'myDataFieldName',
name: 'myDataFieldName',
width: 150,
msgTarget: 'none', // don't use the default built in error message display
validator: function (value) {
return 'This is my custom validation message. All real validation logic removed for example clarity.';
}
}, {
xtype: 'label',
itemId: 'errorBox', // This ID lets me find the display element relative to the editor above
cls: 'errorBox' // This class lets me customize the appearance of the error element in CSS
}],
listeners: {
'fielderrorchange': function (container, field, error, eOpts) {
var errUI = container.down('#errorBox');
if (error) {
// show error element, don't esape any HTML formatting provided
errUI.setText(error, false);
errUI.show();
} else {
// hide error element
errUI.hide();
}
}
}
}
See the msgTarget config of the control. msgTarget: 'side' would put the validation message to the right of the control.
Use msgTarget 'side' for validation in right side and msgTarget 'under' for bottom
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false,
name: 'name',
msgTarget: 'side',
blankText: 'This should not be blank!'
}]
You can use 'msgTarget: [element id]'. You have to write html in order to use element id instead of itemId. The validation function adds a list element under an element that you set as 'msgTarget'.
In case you want to show elements that you want for the validation, you can pass html instead of just a text.
{
xtype: 'container',
items: [
{
xtype: 'textfield',
allowBlank: false,
msgTarget: 'hoge'
blankText: '<div style="color:red;">validation message</div>', // optional
},
{
xtype: 'box',
html: '<div id="hoge"></div>' // this id has to be same as msgTarget
}
]
}
To show the error message under/side the input text box, msgTarget property will work only in case of you are using the form layout.
To work around this in other than form layout we need to wrap the element in "x-form-field-wrap" class.
you can find more on thread :
https://www.sencha.com/forum/showthread.php?86900-msgTarget-under-problem