Develop Reference

Style Get Overriden in xtype button with IconCls in Ext Js 6.0.1

I am new in the ext js development. I need a extjs button with icon and text on it. The button behavior (onmouseover , onclick etc) should be same as extjs button.
I am using icon from svg file.
Below are the steps that i am trying, but it does not behave like extjs button:
Panel.js :
xtype: 'button',
iconCls: 'svgImage',
minWidth: 20,
maxWidth: 40,
localized: { text: 'localtext' }
Here even if i add the style:'background-color:#eeefea' for the xtype it will disappear the image from the button.
I am thankful, if anyone face the same issue and having solution for the same.

There are two config options to set button's image:
iconCls - one or more space separated CSS classes to be applied to the icon element
icon - Url to the icon
See my live demo here: https://ext4all.com/post/extjs-6-button-with-svg-icon.html

ext js change color of panel to gradient

I am trying to change the colors of all the items in my first ExtJS6 project.
Preferably I'd like to create some gradients for things such as panel backgrounds and the like.
Can someone please show me how to accomplish this?
I'm am looking at this post from 2009 but it just shows single colors, it might be outdated, and I don't know where to add lines to css in my project?
Two ways:
First(Directly change in panel):
new Ext.Panel({
width:200,
height:200,
bodyStyle:{"background-color":"red"},
renderTo: document.body
});
Second(Add CSS class and use it in Panel's 'bodyCssClass' property):
.x-panel-body{
background-color: blue}
thanks!

I believe that if you want to
change the colors of all the items in my first ExtJS6 project
its actually much better to build custom theme for your application and keep the advantages of the framework, for example pre-rendered images for legacy browsers.
Check this ExtJS theming guide.

bodyStyle lets you set CSS properties like background-image. This will apply to a single widget.
new Ext.Panel({
width:200,
height:200,
bodyStyle:{'background-image': 'linear-gradient(red, orange);'},
renderTo: document.body
});
If you want it to apply to all panels, you add the CSS after Ext's CSS
.x-panel-body{
background-image: linear-gradient(red, orange);
}
If you want it to apply to a set of panels, add a cls config and a matching CSS rule
.my-special-bg {
background-image: linear-gradient(red, orange);
}
new Ext.Panel({
width:200,
height:200,
cls: 'my-special-bg',
renderTo: document.body
});

ExtJS and buttons

I'm novice in ExtJS ... but
I can't solve my problem with two buttons, let's say [B1] and [B2].
On simple toolbar I want to have two buttons on the SAME place
respectively on something (let's say 20 pcx from the left on the
toolbar) displayed alternately [B1] or [B2] on the same position.
Buttons are defined as:
xtype: 'toolbar',
dock: 'bottom',
height: 30,
items: [
[B1] is filefield button:
xtype: 'filefield',
itemId: 'FFId',
buttonOnly: true,
...
[B2] button (in fact used as pull down menu button):
xtype: 'button',
iconAlign: 'right',
...
]
When buttons are simple buttons boyh situation is the same. I tried
to hide/show them the following way:
on the base of hidden property and method setVisible() they are no
in the same place, they are displayed "side by side" (I mean e.g.
[B1] place is empty and on the right side [B2] is displayed)
on the base of style: 'visibility: ...' - the same situation
on the base of style: 'display: ...' almost good, both buttons
are displayed the same place but (left 20 pcx the toolbar)
lower in the toolbar so I see half of both of them
Have you any suggestions?
Thanks in advance!

Try using the property hidden: true.
And for changing the state after it is rendered use the functions .hide(), .show() or if you want to use the same function for both .setHidden(boolInput) where boolInput is true if you want to hide the button, and false if you want to show it.
Edit for clarification:
I assumed you to be wanting to show only one button at a time, and have which ever button is showing at any given time be displayed in the same location. Is that what you wanted, or something different?
Here is a working example of what I understand you are looking for:
https://fiddle.sencha.com/#fiddle/nvn

For your third option style: 'display: ...', you can try set margin and padding configuration to adjust the position of buttons.

jQuery magnific-popup : open 2 popup iframe with differents width/height

)
My code :
OPEN POP1 OPEN POP2
My JS :
$('.pop').magnificPopup({ type:'iframe', midClick: true} );
I would like POP1 to open with 500px 200px, and POP2 with 400px 400px.
What is the way to set differents width/height for POP1 and POP2 ?
Do I have to use a CLASS in the HREF ? or is it a code in the JS, by creating a $(.pop1) and $(.pop2) ?
I played with width/height in the class ".mfp-iframe-holder .mfp-content" but the settings change both pop1 and pop2.
Any help will be great. ;-)

You neglected to specify it in your question, but I'm going to assume you're using the Magnific Popup plugin. For future reference, please specify that so it is easier for others to assist you.
I would suggest going with a class for each (let's say .pop1 and .pop2 for the 500x200 and 400x400 sizes, respectively). Since the class names have no direct relationship to the resultant popup HTML (the classes .pop1 and .pop2 will not be referenced in the generated popup), we cannot isolate their popups and the selective sizing cannot be done through solely CSS. Instead, we can modify the generated HTML directly – something which the documentation states you can do.
So, your initialization for each popup will look something like:
$('.pop1').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div style="width:500px; height:200px;">'+
'<div class="mfp-iframe-scaler" >'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div></div>'
}
});
Note how I added an additional <div> with inline styling around the entire set of elements. Also, you'll need to override one of the default styles to allow the popup width to vary in this manner (the plugin has a standard width it usually uses for popups:)
.mfp-iframe-holder .mfp-content{
width:auto;
}
Here's a CodePen to demonstrate the code in action. Hope this helps! Let me know if you have any questions.

Customizing Ext.js grid panel's title

Is there a way to customize the title of ext.js grid panel (or is there a more generic way of customizing panel title) by adding custom controls to it, and not tool buttons?
I am tring to add a search field to the title, but with current existing implementation (found in the ux/grid example) it is shown how filter can be added to the drop down menu of the grid's title, and not to the title itself, which is what I am trying to achieve..
Any clue?

Have a look at the grid panel's header config, where you can set any configuration option of Ext.panel.Header. As it is a container, you can just specify its items there:
header: {
title: 'Test',
titlePosition: 0,
items: [{
xtype: 'textfield'
}]
}
Also check out this fiddle.

Header is a container with hbox layout so you can add/remove items to it as to any other container. You can test it (for example) here: http://extjs.eu/apps/saki-writable-grid/ by typing
Ext.ComponentQuery.query('maingridview')[0].getHeader().add({xtype:'textfield'});
in the console. The textfield appears at the header right.
As to grid filtering, see Grid Search Plugin that can be added also to the grid header.