We Keep Coding

ExtJs Tree loading sequence

Good day.
I am writing a tree control with Ext.tree.Panel, which loads its configuration from external .json file, while data is being loaded as .json from the server.
So, I've got the view like this:
Ext.define('App.tree.TreeView', {
extend: 'Ext.tree.Panel',
...
initFilters: function(cfg) {
/*several this.store.addFilter() based on cfg*/
},
initComponent: function () {
var me = this;
me.cfg = getSomeCfgFromSomewhere();
me.initFilters(me.cfg);
}
});
The store:
Ext.define('Site.widgets.tree.TreeStore', {
extend: 'Ext.data.TreeStore',
...
proxy: {
type: App.cfg.proxy,
reader: { type: 'json', rootProperty: 'data.children' },
format: App.cfg.proxy.urlEnd,
url: App.cfg.treeRoot,
noCache: false
}
lazyFill: true,
rootVisible: true,
root: {
full_path: '/', /*set as idProperty in model*/
'display-name': 'root',
expanded: true
},
});
The problem is: my root is explicitly set in the store, which loads its contents because of expanded: true. But then only these contents are shown in the tree, without the root itself. When filtering is removed, the tre is loaded OK.
Possible reason: from debugging of Sencha code in ext-all-debug.js: view's initComponent is called before the store starts loading the data, therefore it adds filters before the data is loaded, when the root is still empty, and then calls
onNodeFilter: function(root, childNodes) {
var me = this,
data = me.getData(),
toAdd = [];
if (me.getRootVisible()) {
if (childNodes.length) {
toAdd.push(root);
} else {
root.set('visible', false, me._silentOptions);
}
}
...
}
, i.e. the root is set invisible because it is still empty, and only then root's children are loaded.
The question is: is there an initial design mistake in my filters initialisation, and how can I fix it?

Considering that the problem is that view's initComponent is called before the store starts loading the data, I would try:
Calling initFilters inside store load event, like this:
Ext.define('Site.widgets.tree.TreeStore', {
extend: 'Ext.data.TreeStore',
...
proxy: {
type: App.cfg.proxy,
reader: { type: 'json', rootProperty: 'data.children' },
format: App.cfg.proxy.urlEnd,
url: App.cfg.treeRoot,
noCache: false
}
lazyFill: true,
rootVisible: true,
root: {
full_path: '/', /*set as idProperty in model*/
'display-name': 'root',
expanded: true
},
listeners : {
load : function() {
//Call initFilters.
//initFilters should call addFilter just once,
//with array of filters as first parameter,
//to avoid filtering the hole tree more than once!
}
}
});
This approach has a problem, because you have to deal with initFilters cfg parameter scope.

Ok, turned out that part of the answer was just inside the question: I was able to fix this thing by simply overloading onNodeFilter() method inside my store, since I know that I want to always show the root. If anyone could advise anything better - be my guest, please.

How is it possible to access property of an Object directly without making reference to an Object while calling a function in Javascript

I have this function which got referenced from some other file
define(function() {
return function service1(){
function setting1(){
return{
settings: {
url: '',
timeout: 1000,
type: 'GET',
headers: {'xyz' : null},
xhrFields: {
isRegistered: false
}
switch: ON
}
};
}
this.calls1 = {
details: setting1()
};
};
});
//the below function call is made from another file.
this.service1.details();
How does the above service1.details() works?

Sorry Guys, I have a moron TL in Team who said it is basic jQuery thing without the use of AJAX, he wasted ample amount of my time too, later I found out that this is possible as there is framework built internally for easy development.

Siesta Ext JS test not completing

I am testing an Ext JS frontend with Siesta.
Here is my login/logout test:
StartTest(function(t) {
t.diag("Login/Logout");
t.chain(
{ waitForCQ : '#loginPanel' },
function(next) {
t.cq1("#username").setValue();
t.cq1("#password").setValue();
next();
},
{ click: '>> #username' },
{ type: '******', target : '>> #username' },
{ type: '******', target : '>> #password' },
{ click: '>> #loginButton' },
{ waitForCQ: '#mainView' },
{ click: '>> #logoutButton' },
{ waitForCQ: 'messagebox #ok' },
function(next) {
t.waitForEvent(Ext.globalEvents, 'logoutComplete', function () {});
next();
},
{ click : '>> messagebox #ok' },
function() {
t.done();
}
);
});
The test inputs the username and password into the login panel, then clicks the login button. After the main view is loaded, it logs off.
For some reason, this test never finishes.
Every action in the chain is successful, but the test is still stuck running.
How can I fix this?
I am using siesta-3.0.2-lite with ExtJS 5.1.0.

