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

Extjs Grid Column- Combo displaying key instead of value after value change

I have grid which have dynamic column. When the user clicks on this column, it display list of values from that the store returns.Once they user select any value, I would like the displayfield to show the valueand not the numeric id(key) of that value.
.....................
......................
plugins : [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
pluginId: 'Editor',
listeners : {
delay:1,
scope: this
}
})
],
doAfterFilterRendered : function() {
for (var i = 0; i <Ext.getCmp('ReportGrid').gridColumns.length; i++) {
if (ColumnGridType == 'COMBOBOX')// base on some condition i m trying to create combo box
{
Ext.getCmp('ReportGrid').gridColumns[i].editor= {
xtype: 'combobox',
forceSelection: true,
id : 'idCombo'
editable: false,
triggerAction: 'all',
allowBlank: false,
store: me.getColumnStoreList("Country")// which return 2 dimentional array with key value
}
}
}
Ext.getCmp('ReportGrid').getStore().load();
Ext.getCmp('ReportGrid').reconfigure(Ext.getCmp('ReportGrid').store, Ext.getCmp('ReportGrid').gridColumns);
},
......................
........................
I tried following thing to display value instead of key.
doAfterFilterRendered : function() {
for (var i = 0; i <Ext.getCmp('ReportGrid').gridColumns.length; i++) {
if (ColumnGridType == 'COMBOBOX')// base on some condition i m trying to create combo box
{
Ext.getCmp('ReportGrid').gridColumns[i].editor= {
xtype: 'combobox',
forceSelection: true,
id : 'idCombo'
editable: false,
triggerAction: 'all',
allowBlank: false,
store: me.getColumnStoreList("Country") // which return 2 dimentional array with key value,
**fields: ['key', 'value']}),
valueField: 'key',
displayField: 'value',**
}
}
}

You need to add a renderer in your column grid:
Something like that
renderer: function(val){
index = me.getColumnStoreList("Country").findExact('key',val);
if (index != -1){
rs = me.getColumnStoreList("Country").getAt(index).data;
return rs.value;
}
},
Source: Extjs4 combobox displayValue in grid

How to dynamically make a combobox multiselect/singleselect in extjs

I am using Boxselect extended from combo box in ExtJs 4.1. Based on some condition i need to make the selection single or multi.
here is my code
bool result;
result = getData();
if(result)
{
Ext.getCmp("combo1").multiSelect =true
}
This does not change the combobox to multiselect .any ideas ?

You have to force the recreation of the picker when the multiSelect option change. For that, you need to delete the property picker of your combo:
combo.multiSelect = true;
delete combo.picker;
Complete example:
Ext.widget('panel', {
renderTo: Ext.getBody(),
layout: {type: 'vbox', align: 'center'},
margin: 10,
defaults: {width: 200, margin: 5},
items: [{
xtype: 'combo',
store: ['Foo', 'Bar', 'Baz']
},{
xtype: 'displayfield',
fieldLabel: 'Multiselect is',
value: "OFF"
},{
xtype: 'button',
text: "Toggle multiselect",
handler: function() {
var panel = this.up(),
combo = panel.down('combo'),
outField = panel.down('displayfield'),
newValue = !combo.multiSelect;
combo.multiSelect = newValue;
// force recreation of picker
delete combo.picker;
outField.setValue(newValue ? "ON" : "OFF");
}
}]
});

Try with the Ext.apply method.
combo = Ext.getCmp.....
Ext.apply(combo, {multiSelect: true});

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 :)

ExtJS GridPanel width

I'm using Ext JS 2.3.0 and have created the search dialog shown below.
The search results are shown in a GridPanel with a single Name column, but notice that this column does not stretch to fill all the available horizontal space. However, after I perform a search, the column resizes properly (even if no results are returned):
How can I make the column display correctly when it's shown initially? The relevant code is shown below:
FV.FindEntityDialog = Ext.extend(Ext.util.Observable, {
constructor: function() {
var queryTextField = new Ext.form.TextField({
hideLabel: true,
width: 275,
colspan: 2,
});
var self = this;
// the search query panel
var entitySearchForm = new Ext.form.FormPanel({
width: '100%',
frame: true,
layout:'table',
layoutConfig: {columns: 3},
items: [
queryTextField,
{
xtype: 'button',
text: locale["dialogSearch.button.search"],
handler: function() {
var queryString = queryTextField.getValue();
self._doSearch(queryString);
}
}
]
});
// the search results model and view
this._searchResultsStore = new Ext.data.SimpleStore({
data: [],
fields: ['name']
});
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selectionModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
stripeRows: true,
autoWidth: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
colModel: colModel,
selModel: selectionModel,
hidden: false,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
handler: function () {
entitySearchWindow.close();
}
},
{
text: locale["dialogSearch.button.cancel"],
handler: function () {
entitySearchWindow.close();
}
}
]
});
// a modal window that contains both the search query and results panels
var entitySearchWindow = new Ext.Window({
closable: true,
resizable: false,
draggable: true,
modal: true,
viewConfig: {
forceFit: true
},
title: locale['dialogSearch.title'],
items: [entitySearchForm, this._searchResultsPanel]
});
entitySearchWindow.show();
},
/**
* Search for an entity that matches the query and update the results panel with a list of matches
* #param queryString
*/
_doSearch: function(queryString) {
def dummyResults = [['foo'], ['bar'], ['baz']];
self._searchResultsStore.loadData(dummyResults, false);
}
});

It's the same issue you had in an earlier question, the viewConfig is an config item for the grid panel check the docs , so it should be
this._searchResultsPanel = new Ext.grid.GridPanel({
viewConfig: {
forceFit: true
},
....other configs you need,
To be more precise the viewConfig accepts the Ext.grid.GridView configs, feel free to read the docs on that one too.
Otherwise this seems to be the only problem, and i refer the column width, not the gridpanel width. On the gridpanel you have a title and two buttons who doesn't seem to be affected. So i repeat the gridPanel's width is ok, it's the columns width issue.

Try to remove autoWidth from GridPanel configuration, because setting autoWidth:true means that the browser will manage width based on the element's contents, and that Ext will not manage it at all.
In addition you can try to call .doLayout(false, true) on your grid after it was rendered.

Try to add flex: 1 to your GridPanel