fwiethof
11 Jun 2009, 2:44 AM
Hello,
I'm going crazy with this...
I have an accordion panel within a border layout. The accordion panel uses a Ext.Direct call (navigation.getPanels) to load panel config data from the server. Then it iterates through the data and makes TreePanels out of it, which are added to the accordion. The TreePanels use another Ext.Direct call (navigation.getTreeNodes) to display the tree.
Works perfect in Firefox. EDIT: No, it doesn't... If FIrebug is not running, it behaves the same way than in IE.
Does not work in IE 7/8. The tree panels aren't displayed. It looks like the Ext.Direct callback for navigation.getPanels is not called at all:
Here's an example (complete code below):
window.alert('before direct');
navigation.getPanels(function(panels, response) {
window.alert('direct callback');
The first alert is displayed, the second is not. However, I can see on the web server that the Ext.Direct call is done and was successfully executed by the server.
Now, it's getting even stranger: When I open the IE script debugger in the background (did not click on "start debugging" or set a breakpoint), everything is working as expected.
Any idea?!
btRia.Navigation = function(config) {
btRia.Navigation.superclass.constructor.call(this, Ext.apply({
id: 'navigation',
region: 'west',
layout: 'accordion',
layoutConfig: {
animate: true
},
collapsible: true,
split: true
}, config));
navigation.getPanels(function(panels, response) {
panels.each(function(panel) {
Ext.apply(panel, {
xtype: 'treepanel',
rootVisible: false,
lines: false,
useArrows: true,
autoScroll: true,
animate: true,
border: false,
root: new Ext.tree.AsyncTreeNode({
text: 'root',
id: panel.rootNode
}),
loader: new Ext.tree.TreeLoader({
directFn: navigation.getTreeNodes
}),
listeners: {
'click': this.onAction,
'dblclick': this.onAction
}
});
this.add(panel);
}, this);
this.doLayout();
}, this);
};
Ext.extend(btRia.Navigation, Ext.Panel, {
onAction: function(node, e) {
config = node.attributes.actionConfig;
switch (node.attributes.action) {
case 'openPanel':
Ext.getCmp('mainpanel').addTab(node.text, node.attributes.iconCls, config.className, config.allowMultiple && e.type == 'dblclick');
break;
case 'logout':
window.location = RiaApplication.logoutUrl;
break;
}
}
});
There is an application object creating the btRia.Navigation panel:
btRia.Application = function() {
return {
logoUrl: null,
mainPanelCloseTabText: null,
mainPanelCloseOtherTabsText: null,
navigationTitle: null,
navigationWidth: null,
navigationMinWidth: null,
navigationMaxWidth: null,
statusbarIdleText: null,
statusbarAppNameText: null,
statusbarEnvNameText: null,
logoutUrl: null,
init: function() {
Ext.Direct.addProvider(Ext.app.REMOTING_API);
var vp = new Ext.Viewport({
layout: 'border',
items: [
{
xtype: 'box',
region: 'north',
height: 32,
autoEl: {
tag: 'div',
id: 'application-header-div',
children: [{
tag: 'img',
src: this.logoUrl
}]
}
}, new btRia.Navigation({
title: this.navigationTitle,
width: this.navigationWidth,
minSize: this.NavigationMinWidth,
maxSize: this.NavigationMaxWidth
}), new Ext.StatusBar({
region: 'south',
defaultText: this.statusbarIdleText,
id: 'statusbar',
items: [
this.statusbarAppNameText,
'-',
this.statusbarEnvNameText
]
}), new btRia.MainPanel({})
]
});
}
};
}();
The Ext.Direct API specification:
Ext.app.REMOTING_API = {"url":"\/remoting.php","type":"remoting","actions":{"navigation":[{"name":"getPanels","len":0},{"name":"getTreeNodes","len":"1"}]}};
The HTML (not complete):
<body>
<script type="text/javascript">
//<![CDATA[
RiaApplication = btRia.Application;
Ext.apply(btRia.Application, {
logoUrl: '/ArgusSharedPlugin/logos/argus-app-header.png',
mainPanelCloseTabText: 'Tab schliessen',
mainPanelCloseOtherTabsText: 'Andere Tabs schliessen',
navigationTitle: 'Navigation',
navigationWidth: 200,
navigationMinWidth: 175,
navigationMaxWidth: 400,
statusbarIdleText: 'Bereit',
statusbarAppNameText: 'noname',
statusbarEnvNameText: 'Entwicklung',
logoutUrl: '/frontend_dev.php/logout'
});
Ext.onReady(btRia.Application.init, btRia.Application);
//]]>
</script>
I'm going crazy with this...
I have an accordion panel within a border layout. The accordion panel uses a Ext.Direct call (navigation.getPanels) to load panel config data from the server. Then it iterates through the data and makes TreePanels out of it, which are added to the accordion. The TreePanels use another Ext.Direct call (navigation.getTreeNodes) to display the tree.
Works perfect in Firefox. EDIT: No, it doesn't... If FIrebug is not running, it behaves the same way than in IE.
Does not work in IE 7/8. The tree panels aren't displayed. It looks like the Ext.Direct callback for navigation.getPanels is not called at all:
Here's an example (complete code below):
window.alert('before direct');
navigation.getPanels(function(panels, response) {
window.alert('direct callback');
The first alert is displayed, the second is not. However, I can see on the web server that the Ext.Direct call is done and was successfully executed by the server.
Now, it's getting even stranger: When I open the IE script debugger in the background (did not click on "start debugging" or set a breakpoint), everything is working as expected.
Any idea?!
btRia.Navigation = function(config) {
btRia.Navigation.superclass.constructor.call(this, Ext.apply({
id: 'navigation',
region: 'west',
layout: 'accordion',
layoutConfig: {
animate: true
},
collapsible: true,
split: true
}, config));
navigation.getPanels(function(panels, response) {
panels.each(function(panel) {
Ext.apply(panel, {
xtype: 'treepanel',
rootVisible: false,
lines: false,
useArrows: true,
autoScroll: true,
animate: true,
border: false,
root: new Ext.tree.AsyncTreeNode({
text: 'root',
id: panel.rootNode
}),
loader: new Ext.tree.TreeLoader({
directFn: navigation.getTreeNodes
}),
listeners: {
'click': this.onAction,
'dblclick': this.onAction
}
});
this.add(panel);
}, this);
this.doLayout();
}, this);
};
Ext.extend(btRia.Navigation, Ext.Panel, {
onAction: function(node, e) {
config = node.attributes.actionConfig;
switch (node.attributes.action) {
case 'openPanel':
Ext.getCmp('mainpanel').addTab(node.text, node.attributes.iconCls, config.className, config.allowMultiple && e.type == 'dblclick');
break;
case 'logout':
window.location = RiaApplication.logoutUrl;
break;
}
}
});
There is an application object creating the btRia.Navigation panel:
btRia.Application = function() {
return {
logoUrl: null,
mainPanelCloseTabText: null,
mainPanelCloseOtherTabsText: null,
navigationTitle: null,
navigationWidth: null,
navigationMinWidth: null,
navigationMaxWidth: null,
statusbarIdleText: null,
statusbarAppNameText: null,
statusbarEnvNameText: null,
logoutUrl: null,
init: function() {
Ext.Direct.addProvider(Ext.app.REMOTING_API);
var vp = new Ext.Viewport({
layout: 'border',
items: [
{
xtype: 'box',
region: 'north',
height: 32,
autoEl: {
tag: 'div',
id: 'application-header-div',
children: [{
tag: 'img',
src: this.logoUrl
}]
}
}, new btRia.Navigation({
title: this.navigationTitle,
width: this.navigationWidth,
minSize: this.NavigationMinWidth,
maxSize: this.NavigationMaxWidth
}), new Ext.StatusBar({
region: 'south',
defaultText: this.statusbarIdleText,
id: 'statusbar',
items: [
this.statusbarAppNameText,
'-',
this.statusbarEnvNameText
]
}), new btRia.MainPanel({})
]
});
}
};
}();
The Ext.Direct API specification:
Ext.app.REMOTING_API = {"url":"\/remoting.php","type":"remoting","actions":{"navigation":[{"name":"getPanels","len":0},{"name":"getTreeNodes","len":"1"}]}};
The HTML (not complete):
<body>
<script type="text/javascript">
//<![CDATA[
RiaApplication = btRia.Application;
Ext.apply(btRia.Application, {
logoUrl: '/ArgusSharedPlugin/logos/argus-app-header.png',
mainPanelCloseTabText: 'Tab schliessen',
mainPanelCloseOtherTabsText: 'Andere Tabs schliessen',
navigationTitle: 'Navigation',
navigationWidth: 200,
navigationMinWidth: 175,
navigationMaxWidth: 400,
statusbarIdleText: 'Bereit',
statusbarAppNameText: 'noname',
statusbarEnvNameText: 'Entwicklung',
logoutUrl: '/frontend_dev.php/logout'
});
Ext.onReady(btRia.Application.init, btRia.Application);
//]]>
</script>