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);
Related
I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.
Using either of these doesn't seem to work.
var el = document.getElementById(focusId);
el.focus();
angular.element(el).focus();
I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.
http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview
If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:
var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");
You can also pass in an id like: angular.element(document.querySelector('#focusId'));
You can look here for a prior answer which may be of some more help!
-Cheers!
Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.
setTimeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
or
$timeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)
I have a protractor test looking for a record in my infinite scroller component like this.
searchPage.searchEntitlement('search criteria');
var myHiddenElementInScroller = element(by.repeater('result in ctrl.results track by $index').row(12));
browser.driver.executeScript(function () { arguments[0].scrollIntoView(); }, myHiddenElementInScroller .getWebElement());
myHiddenElementInScroller.click();
This is supposed to scroll to the element and click it. Instead its throwing me element not visible error.
Has anyone come across this situation? Any help greatly appreciated.
You might need to explicitly wait for the scrolling into view actually happen:
browser.driver.executeScript("arguments[0].scrollIntoView()", myHiddenElementInScroller.getWebElement()).then(function () {
myHiddenElementInScroller.click();
});
Or, with browser.actions():
browser.actions().mouseMove(myHiddenElementInScroller).click().perform();
In few scenarios the element which we are looking for will be covered with some other element from DOM.when protractor tries to click it,the click will be received by the element that covers the actual element. So in such situation you need to use native javascript click event. Look at the below code.
browser.executeScript("arguments[0].click()", myHiddenElementInScroller.getWebElement())
The above code will send a click event directly to the mentioned webElement even if it is visible or not.
NOTE: this is not the recommended way for clicking an element. but you can you this in scenarios where you have no other workaround to achieve the click event.
Thanks for all the responses. I was able to resolve this issue by using element(by.CssContainingText(cssSelector, searchText)) locator.
I'm using Ext.tree.Panel of ExtJS 4.2.1. I would like to know if there is a way to preserve the position of the scrollbar after a data load (i.e. setRootNode(), loadData()). Right now, after the data is loaded, the scrollbar position is reset to the top.
Thanks in advance for any lead on this.
Try following code.
viewConfig: {
preserveScrollOnReload: true
}
I know this is old, but I noticed that "preserveScrollOnReload" does not work in Ext.tree.panel.
I resolved with cacheScrollValues. Example:
function updateNodes(nodes) {
var restoreScroll = App.yourGrid.el.cacheScrollValues();
var sto = App.yourGrid.getStore();
sto.setRootNode(nodes);
restoreScroll();
PS: I'm also using ext 4.2.1.
Hi try adding the following code once to your tree panel for scroll preserving.
For more information on this here from Sencha docs
viewConfig: {
preserveScrollOnRefresh: true
}
Hope it helps you.
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.
I need to create a button that links to textfile/excel sheet/url.How to do the same in EXTJS ? Can anyone help me with the code ?
new Ext.Button({
text: 'PRESS ME',
handler: function() {
window.open('http://textfiles.com/or/spreadsheet.xls', '_blank');
}
});
Or possibly window.location = http://somewhereelse.com/anotherfile.txt' in the handler if you don't want to open a new window.
I use the Ext.LinkButton (an extension you have to add your self) made by Animal and it works very well.
It uses an HTML <a href...> element so it acts as a normal link. I have had some troubles with wombleton's solution, because the browser might ask the user if it is okay to open this popup - due to the use of JavaScript methods.
You can also see the reference from a previous question here on stackoverflow.