setting 'minWidth' default config for button in ext js 4 - extjs

i'm currently trying to get my head around the theming capabilities of ext js 4 and am having some trouble with the styling of buttons.
setting button dimensions isn't quite possible using the scss variables provided, but there are some javascript config options for this. as i don't want to have to apply these settings to every button instance, i was looking for a way of setting 'config defaults' for the button class.
the following approach worked out well when setting a default height:
Ext.button.Button.prototype.height = 15;
unfortunately, this seems not to be possible for the 'minWidth' config:
Ext.button.Button.prototype.minWidth = 1; //nope, sorry
is there a way of setting a default value for 'minWidth'?

short answer
Ext.override(Ext.panel.Panel, {
minButtonWidth: 1
});
Ext.override(Ext.button.Button, {
minWidth: 1
});
longer answer
setting Ext.button.Button.prototype.minWidth = 1; is correct (better use the override mentioned in the short answer), but ignored by ExtJs internal handling of setting the default minWidth of 75 of Ext.panel.Panel (see bridgeToolbars() function). So if you would use a button outside of a Panel Toolbar, your initial try would work.
Also, there is a hardcoded minWidth of 75 of buttons in the makeButtons() function of Ext.window.MessageBox.
In my opinion you should open a bugreport #sencha, because there should be a themable, more global setting for this.
update: this was tested with ExtJS 4.1

