Develop Reference

Which method should get fier after all the rendring done and inputEl have rendered

Which method should get fier after all the rendring done and inputEl have rendered.
I have tabpanel where I am using panel and pane have form and form have displayfield.
In my case my displayfield value is not getting render. That value is not available in dom. So I wanted to add those value manually.
Ext.fly(displayfield.id).set({ 'value': displayfield.value });
But the problem is
-afterender method is getting fiered before rendering iscompleted in dom. ANy suggestion which method should I use.

Let the system do the work for you.
Set the value in the form panel's viewModel and bind the value property of the display field to the data property in the viewModel.
Sencha Fiddle
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
viewModel: {
data: {
field1: 'default view model'
}
},
controller: {
init: function(formPanel) {
formPanel.getViewModel().set('field1', 'New Display Value');
},
},
items: [{
title: 'Title',
bodyPadding: '10 15 0 10',
layout: {
type: 'vbox'
},
items: [{
xtype: 'displayfield',
name: 'field1',
bind: {
value: '{field1}'
},
value: 'default value',
fieldLabel: 'Field One'
}]
}]
});
}
});

Focus a textfield inside a list

The ExtJS docs describe a method focus for textfields that will either focus a textfield or return false: https://docs.sencha.com/extjs/6.7.0/modern/Ext.field.Text.html#method-focus
Generally this seems to work just fine, but once the textfield that should be focused is inside a list (part of the listitem) the focus is immediately removed and set to the parent listitem container. Focus however returns true (the focus is actually on the field for a few ms).
https://fiddle.sencha.com/#view/editor&fiddle/315h shows this by example. The first button tries to focus the first textfield inside the list (which fails) and the second one focuses the field below the list.
Is there any way to prevent the listitem from becoming focused?
Code from the fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
fullscreen: true,
xtype: 'container',
items: [{
xtype: 'list',
itemConfig: {
xtype: 'container',
items: [{
xtype: 'component',
html: 'Row'
}, {
xtype: 'textfield',
value: 'Focus Me'
}],
margin: '15px 0'
},
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}, {
xtype: 'button',
text: 'Try to focus',
handler: function () {
this.up('container').down('list').down('textfield').focus();
Ext.toast(this.up('container').down('list').down('textfield').hasFocus + '');
}
}, {
xtype: 'textfield',
itemId: 'focusable',
value: 'Focusable'
}, {
xtype: 'button',
text: 'Try to focus',
handler: function () {
this.up('container').down('#focusable').focus();
Ext.toast(this.up('container').down('#focusable').hasFocus + '');
}
}]
});
}
});
On ExtJS 6.7 the first click on a textfield in a list does not even work but this seems to be fixed in 7.0.

Set defaultFocus for listitem container. Its work for me (fiddle).
P.S. thank you for your fiddle example. few do it.

How to get values of multiple textfields with same name in extjs2

I am adding a textfield dynamically when i click add button, after that i need to get the values what i added dynamically while i click save button. its in extjs2.0 itself.
This is the code what i am working on
var settingsEmailPanel = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
id:'emailForm',
title: 'Email Servers',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'checkbox',
items: [{
boxLabel: 'Server 1',
hideLabel: true,
name: 'server1'
},{
boxLabel: 'Server 2',
hideLabel: true,
name: 'server2'
},{
boxLabel: 'Server 3',
hideLabel: true,
name: 'server3'
}, {
boxLabel: 'Server 4',
hideLabel: true,
name: 'server4'
}
],
buttons: [{
text: 'Add',
handler: function () {
settingsEmailPanel.add({
xtype: 'textfield',
fieldLabel: 'New ServerName',
name: 'newServer',
allowBlank:false
});
settingsEmailPanel.doLayout();
}
},{
text: 'Save',
handler: function () {
alert("Save clicked");
console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
}
}]
});

