EXTJS store related error when switching tabs: ext-all-debug.js:53117 Uncaught TypeError: Cannot read property 'isSynchronous' of null - extjs

I have a simplified fiddle that shows the issue I'm seeing:
https://fiddle.sencha.com/#view/editor&fiddle/2nbs
The application has two tabs. Each tab contains an instance of a component made up of a tree panel and a grid. Clicking a node in the tree populates the grid. If you visit both tabs before clicking a node in either tree then the application behaves. However, if you click a tree node in the first tab and thus populate the grid, then visiting the 2nd tabs throws this error:
ext-all-debug.js:53117 Uncaught TypeError: Cannot read property 'isSynchronous' of null
at constructor.loadsSynchronously (ext-all-debug.js:53117)
at constructor.createMask (ext-all-debug.js:106694)
at constructor.onRender (ext-all-debug.js:105766)
at constructor.finishRender (ext-all-debug.js:38449)
at constructor.finishRenderItems (ext-all-debug.js:76675)
at constructor.finishRender (ext-all-debug.js:76992)
at constructor.finishRenderChildren (ext-all-debug.js:79000)
at constructor.afterRender (ext-all-debug.js:37909)
at constructor.finishRender (ext-all-debug.js:38463)
at constructor.finishRenderItems (ext-all-debug.js:76675)
I'm building in extjs 5.1.3, but this reproduces in the latest version (6.6). I suspect I'm missing something stupidly obvious...

I found the problem...
the code that was destroying the old store was also destroying ext-store-empty - used by all empty grids etc
so I did this:
if (oldStore && oldStore.storeId !== 'ext-empty-store') {
oldStore.destroy();
}
there might be a neater way, but this works.

Related

error while I try to click by button in Nigthmare.js

I try to create a code that should help me automates the process of biding. I use Nightmare.js and when I am trying click button it returns error. Which says: Error: Unable to find element by selector: .MenuItemButton__1ijozEjL3V.here is my code
This method finds element by selector with document.querySelector. And button with this selector is on the pagecontent of the page but this element is not found by Nightmare.js. What might be wrong with my code? I have never tried webs-crapping before. Any advices will be appreciated

ExtJS Modern getting and showing hidden node in tree view

I'm having issues getting the node and record. Also I can not make a node that is visible: false on init to show programmatically.
Check out this fiddle
https://fiddle.sencha.com/#view/editor&fiddle/3hs5
I found the issue. I used setData instead of root.appendChild so the store wasn't correctly populated.
The fiddle is updated and now works

How to horizontally scroll in a React Application (ag grid) with UI automation (WebdriverIO /JavaScript)?

We have a grid application exactly similar to this demo application:
https://www.ag-grid.com/example.php
I want to horizontally/vertically scroll to any element in this demo site.
I have tried below methods:
browser.moveTo() : is not working and throwing below error :
stale element reference: element is not attached to the page document
browser.scroll(1665, 147.12345) : Is not doing anything. Pass the step.
browser or element.scrollIntoView() :shows not an existing method. Following error appears:
Property 'scrollIntoView' does not exist on type 'Client> & RawResult'.t
and
Property 'scrollIntoView' does not exist on type 'Client> & RawResult'.t
I am using webdriverio and typescript for UI automation.
wdio version:
"webdriverio": "^4.14.4"
Though none of the existing methods worked, but I solved it by using the "Tab" key. I followed below steps:
I click/select the last visible element in the current screen.
I press "Tab" key (Single or multiple as needed)
This scrolled the page horizontally(which solved my purpose for now).
Try to use scroll with javascript:
browser.execute(function() {
document.querySelector('yourElementLocator').scrollIntoView()
})
Keep in mind that code inside browser.execute does not have access to the outer context. So if you want to pass your element inside you will have to specify this argument after executable code:
browser.execute(function(){}, selector)
https://webdriver.io/docs/api/browser/execute.html
browser.waitUntil(
async () => {
browser.keys(["\ue00F"]);
return await countryEle.isDisplayedInViewport();
},
15000,
undefined,
500
);

"Cannot convert undefined or null to object" when click selected kendo tree item