1# First you can try to remove t.done() , it's not generally needed in the tests, unless you are really waiting for it. needDone in the harness settings has default value False.
2# You are using waitForEvent, this is usually done when you pass the callback there. So your function would look like this:
function(next) {
t.waitForEvent(Ext.globalEvents, 'logoutComplete', next);
},
But if you just want to know that the event was fired, you can use function firesOnce . Don't forget that you need to register checking the event before executing the actions which triggers it.
So your code could look like this:
function(next) {
t.firesOnce(Ext.globalEvents, 'logoutComplete','Logout completed!');
next();
},
{ click: '>> #logoutButton' },
{ waitForCQ: 'messagebox #ok' },
{ click : '>> messagebox #ok' },
But I have never used Ext.globalEvents to check the events, so I am not sure if it works.

Siesta developers on the forum suggested to solve this by setting overrideSetTimeout to false in your harness config.
Harness.configure({
...
overrideSetTimeout: false,
...
});
Siesta overrides the native "setTimeout" from the context of each test for asynchronous code tracking, but it seems to cause issues.
It worked for many users on the forum, tell me if it works for you, because it did not solve my issues.
Update:
The problem on my side turned out to be due to the logout itself, which uses window.location.reload(). This makes the browser act if there are two separate pages/applications.
Apparently, you need to set separateContext option in harness object to true. This option is available only in Standard (Commercial) package.

ExtJS: Store loads without parameters

I'm upgrading to ExtJS 5 and can't solve this issue. I've got a function that manages everything after the login and loads store after login with the new parameters from login.
...
Ext.create('MyApp.store.MainStore').load({
params: {
auth: sessionStorage.authSessionId,
hostname: sessionStorage.hostname
},
callback: function(records, operation, success) {
//some callback
}
})
...
However this loads the store, but without parameters, which causes an error on server side.
My store definition:
Ext.define('MyApp.store.MainStore', {
extend: 'Ext.data.TreeStore',
storeId: 'MainStore',
autoSync: false,
autoLoad: false,
proxy : {
type : 'ajax',
url : '/menu',
reader: {
type: 'json',
rootProperty: 'children',
},
listeners : {
exception : function(proxy, response, operation) {
//exception handling
}
}
},
fields: ['labelText','dbName','corpName','isLeaf', 'page']
});
Any suggestions?
Thanks for any help.

Try declaring a root node on your store definition.
Ext.define('MyApp.store.MainStore', {
extend: 'Ext.data.TreeStore',
storeId: 'MainStore',
autoSync: false,
autoLoad: false,
proxy : {
type : 'ajax',
url : '/menu',
reader: {
type: 'json',
rootProperty: 'children',
},
listeners : {
exception : function(proxy, response, operation) {
//exception handling
}
}
},
fields: ['labelText','dbName','corpName','isLeaf', 'page'],
root: {}
});

It's a bug. If you call load on an empty TreeStore, it will load just fine, but it won't pay attention to any options you passed in, such as the parameters.
Setting a root node first allows the load to work - but then, as you've seen, you can't use it in a TreePanel (and why else would you have a TreeStore). Kind of silly, huh?
I reported this to Sencha - http://www.sencha.com/forum/showthread.php?288818-5.0.0.970-TreeStore.load()-doesn-t-call-callback-if-there-is-no-root-node.
As for workarounds:
you can provide the parameters by using the params configuration on the proxy. Annoying, but it does work. (Actually, extraParams might be the better choice, as it allows you to preserve the authentication token and change the main parameters if and when you use reload).
you can get the callback by using event handling.
BTW, because you're using autoLoad: false, you'll need to load the store at some point. Do that before you add it to the TreePanel - the only way to get a root node that works with the TreePanel seems to be to get the TreePanel to make it for you.

View & store loaded before controller's init

