PDA

View Full Version : no treeview nodes after including basex



spaff
21 Dec 2010, 2:19 PM
After i added ext-basex.js the nodes of my treeview didn't appear any more.
I'm using async nodes, called by dataUrl.
The ajax request appears in firebug.

Can anyone help me, please?

hendricd
21 Dec 2010, 2:35 PM
Can you specify:

what Ext and basex versions you are using?
what your TreeLoader config looks like?
Is the request same-origin?

spaff
21 Dec 2010, 2:52 PM
ExtJS: 3.3.1
Ext-BaseX: 4 and 4.2 beta

Treeconfig:


category.tree = function() {
category.tree.superclass.constructor.call(this, {
id: 'categoryTree',
stateId: 'categoryTree',
region: 'west',
title: 'Kategorien',
split: true,
width: '20%',
rootVisible: false,
lines: false,
autoScroll: true,
collapseFirst: false,
useArrows: false,
animate: true,
containerScroll: true,
border: true,
loader: new Ext.tree.TreeLoader({dataUrl: urlLib.category.tree}),
//dataUrl: urlLib.category.tree,
root: {
nodeType: 'async',
text: 'Root node',
draggable: false,
id: 'src'
},

tbar: [{
id: 'addCategory',
iconCls: 'imgAdd',
text: 'neu',
disabled: true,
handler: function () {
var window = new Ext.Window({
items: new category.Form(this, {})
});

window.show();
},
scope: this
}]
});

this.getSelectionModel().on({
'beforeselect' : function(sm, node){
//return node.isLeaf();
},
'selectionchange' : function(sm, node){
if(node){
this.fireEvent('categoryselect', node.attributes);
}
this.getTopToolbar().items.get('addCategory').setDisabled(!node);

//console.log(node);
},
scope:this
});

this.addEvents({categoryselect:true});

this.on('contextmenu', this.onContextMenu, this);
};

Ext.extend(category.tree, Ext.tree.TreePanel, {

onContextMenu: function(node, e) {
if(!this.menu){ // create context menu on first right click
this.menu = new Ext.menu.Menu({
id:'category-ctx',
items: [{
id: 'editCategory',
iconCls: 'imgEdit',
text: 'bearbeiten',
handler: function () {
var window = new Ext.Window({
items: new category.Form(this, {})
});

window.show();
},
scope: this
},{
id: 'removeCategory',
iconCls: 'imgRemove',
text: 'löschen',
handler: function () {

},
scope: this
}]
});
this.menu.on('hide', this.onContextHide, this);
}

if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}

//if(node.isLeaf()){
this.ctxNode = node;
this.ctxNode.ui.addClass('x-node-ctx');
this.menu.showAt(e.getXY());
//}

this.menu.items.get('editCategory').setDisabled(node.attributes.isRoot);
this.menu.items.get('removeCategory').setDisabled(node.attributes.isRoot);
},
onContextHide : function(){
if(this.ctxNode){
this.ctxNode.ui.removeClass('x-node-ctx');
this.ctxNode = null;
}
},
selectCategory: function(url){
this.getNodeById(url).select();
},

// prevent the default context menu when you miss the node
afterRender : function(){
category.tree.superclass.afterRender.call(this);
this.el.on('contextmenu', function(e){
e.preventDefault();
});
}
});

Ext.reg('appcategorytree', category.tree);
Treecall:


var treePanel = new category.tree();

...

treePanel.on('categoryselect', function(category) {
//console.log(contens.getTopToolbar());

contens.getTopToolbar().items.get('addArticle').setDisabled(!category.hasArticles);
contens.getTopToolbar().items.get('addDiscussion').setDisabled(!category.hasDiscussions);
contens.getTopToolbar().items.get('addNote').setDisabled(!category.hasNotes);
contens.getTopToolbar().items.get('addTask').setDisabled(!category.hasTasks);

articlePanel.setVisible(category.hasArticles);
discussionPanel.setVisible(category.hasDiscussions);
notePanel.setVisible(category.hasNotes);
taskPanel.setVisible(category.hasTasks);

if(category.hasArticles)
articlePanel.loadArticles(category.id);

if(category.hasDiscussions)
discussionPanel.loadDiscussions(category.id);

if(category.hasNotes)
notePanel.loadNotes(category.id);

if(category.hasTasks)
taskPanel.loadTasks(category.id);

});

...

var viewport = new Ext.Panel({
layout: 'border',
renderTo: 'extMainLayout',
height: 500,
items: [
treePanel,
contens,
tabPanel
]
});
Response from Request (same with and without basex):


[{"id":"2","cls":"folder treeviewCategory","text":"test","isRoot":true,"hasArticles":true,"hasTasks":true,"hasDiscussions":true,"hasNotes":true,"leaf":false},{"id":"1","cls":"folder treeviewCategory","text":"Board","isRoot":true,"hasArticles":true,"hasTasks":true,"hasDiscussions":true,"hasNotes":true,"leaf":false}]


I just started using extjs, so my code might be not very nice.. sorry for that..

hendricd
21 Dec 2010, 3:07 PM
@spaff --

What browser does this occur on?

width : '20%' is not a valid config (h/w are numeric only)

Try adding (as you always should) a loadexception event to your treeLoader. It may yet yield some clues...

spaff
21 Dec 2010, 3:34 PM
I'm using Firefox 3.6.13, there are three cols (20%/40%/40%)... works great..

I added loadexception, there are no childNodes with activated basex, but i can't see why..

The reason why i wanted to use basex is the queue function for requests, because of the 4 grids which are loaded at the same time at this point. The grids use 4 different stores. Is there any way to queue these requests without the use of basex?

hendricd
21 Dec 2010, 4:14 PM
I'm using Firefox 3.6.13, there are three cols (20%/40%/40%)... works great..

I added loadexception, there are no childNodes with activated basex, but i can't see why..

The reason why i wanted to use basex is the queue function for requests, because of the 4 grids which are loaded at the same time at this point. The grids use 4 different stores. Is there any way to queue these requests without the use of basex?

In a word, no.

Try adding this early in your startup (with basex loaded):

Ext.lib.Ajax.queueAll =true;

I suspect your Treeloader is contending with all the Store.loads going on...

spaff
22 Dec 2010, 4:36 AM
Thank you for your help, i found the Problem:

I'm using Symfony as backend and in the development environment is a web debug toolbar. The source of the toolbar was delivered with the json string. After adding basex treepanel was not able to use this data.