If you want to change it for every single button with in the framework. Use the override system.
app/overrides/Button.js
Ext.define('App.overrides.Button', {}, function() {
Ext.override(Ext.button.Button, {
minWidth: 20
});
});
app.js
Ext.onReady(function() {
/*
* Load Overrides
*/
Ext.require([
'App.overrides.Button'
]);
});
var app = Ext.Application({.....
I'm not sure how sensible this is however as things like tabs extend from button and it might have some adverse effects. But thats how it's done any how.

Related

Dojo Tooltip Attach to Multiple Nodes: Element Selector Works, but not Class Selector

I'm trying to use dojo Tooltips on a series of SVG elements that are tool buttons in my header. I'm using the method in the docs of attaching tooltips to multiple nodes like this:
new Tooltip({
connectId: query('.header'),
selector: 'svg',
position: ['below'],
getContent: function (e) {
return e.getAttribute('data-tooltiptext');
}
});
And that works, but if I use a selector of '.tool' (every SVG has a class of tool on it) my getContent function never gets called. 'svg.tool' doesn't work as a selector either. The docs an several examples around the net claim class selectors will work, but I've only been able to get element selectors to work.
I'm requiring 'dojo/query' and I've tried using 'dojo/query!css3' but that doesn't seem to make a difference. I don't know if it makes a difference, but I'm using dojo included with ESRI's ArcGIS JS API library, which reports a dojo version of 1.14.2.
I've experienced the same issue when using the selector attribute while creating a Menu. Within an SVG element, element selectors (even comma-concatenated ones) work, but class selectors do not. Outside of the SVG element, they worked just fine. You can play around with this by using dojo.query in your browser's console to see which elements get selected.
I was able to solve the issue by changing the selectorEngine in my dojo config. Using any of css3, css2.1, and css2 worked, so I think the issue may be in the acme engine. If you don't already have a dojo config, you can add it via a script tag:
<script>
var dojoConfig = {
selectorEngine: 'css3',
};
</script>

Trying to get class/id value on tabbed Panel tab section

For test automation purposes, I need a class/id value on the tab bit (whatever you call it..) in a tabbed pane.
I have tried the following AAA,BBB,CCC and DDD, and none of these appear in the class in the DOM level.
var panel1 = Ext.create('Ext.panel.Panel');
panel1.cls = 'AAA'
panel1.itemCls = 'BBBB'
var panel2 = Ext.create('Ext.panel.Panel');
Ext.create('Ext.tab.Panel', {
cls:'CCC',
itemCls:'DDD',
renderTo: document.body,
items: [panel1,panel2]
}
);
I know its somehow possible. Anyone have an idea??
http://jsfiddle.net/GQULg/9/
OK just figured this out. I need to set a tabConfig object on the panel or container that goes inside the tabbed panel.
var panel1 = Ext.create('Ext.panel.Panel');
panel1.tabConfig = {
cls: 'myTab'
};
The tabConfig object holds the cls (class values) that will populate the tabs on the top.
If you intend to use selenium: other people stated that selenium uses plain JavaScript commands and that best would be to also use Ext.getCmp(), Ext.ComponentQuery()... from selenium.
Why? Because it does not need any special changes to your production code!

How to disable button Ext JS

I have a button with id of btnAdd and I want to disable it when some event is fired. The event occurs when some window is closed. So I tried the following code and it does not work.
Ext.create('Ext.window.Window', {
// Some initialization code goes here...
listeners: {
close: function(panel, eOpts){
Ext.get('btnAdd').disable(); // this does not work;
Ext.get('btnAdd').setDisabled(); // this one does not either
Ext.get('btnAdd').disabled = true; // And this one also seems to do nothing
}
}
});
How can I do that? This may seem to be pretty easy question but don't judge me bad. I'm quite new to Ext JS. I could not find the answer in the API Documentation either.
Ext.get('btnAdd').setDisabled(true);
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.button.Button-method-setDisabled
IF the button is Extjs component then use
Ext.getCmp('btnAdd').disable();
If it is not Ext js Component then use
Ext.get('btnAdd').setDisabled(true);
I hope this will help.
Ext.get('btnid').disable();
Ext.get('btnid').setDisabled(true);
both return errors, the best way that work without issues is
Ext.getCmp('btnid').setDisabled(true)
and you can set a text when the button is disabled to notify the user.
Example:
Ext.getCmp('btnid').setText("Button has been disabled")
Ext.get('btnid').disable();
Ext.get('btnid').setDisabled(true);

Using Backbone.Notifier to display custom view

I am using Backbone.Notifier for showing alerts. How could I display custom backbone view inside it?
Any suggestion?
Don't think it's suited to adding your own custom view. Customization of the notifications view comes through CSS.
For customising buttons you can use the css property :
buttons: [
{'data-role': 'myOk', text: 'Sure', 'class': 'default', css: {width: 120}},
{'data-role': 'myOk', text: 'Yes'}]
For customising the base notification window use the 'notifier' CSS class.
You can change this with the 'baseCls' property on the notifier.
Unfortunately I don't think there's a way of assigning a Backbone view to the notifier but if it's just customization of the aesthetics you want then hopefully the CSS is enough.
If you really wanted to go for a hacky approach you could use the NotificationView which is a standard Backbone View (part of the Notifier class - Backbone.Notifier.NotificationView). You could try overriding this to your implementation but it's definitely a hack so wouldn't recommend it. It's worth taking a look at the notifer.js source code.
To show my custom view inside backbone.notifier i am adding following lines inside the plugin
In notify function before the return statement
.......
if(options.custView){
msgInner.off('click'); //the turn off default behaviour which is to destroy view on click
options.custView.destroyNotifier = removeFn; //now in the custom view i just call this.destroyNotification to destroy the notification
msgView.$el.find('.notifier-message').html(options.custView.render().el); //pasting my view on notification to display
}
return msgView;
}
This is how I now call the plugin
var notifier = new Backbone.Notifier({
el : 'body',
theme : 'clean'
});
notifier.notify({
custView : (new SomeView({
x : 'xyz'
})),
ms : false, //to aviod a timeout
destroy : true
})

Extjs disable native grid scroll

My extjs version is 4.0.2a. Sometimes vertical scrollbar in grid stops working. It is common problem. I've found some solutions, but they didn't work for me:
this.Grid.hideVerticalScroller();
this.Grid.initVerticalScroller();
this.Grid.update();
this.Grid.determineScrollbars();
this.Grid.forceComponentLayout();
this.Grid.doComponentLayout();
I've also tried scroll: false, but it didn't work too and maked my browser stop responding.
I think, I can disable extjs grid scrollbar and add browser standart scrollbars (overflow:auto), but I don't know how.
Any suggestions?
P.S. I can't use another version Extjs, because there is very big working project with some fixes in some core files. It will be very hard to make all work with new version of Extjs
Here's the "fix" I used with 4.0.7; it may work with 4.0.2. Code is not mine, I took it from sencha.com forum:
Ext.define('Ext.ux.grid.Panel', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.on('scrollershow', function(scroller) {
if (scroller && scroller.scrollEl) {
scroller.clearManagedListeners();
scroller.mon(scroller.scrollEl, 'scroll', scroller.onElScroll, scroller);
}
});
},
onViewRefresh: function() {
var me = this;
try {
me.callParent();
}
catch (e) {};
}
});
Use Ext.ux.grid.Panel instead of Ext.grid.Panel to inherit your Grid classes from. It doesn't solve the problem completely but drastically reduces the visibility of that particular bug.
On a side note, I would recommend you to bite the bullet and upgrade to 4.1.1, in my experience it was well worth the effort. Start with removing your custom fixes from the core; you can refactor them into separate classes that override core classes. After that, it'll go easier. I know, I've been through that too.

Resources