Develop Reference

The problem with getting the top container component. Extjs

When I click on a tree record, I try to set the values ​​of this record and set these values ​​in the form.
In the eventcler itemclick: this.showDataFields function is triggered:
....
showDataFields: function(view, record, item, index, event) {
//got a form with fields
var panel = view.up('maintab');
console.log(panel)
//var formfield = panel.down('actionform');
//assign values from selected record to form fields
//formfield.loadRecord(record);
},
..........
In this function, view.up ('maintab') is underfined.
The maintab is Ext.tab.Panel which houses the tree.
Why can not get the topmost container and how to do it correctly?
Made an example in fiddle
thank

You should use view.up('treepanel').nextSibling().getForm().setValues(record.data) in your showDataFields function to set these values ​​in the form.

You could have provided a better example, therefore within the limitations that were proposed.
The answer I got was this were the changes in the ActionFormTree class that got the code below:
Ext.define('Fiddle.view.ActionFormTree', {
extend: 'Ext.form.Panel',
alias: 'widget.actionformtree',
xtype: 'actionform',//mainform,
initComponent: function(){
var me = this;
Ext.apply(me,{
items: [{
xtype: 'form',
border: false,
anchor: '100%',
height: 100,
layout: {
type: 'vbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'textfield',
name: 'text',
fieldLabel: 'Наименование',
itemId: 'name_field',
}, {
xtype: 'textfield',
name: 'code',
fieldLabel: 'Код',
itemId: 'code_field',
}]
}],
buttons: [{
text: 'Save Changes',
scope: me,
handler: function (button) {
//Эта панель со значениями полей
form = me.down('form');
var mainpanel = me.up('#maincontainer');
var treeform = mainpanel.down('usertree');
var sel = treeform.getSelectionModel().getSelection()[0];
store = treeform.getStore();
console.log(treeform)
store.suspendAutoSync()
var child = sel.set({
text: 'Измененное',
leaf: true
});
sel.expand()
store.resumeAutoSync();
//var currRecord = form.getRecord();
//if (currRecord) {
// form.updateRecord();
// form.reset();
//}
}
}]
});
me.callParent(arguments);
}
});
So, in this example, for it to work, you will need to have a node selected to work.
Hope it helps and finalize your question.
Sample to your code

Bind in button not working in Ext JS