Here what I am trying to do is onclick of save I need to query each element of form and if element xtype is textfield then getting value each by each and displaying that.
Code for save button is :
{
text: 'Save',
handler: function() {
var settingsEmailPanel = this.up().up();
var settingsEmailPanelItem = settingsEmailPanel.items.items;
for (var i = 0; i < settingsEmailPanelItem.length; i++) {
if (settingsEmailPanelItem[i].xtype == "textfield") {
var Value = settingsEmailPanelItem[i].getValue();
alert(Value)
}
}
// alert("Save clicked");
//console.log(Ext.getCmp("emailForm").getForm().findField("newServer").getValue());
}
}
I created a fiddler for you which you can check here.
Fiddle
Note : I can not see fiddle work for ExtJs 2 so I did in ExtJS 4. For making work in extJS 2 you need to assign uniqe id to each textfield and then retrive the value I suppose. The above answer will work from ExtJS 4 and above. if you make a fiddle for ExtJS 2 and I will try further more.

Just add them to an array every time you create one so you can retrieve them later in your save button handler :
var textFields = [];
/*
* [...]
*/
buttons: [{
text: 'Add',
handler: function () {
var textField = Ext.create('Ext.form.field.Text', {
xtype: 'textfield',
// ...
});
textFields.push(textFields);
settingsEmailPanel.add(textField);
settingsEmailPanel.doLayout();
}
},{
text: 'Save',
handler: function () {
for(var i=0; i<textFields.length; i++){
console.log(textFields[i].getValue());
}
}
}]

ExtJS checkcolumns cannot edit after modify model

Hi I tried to edit data before the data store into grid because I have to calculate some values.
I modified the model field like this
fields: ['name', 'email', 'phone',
{
name: 'check',
convert: function(value, record) {
return 1;
}
}
]
and bind dataIndex to the column
columns: [{
...
}
}, {
...
}, {
xtype: 'checkcolumn',
text: 'Phone',
dataIndex: 'check'
}]
When I execute this I found the checkcolumn cannot be editable. What's wrong about this?
Sample

Thats because you always return 1. You need to do for example:
name: 'check',
mapping: 'phone',
convert: function(value, record) {
return value ? 1 : 0;
}

Your problem is the convert function. Your checkcolumn is still active, but each time your value is evaluated, it gets sent through the convert function and returns 1 (or true since it's used in a checkbox)
From what I gather, you want to set a defaultValue on the check column, then you should work with the defaultValue property defining your check column
Here you can learn more about the model itself :)
https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.Model
For the field configurations, you could check here
https://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.data.field.Field
So, either toss your convert function, or let it return the correct value (true or false, 1 or 0) based on the value parameter in your convert function.

When you click the checkfield the converter is automatically invoked and in your convert:function you always force his value to checked.
Try to set a value with different check or remove the custom converter
here is your fiddle modified:
https://fiddle.sencha.com/#fiddle/12p5
and the fiddle code:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', {
name: 'check',
convert: function(value, record) {
debugger; //You can see that this function is invoked when you check the column
return value ? 1 : 0; //Modify the logic or don't force the value
}
}],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
check: 1 //initialize with checked if necessary
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
check: 1
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
check: 1
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
check: 1
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
height: 200,
width: 400,
renderTo: Ext.getBody(),
columns: [{
text: 'Name',
dataIndex: 'name',
renderer: function(value, meta) {
meta.tdCls += ' image-hover';
return '<span class="name">' + value + '</span><img src="http://sstatic.net/stackoverflow/img/icon-16.png" />';
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
xtype: 'checkcolumn',
text: 'Phone',
dataIndex: 'check'
}]
});
}
});

Ran across this same issue. If you change
return value ? 1 : 0;
to
if(value = [value to check box] || value = true) {return true;}
else {return false;}
Probably a fancier way to do it but this will take care of hitting the convert function when a user clicks the checkbox column.

Trouble with adding and removing ExtJS form fields