I am building Sencha touch 2.1 application.
In my application I have one global variable which keeps reference of my controller class. This reference is used to execute a controller function on load of one of the store but the problem comes when I deploy this on slow remote server and store's load is fired before this global variable gets reference of controller object. To provide this reference before store's load I tried putting initialization logic in controllers init method
init : function(){
bossController = this.getApplication().getController('Boss');
},
in init method of controller but view & store are loaded before this init is called and hence I get this error:
Cannot call method 'loadMagazines' of undefined
This is my on load listener in store:
listeners:{
load: function( me, records, successful, operation, eOpts ){
bossController.loadMagazines(this, records);
}
}
I tried initializing this variable in app.js launch() method instead of controller's init method but that also didn't work.
Please note both approaches works fine when I put my code in local apache and access it using my chrome browser but they doesn't work when I put it on slow remote server.
EDIT
This is how application flow happens
0. All the models, views, stores & controllers are defined in app.js
Launch function in app.js add main view to the viewport.
Main view creates magazine view and add it to itself.
In initialize method of magazine view, store is crated and loaded.
In load listener of store, controller is used.
This is my view:
Ext.define('myshop.view.MagazinePanel', {
extend : 'Ext.Panel',
requires : [
'myshop.model.MagazinePage',
'myshop.store.MagazineStore',
'Ext.XTemplate',
'Ext.data.Store'
],
alias : 'widget.magazinepanelview',
xtype : 'magazinepanelview',
config : {
layout : 'hbox',
id : 'hc',
scrollable: 'horizontal',
directionLock : true,
masked: {
xtype: 'loadmask',
message: 'Loading'
},
inline: {
wrap: false
},
items : [{
xtype : 'panel',
html : ''
}]
},
initialize: function() {
var me = this;
var myStore = Ext.create('myshop.store.MagazineStore');
myStore.load({
callback: function(records, operation, success) {
me.setMasked(false);
},
scope: this
});
this.callParent();
}
});
and this is the store:
Ext.define('myshop.store.MagazineStore',{
extend:'Ext.data.Store',
requires: [
'myshop.model.MagazinePage',
'Ext.data.proxy.JsonP'
],
config:{
storeId : 'ms',
model:'myshop.model.MagazinePage',
autoLoad :false,
pageSize: 30,
proxy : {
type: 'jsonp',
url: Properties.PORTAL_SERVICE_BASE_URL+'test/categories/list',
callbackKey: 'callback',
startParam: false, //to remove param "start" and making it constant
extraParams: {
start : 0,
_type : 'json'
},
reader: {
type: 'json',
rootProperty: 'categories.data',
totalProperty: 'categories.status.totalCount'
}
},
listeners:{
load: function( me, records, successful, operation, eOpts ){
bossController.loadMagazines(this, records);
}
}
}
});

There are some parts missing in your example code so just a hint/guess. I guess your store has autoLoad property to true and get's therefore loaded as soon as it gets initialized. Turn it of and try something like this.
init : function(){
bossController = this.getApplication().getController('Boss'); // bossController where is this var defined?
// fire a ready event
// or
Ext.StoreMgr.lookup('YourStoreName').load();
}
Or provide more information about the store, who loads it, when it is loaded and in which scope.

Loading data should do controller but not view.
Ext.define("myshop.controller.Boss", {
extend: 'Ext.app.Controller',
config: {
refs: {
magazinePanel: '#hc'
},
control: {
magazinePanel: {
initialize: 'initializeMagazinePanel'
}
}
},
initializeMagazinePanel: function() {
var me = this;
var myStore = Ext.create('myshop.store.MagazineStore', {
listeners:{
scope: this,
load: this.onMagazineStoreLoad
}
});
myStore.load();
},
onMagazineStoreLoad: function(me, records, successful, operation, eOpts) {
this.getMagazinePanel().setMasked(false);
this.loadMagazines(records)
},
loadMagazines: function(records) {
}
});

Couldn't you put your loadMagazines function in the success callback of an explicit load() function in your controller, and disable autoLoad as #sra suggests?
Something like:
//in controller
init: function() {
myStore.load({
callback: function(recs, op, success) {
// do the load magazines thing
}
})
}

I am curious if what I suggested here: getController() doesn't load file and doesn't fire init and lauch helps with this too. You can remove the view and store from app.js and put it in the controller itself. I think that should make the view and store be defined only after the controller is defined.