Develop Reference

How to get value from reference in ExtJS

i have problem with ext js, i want to get value from my field using reference in my store, but when i console.log i got error lookupReference is not a function.
my form
items: [
{
xtype: 'combobox',
name: 'REC_TERMINAL_CODE_2',
fieldLabel: 'Terminal 2',
emptyText : 'Terminal',
reference: 'terminal2'
},
{
xtype: 'combobox',
name: 'REC_TERMINAL_CODE',
fieldLabel: 'Terminal',
emptyText : 'Terminal',
store: {
type: 'terminal'
},
displayField: 'terminal_name',
valueField: 'terminal_code',
value: 'T01',
minChars: 3,
queryParam: 'q',
queryMode: 'remote',
editable: false,
allowBlank: false,
fieldStyle: 'text-transform:uppercase',
afterLabelTextTpl: [
'<span style="color:red;font-weight:bold" data-qtip="Required"> *</span>'
],
flex: 1
},
]
in my terminal store file
listeners: {
load: function (store, records, success) {
console.log(this.lookupReference('terminal2'))
if (!success) {
Ext.Msg.confirm('Status Error', 'This connection failed, reload ?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
}
}

A store is not a component so you can use getReferenceHolder(). You can use the generic Ext.ComponentQuery.query('combobox[reference=terminal2]')[0]
This would return an array of components that fit the query.

First, this in your listener is not refer to a component such as combobox, etc. Maybe it refers to the store instance or the controller class. Try to make sure that you access the component instance. It can be determined by logging to console, a default component in ExtJs has a xtype property such as combobox,container,etc. Once you can access the component (parent component), you can find it's child which has named reference by using a function.
Second, based on their docs, You can get the component by it's reference by using parentComponent.getReferences()['PARTICULAR_REFERENCE_NAME'] function. a parentComponent can be a form, container, or etc. I don't know what version of ExtJS you are using, getReferences function maybe does not exist in lower version.

If You want to fetch the ExtJS component in view as Above example.
Then you have enabled referenceHolder Property to true.
Refer to this link for example:
Fetching ExtJs Component in View
This property enables view as reference holder of component
for more details Please Refer sench docs link:
Sencha docs ReferenceHolder

How to render a form in a grid row

I'm trying to render a form within a custom row grid without success.
handler: function (button, record, pressed, eOpts) {
var grid = this.up('grid');
var store = grid.getStore();
var innerPanel = Ext.widget('form', {
//renderTo: record,
title: 'Title Test',
name: 'test',
items: [{
xtype: "textfield",
name: "testfield",
fieldLabel: "FooTest"
}]
});
// store.add(record);
store.add(innerPanel);
}
Any idea how to do this?
Fiddle: https://fiddle.sencha.com/#fiddle/183e
Thanks.
EDITED with taubi19 sugestion.

I think you don't quite understand the concepts yet. The form is a part of the view, the store is an object, that takes care of the data. You want to have a column in which each row is a form. This means you need a column whose xtype is not textfield, but something custom. I found out on senchas kitchen sink, that we need a 'widgetcolumn ' . In your fiddle, change the columns array with the following code and you will have a form in each new row.
columns:[
{
header:'Name',
dataIndex:'name',
flex:1,
xtype:'widgetcolumn',
widget:{
width:400,
xtype:'form',
items:[
{
xtype:"textfield",
name:"testfield",
fieldLabel:"FooTest"
},
{
xtype:"textfield",
name:"testfield1",
fieldLabel:"FooTest1"
}
]
}
}
]
And I suggest you remove adding the form to the store. You add records/data to stores. The store.add method takes a model instance as a parameter (Ext.data.Store.add).

What is the difference between these two codes?

I am new to ExtJs, just stepped into some basic things and found that its very hard to get started as a beginner.
Below are the two ways of implementing Ext button:
Sample1:
var nextBtn = new Ext.Button({
text: 'Next >>',
handler: function() {
Ext.getDom('form_main').submit();
},
id: 'next',
renderTo: 'next'
});
Sample2:
Ext.widget('button', {
text: 'some long title of my cool button',
scale: 'large',
cls: 'my-button',
width: 100,
renderTo: 'output'
});
My guess is beacuse of the version, it has changed. Please let me know what is the difference between these two codes.
Regards,

There are many ways to instantiate a class in ExtJS.
Take this definition as example:
Ext.define ('Ext.button.Button', {
alias: 'widget.button' ,
// here other properties and methods ...
});
Then you can chose one of these ways to instantiate Ext.button.Button:
First: javascript style
var button = new Ext.button.Button ({
// props and methods
});
Second: ExtJS style with Ext.create method
var button = Ext.create ('Ext.button.Button', {
// props and methods
});
Third: ExtJS style with Ext.widget method (it uses alias property)
var button = Ext.widget ('button', {
// props and methods
});
I suggest you to use the second or the third way because they use ExtJS dynamic loader: here's the documentation

extJS: set 'config options' on field by JS

why i can't set 'Config options' by methode SET
set({value: 'new value',disabled:true});
how i can set 'Properties' for a field
var name = {
fieldLabel:'Name',
value: 'Test',
id:'id-name',
xtype: 'textfield',
};
this.form= new Ext.FormPanel({
items:[name],
buttons: [{
text : 'set value',
handler: function() {
Ext.getCmp('id-name').set({value: 'new value',disabled:true});
}]
});

Resetting component properties using an object is not part of the design of Extjs. The config is used in object creation and when first used in the constructor is applied to the object itself using special methods from the Extjs class system core to generate getters and setters and then initialize the component from them. It is not possible to do what you are trying to do and get the desired result. In your example above, the textfield is initialized with your config overriding the default values of the component during creation and then it generates getters and setters for certain attributes, like value, id, and fieldLabel which need to be used instead of config objects after a component is created. To make your example work, you need to do this:
var name = {
fieldLabel:'Name',
value: 'Test',
id:'id-name',
xtype: 'textfield',
};
this.form= new Ext.FormPanel({
items:[name],
buttons: [{
text : 'set value',
handler: function() {
var myTextField = Ext.getCmp('id-name');
myTextField.setValue('new value');
myTextField.setDisabled(true);
}]
});

Getting child editorGrid types in a FormPanel

Inside my extjs FormPanel, I have several editor grids. I don't know what the IDs of these grids are, so I can't use Ext.getCmp.
What is the best way to say 'Get all the editorgrid types that are in this FormPanel'?

You could filter the items collection of the FormPanel by the type of each item by using isXType:
var grids = formPanel.items.filterBy(function (item) {
return item.isXType("editorgrid");
});
grids will be a new collection of all the EditorGridPanel items.
Update: A more concise way:
var grids = formPanel.findByType("editorgrid", true);

Though we avoid hardcoding DOM IDs, having component IDs available can be handy.
this.gridOneId = Ext.id( null, 'gridOne' ); // guaranteed unique
new Ext.grid.GridPanel({
id: this.gridOneId,
store: storeOne,
columns: columnsOne,
title: 'Grid One',
...
});
this.gridTwoId = Ext.id( null, 'gridTwo' ); // guaranteed unique
new Ext.grid.GridPanel({
id: this.gridTwoId,
store: storeTwo,
columns: columnsTwo,
title: 'Grid Two',
...
});