I am having a bit of trouble adding/removing fields to/from an ExtJS form. My use case is as follows:
Provide a set of radio buttons on the form. Depending on which radio button is selected, show a different set of form fields.
I am not all that familiar with ExtJS, but what I am doing is caching the fields that are to be added/removed and adding/removing them from the form when the radio button change event is fired. Here is a simplified version of my code:
var textFieldA = new Ext.form.TextField({
fieldLabel: 'Text Field A',
name: 'text_field_a',
allowBlank: false
});
var textFieldB = new Ext.form.TextField({
fieldLabel: 'Text Field B',
name: 'text_field_b',
allowBlank: false
});
var form = new Ext.FormPanel({
autoScroll: true,
bodyStyle: 'padding: 5px 5px 0',
border: false,
frame: true,
layout: 'form',
items: [{
xtype: 'fieldset',
fieldLabel: 'Fieldset',
autoHeight: true,
items: [{
xtype: 'radiogroup',
fieldLabel: 'Show text field',
columns: 1,
vertical: true,
items: [
{
xtype: 'radio',
boxLabel: 'Show field a',
name: 'field_to_show',
inputValue: 'a'
},
{
xtype: 'radio',
boxLabel: 'Show field b',
name: 'field_to_show',
inputValue: 'b'
}
],
listeners: {
'change': {
fn: function(radioGroup, selectedRadio) {
switch (selectedRadio.getGroupValue())
{
case 'a':
radioGroup.findParentByType('fieldset').remove(textFieldB);
radioGroup.findParentByType('fieldset').add(textFieldA);
break;
case 'b':
radioGroup.findParentByType('fieldset').remove(textFieldA);
radioGroup.findParentByType('fieldset').add(textFieldB);
break;
}
radioGroup.findParentByType('fieldset').doLayout();
}
}
}
}]
}]
});
form.render('container');
This works the first time each radio is selected, but subsequent selections do not work as I would expect. In Firefox, a JavaScript error is raised:
Operation is not supported" code: "9
[Break on this error] return !!(p.compareDocumentPosition(c) & 16); in ext-base-debug-w-comments.js
In Chrome, only the labels will be added to the form.
Is the way I am expecting this to work incorrect?

I wouldnt necessarily take the approach of adding/removing the fileds- why not give each field an id (also good practice for form fields) using:
id:'fieldname'
Then either hide/show the field as appropriate using:
Ext.getCmp('fieldname').hide()
Ext.getCmp('fieldname').show()

I've written a very similar form. If the only common element is the radio group, here's what I suggest:
Create an outer Container that contains the RadioGroup, then a subcontainer with a CardLayout. Each child of that card layout contains a form with the fields for the different states of the RadioGroup. Add listeners to the RadioGroup so when the selection changes, you change the active item in the card container.
Basic code to get you started from when I did this:
OuterForm = Ext.extend(Ext.Container, {
initComponent: function() {
Ext.apply(this, {
layout: "vbox",
layoutConfig: { align: "stretch" }
});
this.items = [{
xtype: "container",
layout: "form",
items: [{
xtype: "radiogroup",
fieldLabel: "Form to fill out",
ref: "../../formSelector",
items: [{
name: "type",
inputValue: "1",
boxLabel: "Form 1"
}, {
name: "type",
inputValue: "2",
boxLabel: "Form 2"
}],
listeners: {
scope: this,
change: function(rg, checkedItem) {
this.formContainer.layout.setActiveItem(parseInt(checkedItem.inputValue));
}
}
}]
}, {
xtype: "container",
layout: "card",
flex: 1,
ref: "formContainer",
items: [{
xtype: "form1"
}, {
xtype: "form2"
}]
}];
OuterForm.superclass.initComponent.call(this);
}
});
Not tested for typos/bugs, but just set a height for the outer form, create your form1 and form2 xtypes and it should work.
If you need all fields part of the same form, make OuterForm extend FormPanel instead of defining form1 and form2 as independent FormPanels.