I'm trying to shake a window, but got error mess in console. My code:
var win = new qx.ui.window.Window ("Login");
win.setLayout (new qx.ui.layout.Grow);
win.add (view);
this.effect = new qx.fx.effect.combination.Shake (
win.getContainerElement ().getDomElement ());
return win;
Where view is a GroupBox instance (from demobrowser/animation/login).
As you have found out by yourself: the DOM element of the window is not there at the moment you create the shake object. In qooxdoo we create all DOM elements at once, so that the browser don't have to render more often than needed.
At the time window fires the "appear" event (you could also use the "resize" event), the DOM element has been created. Be sure to use addListenerOnce() instead of addListener()! Otherwise you will create a new shake effect every time the window gets visible again, if it has been hidden. ;-)
Sorry for noise!
If I create an effect in "appear" listener - code works well.
win.addListener ("appear", function (e)
{
this.effect = new qx.fx.effect.combination.Shake (
win.getContainerElement ().getDomElement ());
}, this);
var win = new qx.ui.window.Window("Login");
win.setLayout(new qx.ui.layout.Grow);
win.add(view);
win.addListener("appear", function(){
var effect = new qx.fx.effect.combination.Shake(win.getContainerElement().getDomElement());
effect.start();
}, this);
return win;
Related
I have an app that uses ExtJS 3.3.0. It uses an EditorGridPanel in which after the store is reloaded - I would like it to preserve the scroll position of the grid rather than sending it back up to the top.
Since it's an earlier version of ExtJS - this does not work.
viewConfig: {
preserveScrollOnRefresh: true
}
I thought I had found a solution per Zeke's suggestion to use a scrollTo function like so:
//Save position
var top = grid.getView().scrollergetScroll().top;
//Restore position
grid.getView().scroller.scrollTo('top',top);
This works great - except that after it's done reloading it goes right back up to the top. Basically this would be a perfect solution if only I didn't need preserve the cursor position after reloading the store.
grid().getStore().reload({
callback: function (response) {
//Works at this point
grid.getView().scroller.scrollTo('top',top);
}
}
//However the cursor pops right back up to the top after popping out of
//reload() block
Thanks in advance
This is a little kludgy - maybe the best strategy is just not to use older versions of ExtJS - but this seems to work okay.
Basically just declare some global variables that can be seen from anywhere in the file - one is a flag to indicate that the event that triggers the reload has occured (rowClicked), and one to represent the last known position of the scrollbar
var rowClicked = false;
var prevScrollPosition = -1;
When the event occurs that will trigger the re-load - set the global variable rowClicked to true
rowclick: function(grid, rowIndex, event) {
rowClicked = true;
Then in the listeners of the grid use the rowClicked variable to determine when to re-position the scrollbar.
listeners : {
bodyscroll: function(sl, st) {
if (rowClicked) {
getScenarioLineOrderNumbersGrid().getView().scroller.scrollTo('top',prevScrollPosition);
rowClicked = false;
}
prevScrollPosition = st;
}
Kludgy - but it works.
In Anystock/AnyChart, I want to listen to the point event when the mouse clicks.
So, I added the following code as a script.
anychart.onDocumentReady(function () {
// create data table
var table = anychart.data.table();
// add data
table.addData([
['2015-12-24', 511.53, 514.98, 505.79, 506.40],
['2015-12-25', 512.53, 514.88, 505.69, 510.34],
['2015-12-26', 511.83, 514.98, 505.59, 507.23],
['2015-12-27', 511.22, 515.30, 505.49, 506.47],
['2015-12-28', 511.53, 514.98, 505.79, 506.40],
['2015-12-29', 512.53, 513.88, 505.69, 510.34],
['2015-12-30', 511.83, 512.98, 502.59, 503.23],
['2015-12-31', 511.22, 515.30, 505.49, 506.47],
['2016-01-01', 510.35, 515.72, 505.23, 508.80]
]);
// map loaded data
var mapping = table.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});
// create a stock chart
var chart = anychart.stock();
// add a series using mapping
chart.plot(0).ohlc(mapping).name('ACME Corp. Stock Prices');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// add a mount event listener - It is fine.
chart.listen('click', function(e){
alert(e);
});
// add a point event listener - It does not work.
chart.listen('pointClick', function(e){
alert(e);
});
});
The mouse event was being raised successfully, but the point event did not work.
How does we add the point event listener into anychart.stock() on AnyChart?
If anyone has a solution already, it would be great if you could share it.
Unfortunately, the current version of AnyStock (8.3.0) doesn't support point related events as basic charts. If you want to show additional information about the point you can show it in the point tooltip using formatter function - https://api.anychart.com/anychart.core.ui.Tooltip#format
I am trying to get a reference in the "scrollbar-y" of the class qx.ui.list.List
Using the createChildControl event how can I check if the widget is the one named "scrollbar-y"?
So far I found two ways of which none seems elegant but both seem to get the job done
this.__list = new qx.ui.list.List()
this.__list.addListener("createChildControl", this.__onListCreateChildControl, this);
and later
__onListCreateChildControl: function (e){
debugger;
var child = e.getData();
if (child.constructor === qx.ui.core.scroll.ScrollBar && child.getOrientation() === "vertical") {
child.addListener("scroll", this.__onListScroll, this);
}
},
This checks implicitly. Apparently if it is a scrollbar and it is vertical it is our y scrollbar. Yeah it kinda looks like a duck but I have to check for both
if (quacks like one && walks like one)
The other way is
__onListCreateChildControl: function (e){
debugger;
var child = e.getData();
if (child.$$subcontrol === 'scrollbar-y') {
child.addListener("scroll", this.__onListScroll, this);
}
},
which uses the internal variable $$subcontrol. This works fine but it uses qooxdoo internals which seems like a hack.
P.S. I did try getChildControl('scrollbar-y') in various phases but since it is created in "as needed" basis I always get null.
You're right! There is no "straightforward" possibility to retrieve the ID (or name) of a widget created as a child of another widget in terms of child control creation.
Therefore I've submitted a PR to github which does exactly that: namely retrieving the id/name of a child control by exposing the internal $$subcontrol variable via a method getSubcontrolId https://github.com/qooxdoo/qooxdoo/pull/9140
The PR is currently in review state.
When my button is clicked, the ng-hide directive will turn a hidden div to be visible on page. I am using Seleno to write UI test for an Angular application.
I have checked the display css value on that element:
var cssValue = SelectById(elementId).GetCssValue("display");
This cssValue always returns a none.
Also checked is the class attribute.
var cls = SelectById(elementId).GetAttribute("class");
I am expecting ng-hide should be removed from the classes of this element.
return !SelectById(elementId).GetAttribute("class").Contains("ng-hide");
But every time the class still contains ng-hide!
In case someone may ask, here is my SelectById. Just to return a Web Element on the Selenium Page Object.
protected IWebElement SelectById(string id)
{
return Find.Element(By.Id(id));
}
As mentioned in the answer section, I probably did not wait out the class update by Angular in a correct way. What I did is just let the Thread Sleep a while.
public static void Pause(int durationInMilisecond = 2000)
{
if (SelenoSettings.EnablePausing)
Thread.Sleep(durationInMilisecond);
}
Anyone can give me some advice? Thanks.
Here is our solution, thanks to the input from ABucin and Arran. Thank you for pointing to the right direction for us. WebDriverWait is the thing we should look into in this case.
public bool Displayed(string elementId)
{
try
{
var wait=new WebDriverWait(BrowserFactory.Chrome(),new TimeSpan(0,2,0));
wait.Until(d => !SelectById(elementId).GetAttribute("class").Contains("ng-hide"));
// then there is all types of checking start to work:
var bySelenoDisplayed =SelectById(elementId).Displayed;
return bySelenoDisplayed;
var byCss = SelectById(elementId).GetCssValue("display");
return !byCss.Equals("hidden");
var byClass = SelectById(elementId).GetAttribute("class");
return !byClass.Contains("ng-hide");
}
catch (Exception)
{
// 2min timeout reached.
return false;
}
}
According to the Angular ngHide documentation (https://docs.angularjs.org/api/ng/directive/ngHide), "The element is shown or hidden by removing or adding the ng-hide CSS class onto the element.". So your best way of approaching this, is to:
click on button
wait for the class to be toggled off
check that class is not present
I believe your problem is that the class removal does not happen immediately, but after a certain period of time. I have had several issues regarding this with Selenium on Java, and I assume this is the problem in your case, as well.
enter code hereI have a window in which I have a form with trigger fields. So by trigerring I mean , if I select a value from first combo, its trigerring the succeding combos with their's first values. This is working fine when I open the window for the first time. But if close it and open it for the second time, it will generate error as me.store.loading is undefined.
I am using on load event of combo to fire the next combo with its first value. Please see code below which I have put in the render event of a field in that window.
Thanks,
sj
me.control({
'addinp #renderCmp':{
render:me.registerTriggerCalls
}
})
registerTriggerCalls : function() {
var stcombo = Ext.getCmp('StField');
stcombo.store.on('load', function(store, record, opts)
{debugger;
if (store.totalCount <= 0)
{ return; }
stcombo.setValue(store.getAt(0).data.stThru);
stcombo.fireEvent('select', stcombo);
});
var adcombo = Ext.getCmp('AdField');
adcombo.store.on('load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
adcombo.setValue(store.getAt(0).data.adDate);
adcombo.fireEvent('select', adcombo);
});
}
When does the store get created/destroyed? Are you creating a new store with each combo box or are you reusing a global store each time?
In the comments above, I give you a way to troubleshoot, but if you're reusing the same store object over and over, you either need to use a managed listener (preferred) or unregister your handlers when your combo boxes are destroyed.
var stcombo = Ext.getCmp('StField');
stcombo.mon(store, 'load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
stcombo.setValue(store.getAt(0).data.stThru);
stcombo.fireEvent('select', stcombo);
});
var adcombo = Ext.getCmp('AdField');
adcombo.mon(store, 'load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
adcombo.setValue(store.getAt(0).data.adDate);
adcombo.fireEvent('select', adcombo);
});
Assuming that's the case, what's happening is that the life span of your store and your combo box is disconnected. The listeners are tied to the store's life span which doesn't have visibility to the combo box's life span. Hence, the old listeners don't get removed until the store is destroyed which is obviously bad -- for a number of reasons -- but causing your exception because the closure references a destroyed combo box.
A managed listener solves this by essentially tying the listener's life span to the combo box instead of the store.