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

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 slimScroll issue with getting div to scroll?

I am a complete novice with JQuery!
So here is my fiddle:
http://jsfiddle.net/hYEzV/977/
Fullscreen:
http://fiddle.jshell.net/hYEzV/977/show/
I've add the plug-in in the external resources panel.
My div that I want to attach the scroll to has the id of "sc" and it is wrapped inside a div with the id of "AboutMe"
My JQuery code is located right at the bottom of the JS panel and is this:
$('#sc').slimScroll({
position: 'right',
height: '100%',
color: '#ffffff',
railVisible: true,
alwaysVisible: true
});
For some reason it isn't scrolling the div I can see the scroll bar to the right that is coming up but it can't be dragged nor is it changing color to white....
I can't see a problem with it so any help I would love
and thank you in advance for solving if you can!

Solved forgot to add JQuery UI in resources.

TinyMCE windowManager - modal with scrollbars

I am trying to create a modal window with windowManager.open({...}) that will have a (probably long) list of items. Only way to ensure that it will display properly is to set fixed height to modal and make it's content scrollable.
Documentation on windowManager.open isn't really helping me here. I was able to find some examples describing scrollbars option:
editor.windowManager.open({
scrollbars: true,
height: 300,
...
});
But it is not working for me. If only someone could give me a hint on this, maybe I need to use some kind of Panel for my modal's body?
I will really appreciate if someone could update my Fiddle.

Hah, I've spent all of yesterday trying to figure this out but as soon I've posted my question I've found the answer myself.
I was trying to repaint the dialog after setting overflow: auto manually by calling win._bindings.repaint[0]() and it gave me an error:
Cannot read property 'autoScroll' of undefined
And it turned out that autoScroll is what I was looking for:
editor.windowManager.open({
autoScroll: true,
height: 300,
...
});

JQuery Dialog with constant aspect ratio

I need to display an image in a resizable dialog (so far all the specific image popup libraries I have tried do not fit my needs).
All I want to do is maintain the aspect ratio during resizing. Sounds easy, but it's not.
I thought something like this might work, but no dice:
var d = $("").dialog({title:title, width:400, height:400});
d.resizable( "option", "aspectRatio", true );
Any pointers greatly appreciated, tks

Due to the way it's hooked in, I find it easiest to just do the resizable portion yourself, like this:
$("div").dialog({
title:"Title",
width:400,
height:400,
resizable: false
}).parent().resizable({
handles: 'n,e,s,w,se,sw,ne,nw',
aspectRatio: true
});​​​
You can view a demo here, you can also destroy and re-create it...but that's a bit wasteful, so just create it above, specify the max/min height/width in the resizable instead of the dialog if needed. This should work: .parent().resizable("option", "aspectRatio", true), but it doesn't due to the way the widgets hooked in, so the eaiest solution is to just create the resizable yourself with the options you want when you create the dialog.
Side note: you're using .parent() here because you wan the dialog container that contains the title bar and your content. It's created/wrapped like this when you create the dialog.