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

Is there any other way to place "Close Tooltip" to default close button in the panel header in extjs?

I am using extjs for my project. There is a default close button on the upper right side for every panel. I am able to put tooltip for the button using its position.
function closeTooltip (window, 1) {
Ext.create('Ext.tip.ToolTip', {
target: window.header.items.get(1).el,
html: 'Close'
});
But, this isn't so cool because, if I add a button to the header then the position of the close button changes from 1 to 2. So, the tooltip gets displayed for the newly added button.
Is there any other way to keep close tooltip to close button that remains same ?

For getting your close button, you can use down method of Ext.dom.Element.
The down method selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
In this FIDDLE, I have created a demo using panel. I have tested in ExtJS 4.x and later versions, it's working fine. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
function closeTooltip(panel) {
if (Ext.getVersion().major > 5) {
Ext.getCmp(panel.el.down('.x-tool-close').up().id).setTooltip('close')
} else {
Ext.create('Ext.tip.ToolTip', {
target: panel.el.down('.x-tool-close').id,
html: ' Close '
//If you want to put diffrent-diffrent tooll tip then you can use below
//html:`Close ${panel.title}`
});
}
}
Ext.define('CustomPanel', {
extend: 'Ext.panel.Panel',
width: 200,
bodyPadding: 10,
margin: 5,
html: 'Custom panel used',
closable: true,
tools: [{
type: 'help',
handler: function () {
alert('help');
}
}],
listeners: {
afterrender: closeTooltip
}
});
Ext.create('CustomPanel', {
title: 'Panel 1',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 2',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 3',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 4',
renderTo: Ext.getBody()
});
Ext.create('CustomPanel', {
title: 'Panel 4',
renderTo: Ext.getBody()
});
}
});

ExtJS Toolbar: how keep an item always directly accesible, never put in the "more" menu

I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?

Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2

I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.

Remove field firing event click in afterLabelTextTpl

I want to remove a form field, firing a click event in a afterLabelTextTpl.
However, I am not able to remove each field individually.
Fiddle: https://fiddle.sencha.com/#fiddle/1ie7
The two span textfields has the same id. It must be so because the text fields are added dynamically from a standard textfield

If you cannot set the id individually, you can set the id to be unique by taking advantage of the way the XTemplate in beforeLabelTextTpl generates markup. One way to do this is to append the field's generated id to the word 'icon' (or some other prefix):
'<span id="icon{id}" ...
When rendered, this will replace {id} with the field's id property. Then you can refer to this unique id in the afterrender handler:
var simboloEl = Ext.get("icon" + field.id);
Fiddle: https://fiddle.sencha.com/#fiddle/1iek

This happen because you use same id's for both fields and when you click on first one it works for second one also.
Please Check Fiddle:https://fiddle.sencha.com/#fiddle/1ien
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false,
beforeLabelTextTpl: [
'<tpl>',
'<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>',
'</tpl>'
],
listeners: {
afterrender: function(field){
var form = this.up('form');
var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]);
//var simboloEl = Ext.get("icon");
if(simboloEl){
simboloEl.on("click", function () {
form.remove(field);
});
}
}
}
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false,
beforeLabelTextTpl: [
'<tpl>',
'<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>',
'</tpl>'
],
listeners: {
afterrender: function(field){
var form = this.up('form');
var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]);
//var simboloEl = Ext.get("icon1");
if(simboloEl){
simboloEl.on("click", function () {
form.remove(field);
});
}
}
}
}],
renderTo: Ext.getBody()
});

sencha touch tap on search button and load a dataview with ajax search

I am almost new to sencha touch and I have this simple question:
I have a panel with a search field and a start search button (a simple search):
items: [{
xtype: 'container',
html: '<div style="width:100%;text-align:center;"><img src="images/logo.png" style="max-width:40%;" /></div>',
},{
xtype: 'fieldset',
title: '<center>Insert your adress</center>',
cls:'ps-red',
items: [{
xtype: 'textfield',
name: 'adress',
required: true,
clearIcon: true,
}]
},{
xtype:'button',
text:'Search',
ui:'confirm-round',
margin:5,
handler:function(){
}
}]
Clicking on the search button I need to make an ajax call with the input text params, and display results to another panel. What should I write in the handler function of the button?
Ext.define('Demo.view.SearchResults', {
extend: 'Ext.Container',
xtype: 'resultcard',
config: {
layout:'fit',
cls:'ks-basic',
items: [{
xtype: 'dataview',
scrollable: 'vertical',
cls: 'dataview-basic',
store: '????',
}]
}
});

OK let us assume the store as 'SampleStore'
this is the sample call that you should write in handler function, see if it is useful to you,in this example I added push view, you can update panel if you want
handler : function(){
var navigationView = button.up('navigationview');
Ext.getStore('SampleStore').getProxy().setExtraParam('search',address);
Ext.getStore('SampleStore').load({
callback: function(record, operation, success) {
if(success && record.length) {
// here you can call any other function to update panel
navigationView.push({
xtype : 'resultcard',
record : record
});
} else {
Ext.Msg.alert('Address not found. (' + address + ')');
}
}
});
}// handler close