Develop Reference

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()
});
}
});

Title bar contents becomes blank/invisible in chrome

Ext JS : ver 6.5.2.463 theme-classic (6.2.1.167)
Browser : Chrome Version 62.0.3202.94 (64-bit)
OS : Window 10 (64bit)
Few days ago I start my application as usual but encounter an awkward behavior when I opened already collapsed panel in Chrome its title bar text was blank. I tried in on another browser it was working fine there.
I tried it on another machine it was working fine there. but when the Chrome of other machine get updated the same problem is there too.
we updated our Ext JS version from 6.2.1.167(Classic) to 6.5.2.463(Classic) but the problem is still there.
we create the similar UI on the fiddle and link is attached. so you can verify it.
https://fiddle.sencha.com/#fiddle/2acg&view/editor
is there anyone else facing the same issue ?
To reproduce the issue:
1. Open the link to a fiddle.
2. Click on the expand button the title bar content will be shown.
3. Now click on the collapse then expand now content will disappear.
Screenshots are also attached.
title bar is blank there

You need to go though with this config collapseMode and also with code file of collapseMode.
In this FIDDLE, I have used your code and made some change as per your requirement. Hope this will help you or guide you to solve your problem.
Ext.create('Ext.panel.Panel', {
plugins: 'viewport',
title: 'ViewPort Title',
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Expand',
handler: function () {
var panel = this.up('panel').down('#bottomPanel');
panel.collapseMode = undefined;
panel.expand();
}
}, {
xtype: 'button',
text: 'Collapse',
handler: function () {
this.up('panel').down('#bottomPanel').collapse();
}
}],
items: [{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel Title',
region: 'center',
html: 'Sample center panel text'
}, {
xtype: 'panel',
itemId: 'bottomPanel',
title: 'Bottom Panel Title',
region: 'south',
height: 150,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'fit',
items: [{
xtype: 'panel',
html: 'Sample bottom inner panel text'
}]
}]
}]
});

EXTjs getEl() fails before showing the element

Good day all.
In EXTjs, probably 4.x version, I have a menu with a couple of levels of sub-menus
I'd like to add a data attribute to some of those sub-menus and actually I can do this with no problems with:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 4});
but this is working only for the first element of the menu (to be clear, the element that is shown upon loading.
For any other element of the menu, first of all I have to click the menu to show all the sub-menu and only at that time I can use the getEl() function, otherwise this error is shown:
Uncaught TypeError: Cannot read property 'set' of undefined
I understand that I'd need to... show? render? well, "do something" to those sub elements in order to have them in the dom properly... I attach part of the code:
this is part of the menu I create:
xtype: 'button',
id:"notificationMenu",
hidden: false,
reference: 'userType',
style: 'color: #ffffff;width:58px;height:58px;',
glyph: 0xf0f3,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"TASKS",
disabled:true
},
{
text:"Campaigns",
data_id:"me_campaigns",
glyph:0xf0c1,
id:"notification_me_campaigns_root",
hidden:true,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"Approval",...
in this example, if I make after Render:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 10})
but if I use
Ext.getCmp("notification_me_campaigns_root").getEl().set({"data-notifynumber": 4})
the error above is shown. please do you have some advice? may I call a "force render" somehow?

Try to use afterrender to get dom element.
ExtJs getEl() Retrieves the top level element representing this component but work when dom is prepared without dom creation it will return null.
I have created an Sencha Fiddle demo hope this will help you to achieve you requirement/solution.
var panel = new Ext.panel.Panel({
renderTo: document.body,
title: 'A Panel',
width: 200,
tools: [{
xtype: 'button',
text: 'Foo',
menu: {
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Item 1'
}, {
text: 'Item 2',
menu: {
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 20//only for example you can put as basis of your requirement
});
}
},
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Sub Item 1',
}, {
text: 'Sub Item 2'
}]
}
}],
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 10//only for example you can put as basis of your requirement
});
}
}
}
}]
});

How to add links to modal window in ExtJs

I am trying to create a list of links from a data store, and then use an XTemplate to loop through and display all the links in the data store. I am trying to display the links in a modal window. This is my code:
var win;
var tpl = new Ext.XTemplate("<p>Field1: {f1}, Field2: {f2} </p>").compile();
var data = {
f1: 'a',
f2: null
};
if(!win){
win = new Ext.Window({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'component',
autoEl: {
html: '<input type="text">'
},
listeners: {
render: function(_component) {
_component.getEl().on('keyup', function(e) {
//console.log(this);
console.log(this.dom.childNodes[0].value);
});
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data,
renderTo: Ext.get('hello-win')
}
]
});
}
win.show(this);
There are no errors in console, but the links never load. It just shows my modal window and my textbox, but no links. I would put in in a jsfiddle, but I don't know how (I'm new to ExtJs).
How can I display a list of links in this modal window?

You should not define renderTo in you panel config. Component defined in items array will be rendered to parent component automatically.
Your window have two items so you can not use fit layout. This layout can be used only if component have only one child component. You can remove layout definition and Ext JS framework will use auto layout or you can use some layout which support more child items, like hbox, vbox, etc.
Your code should look like this:
var win = new Ext.Window({
width:500,
height:300,
closeAction:'hide',
plain: true,
items: [
{
xtype: 'textfield',
enableKeyEvents: true,
listeners: {
keyup: function(c) {
console.log(c.getValue());
}
}
},
{
xtype: 'panel',
title: 'test',
height: 100,
bodyPadding: 10,
tpl: tpl,
data: data
}
]
});
Also you should consider using textfield component instead of creating textfield by using component with autoEl config.

Ext.js: How to add a search bar to a panel's header?

in Ext.js, how to add search bar to a panel's header? There is a ext.panel.tool class, but none of them are search bar. There is only a "search" button, what I need is add a text input field together with a search button into a panel's header.

Try this -
Ext.onReady(function() {
Ext.define('Ext.ux.form.SearchField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.searchfield',
trigger1Cls: Ext.baseCSSPrefix + 'form-search-trigger',
initComponent: function(){
this.callParent(arguments);
},
afterRender: function(){
this.callParent();
}
});
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 700,
renderTo: Ext.getBody(),
tools: [ {
xtype: 'searchfield'
}]
});
});
Please find more details about searchField source code Here

If you want to use icons in panel you have to use type config otherwise you can use search field component which is basically textfield component with search bar styling .
Ext.create('Ext.panel.Panel', {
title: 'Search',
renderTo: Ext.getBody(),
tools: [{
xtype: 'searchfield'
}, {
type: 'search'
}
]
});