I used Kendo-angular directive for Kendo tree view. I formed datasource using the following method and view as below. I don't get any error if use Jquery style instead of Angular directive.
var dataSource = new kendo.data.HierarchicalDataSource()
$scope.templateData = dataSource ;
<div kendo-tree-view="tree" k-data-source="templateData" k-on-change="onTemplateSelection(dataItem)"></div>
$("#treeview").kendoTreeView({
spriteCssClass: "sprite",
dataSource: dataSource,
dataTextField: [ "AppName", "Name" ],
select: onSelect
});
Tree loads fine and on-change event fires when we click any item on tree. However, when we click the selected item again then change event doesn't trigger and it triggers error that reads.
Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at Object.ve.proxyModelSetters (kendo.all.min.js:26)
at init.<anonymous> (kendo.all.min.js:86)
at init.trigger (kendo.all.min.js:25)
at init.select (kendo.all.min.js:59)
at init._click (kendo.all.min.js:58)
It's hard to find the error without having all the code but basically the exception you're getting is quite simple. Somewhere in your code you probably have a block that looks like this:
if (object !== "null") { // The null is a string and not actually null
...
Object.keys(object) ...
...
}
Search your code for 'null' or "null". if you don't find it like this, see if you might have misspelled it as well.
I found the mistake. Once I clicked an item on the tree, I used to remove the class, k-"state-selected" from the item. Next time when I click the same item, it seems it uses the same class("k-state-selected") and data-uid to find the selected item. So as it was not present on that item, it used to give the error mentioned above.

Stores and Dataview List - Can't Add Element - IndexOf of null

Using Sencha Touch (2.2) with Sencha Architect 2
I have a tree structure in which I navigate.
The nodes are Elements and elements can either be a folder or a leaf.
To display the elements on my Ext.dataview.dataview (LIST), I use a store (storeID: 'elementstore') and Ext.dataview.component.Dataitem.
Here is my code to fill the LIST at first and everytime we open a folder to go deeper in the tree.
Filling the store for the first time, disable event so update() is not
called twice has I will be switching to this view right after the
creation of it. It works well and give back the desired result. I have
in my LIST the first level of Folders and Leaf displayed.
This is fired directly in the list with an onItemTap Event
var EStore = Ext.getStore('elementstore');
EStore.removeAll();
EStore.suspendEvents();
EStore.add(record.get('arrElement'));
EStore.resumeEvents(true);
Emptying and refilling the store with the reached level of the tree.
This is fired directly in the LIST with an onItemTap Event
if(record.get('strUIType') === 'folder')
{
INDEX_STACK.push(index);
store = Ext.getStore('elementstore');
store.removeAll();
store.add(record.get('arrElement'));
}
What is wrong is when I try to go backward, going up in my tree. Here
is the code which is located in a Sencha Controller.
It actually does not go back one level but back at the top level. ACTIVE_PROJECT is the
index of the active tree which are all located in my project store.
var popped =INDEX_STACK.pop();
var tab = tabpanel.getParent().getParent().getParent().getComponent('projects_Tab');
if(popped === undefined)
{
tab.setActiveItem(0);
}
else
{
var eStore = Ext.getStore('elementstore');
eStore.removeAll();
//Crashes!
eStore.add(Ext.getStore('projectstore').getAt(ACTIVE_PROJECT).get('arrElement'));
}
Has you see the eStore.add(....) is the crashing line on which I get the following error :
Uncaught TypeError: Cannot call method 'indexOf' of null sencha-touch-all.js:21
Ext.Array.contains.e
Ext.Array.include
Ext.define.join
Ext.define.insert
Ext.define.add
Ext.define.onMain_TabsTap (----Yep this line is my code the rest is sencha touch...
Ext.define.doFire
The only thing I achieve to add to the store in this controller is an empty Ext.create(CarboZero.model.Element). I can not get anything from my active project.
Is there something wrong with removing and readding? Is my store getting corrupted from how I'm using it? I have been working on that for about 2 days without getting anything to work properly...
EDIT TO THE QUESTION
I just set in my Element store the destroyRemovedRecords to FALSE.
Everything works, but I don't understand ANYTHING on why it corrected the problem with my particular structure... WHat is the remove() doing exactly???
Set Element store's property to the following
destroyRemovedRecords : false
Solve the problem, still can't explain why.
I had the same issue. In my case, the caching became full. On the leaf models, you could set useCache: false to prevent the data to get cached. That fixed my issue.

Resources