I want the Zulu button to be disabled until the item inside the change function has a newVal set to it. Currently the Zulu button is enabled and this is an issue because I want it to be disabled until a certain condition, ie. item.set('textstuff', newVal); is met.
What is wrong with my code? I used this post: ExtJS 6 - Bind disabled property to new records in a store for some inspiration but still need some help.
title: 'Foo',
xtype: 'Bar',
autoSelect: true,
labelWidth: 150,
listeners: {
change: function(component, newVal, OldVal) {
var view = this.up('uploadthings');
var items = view.getViewModel().getStore('things').data.items;
items.forEach(function(item) {
item.set('textstuff', newVal);
});
view.getViewModel('bindBool', true);
}
}
}, {
items: [{
xtype: 'panel',
buttons: [{
style: 'margin-right: 30px',
text: 'Zulu',
iconCls: 'x-fa fa-upload',
handler: 'xray',
bind: {
disabled: '{bindBool}'
}
}]
}]

or in your ViewModel.Js file you can add formulas and configure your bondbool,
lets say you set the bindbool at the controller : me.getViewModel().set('bindbool', true)
in your ViewModel :
formulas : {
bindbool : {
get : function(get){
var tempVar = get('bindbool'); //--> true because you set it to true
return tempVar == true ? tempVar : false;
}
}
}
By doing this you can control your viewModel outputs,
Goodluck and have fun coding Extjs

Adding a listener to create a warning message to a textfield

I have a combo box and a textfield. I am trying to Add a warning notifcation to the textfield stating 'please enter value' if something is selected from the combo box. However, I only want the warning to display on the textfield if '3' is selected from the combo box
Is there any way that I could do that? I am not sure how to do that.
Here is the code for my combobox and textfield:
{
xtype:'combo',
store: ['1','2','3'],
triggerAction: 'all',
fieldLabel: 'Area',
id: 'dcArea',
width: 125,
},{
xtype:'textfield',
fieldLabel: 'Mile',
id: 'mile',
width: 125,
}

The listener needs to be on the combo, of course. Use msgTarget to customize how the error message is displayed.
{
xtype:'combo',
store: ['1','2','3'],
triggerAction: 'all',
fieldLabel: 'Area',
// bad practice
// id: 'dcArea',
width: 150,
// <EDIT>
msgTarget: 'under',
// </EDIT>
listeners: {
change: function(combo, value) {
// use component query to retrieve the other field
var textfield = this.up('form').down('#mile');
if (value === '3') {
textfield.markInvalid("Please enter value");
} else {
textfield.clearInvalid();
}
}
}
},{
xtype:'textfield',
fieldLabel: 'Mile',
itemId: 'mile',
width: 150
}
Edit Use the msgTarget property of the combo box to configure how the error message is displayed (see the updated code example).

In extjs this is the way to add listeners, on change will be helpful in this case.
Sample:
{
xtype:'textfield',
fieldLabel: 'Mile',
id: 'mile',
width: 125,
name: 'myMiles'
listeners: {
'change': function() {
console.log('you changed the text of this input field');
var value = Ext.getCmp('mile').getValues().myMiles;
if(value == 3)
{
alert('You selected 3');
}
}
}
}

Extjs 4 cellEditing plugin doesn't work with more then one grid

I have a simple page with 2 or more grids and I want to use CellEditing plugin to edit cells of those grids.
If I have only a grid all works well, but if I make 2 grids (or more) CellEditing plugin stop to work.
Anyone know how to solve this problem?
I have made a little minimized example that is affected with this problem.
In this example you can try to add a row to the first grid and double click to edit that grid. As you can see cell editing doesn't work at all.
If you add and edit the cell in the second grid, it work.
here you can found the example in jsfiddle:
http://jsfiddle.net/eternasparta/amHRr/
and this is the javascript code:
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
var store = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
Ext.define('AM.view.editpanel.CustomList', {
extend: 'Ext.container.Container',
alias: 'widget.sclist',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
plugins: [],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Add',
actionId: 'add',
handler: function (th, e, eArg) {
var store = th.up('grid').store;
var r = Ext.create(store.model.modelName);
store.insert(0, r);
}
}],
height: 200,
store: store,
columns: [{
text: 'Name',
dataIndex: 'label',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
actionId: 'delete',
header: 'delete',
items: [{
tooltip: 'tool'
}]
}],
flex: 1
}],
flex: 1,
initComponent: function () {
this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
}));
this.callParent(arguments);
var sto = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
this.down('grid').bindStore(sto);
this.down('grid').columns[0].text = 'Name';
this.down('grid').columns[0].dataIndex = 'label';
}
});
Ext.onReady(function () {
Ext.QuickTips.init();
var grid1 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
var grid2 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
});
Any help is appreciated, thank you!

Just put configs of Object or array type (in your case - items) inside initComponent: demo.
For more info see my answer here.

You can create separate objects for each grid like
//For grid 1
var rowEditing1 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
//For grid 2
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
It will create different instances for the different grids. Tested Working fine :)

How to disable the inputEl of a textfield in ExtJS?

I am working with ExtJS and I have a textfield component.
I would like to disable only the inputEl of a textfield component (not the label).
If I use the setDisabled() method of the textfield, then it sets disabled the inputEl but also the label.
I have used also the setReadOnly() method, but it does not grey out the inputEl, only set as ReadOnly.
Is there a way to disable only the inputEl of a textfield component?
Thanks for your help.

You will have to set a custom class to the disabledCls
.ux-item-disabled .x-form-field, .ux-item-disabled .x-form-display-field, .ux-item-disabled .x-form-trigger {
filter: alpha(opacity=30);
opacity: .3;
}
see JSFiddle

What about this one?
items: [{
xtype: 'textfield',
name: 'item',
itemId: 'item',
readOnly: true,
listeners:{
afterrender: function(f){
c.inputEl.addCls('x-item-disabled');
}
}]
You could even make it change dicamically if you include an if befor apply the class

I have got another answer from the Sencha forum (I thought it may be interesting to post it here also)
Solution:
Use the setOpacity method
Ext.onReady(function () {
var panel =Ext.create('Ext.form.Panel', {
title: 'Basic Form',
renderTo: Ext.getBody(),
bodyPadding: 5,
width: 350,
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField',
disabled: true
}]
});
panel.down('[xtype=textfield]').labelEl.setOpacity(1); });