PDA

View Full Version : Problem with dynamic loading of Panel's content



nocturn
24 Feb 2012, 7:28 AM
Hi
I have a view which is divided into two parts. In the left part I placed TreePanel and in right part is Panel. I would like to load content of a panel if user click on tree node. Code responsible for rendering a view looks like that


var loadTreeMask, loadContentMask;
Ext.Loader.setConfig({ enabled: true });
Ext.QuickTips.init();


// // NOTE: This is an example showing simple state management. During development,
// // it is generally best to disable state management as dynamically-generated ids
// // can change across page loads, leading to unpredictable results. The developer
// // should ensure that stable state ids are set for stateful components in real apps.
// Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));






var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: '@Url.Action("GetTreeData", "TreeMenu")'
}


});


var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
// create instance immediately
Ext.create('Ext.Component', {
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html: '<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion'


},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
Ext.create('Ext.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
html: 'asasfdasdfasdfasdf',
id: 'contentPanel'


}),
Ext.create('Ext.tree.Panel', {
id: 'treePanel',
store: store,
rootVisible: false,
useArrows: true,
frame: true,
title: 'Check Tree',
region: 'west',
width: 200,
height: 250
})
]
});

Binding to click event and loading content of the panel looks that way


Ext.get('treePanel').on('click', function (n) {
debugger;
Ext.get('contentPanel').load({
url: '@Url.Action("TempView", "Home")'
});
}
);

The problem is that, couple of seconds after the panel is loaded I get an exception in file ext-all.js

Microsoft JScript runtime error:Unable to get value of the property 'events': object is null or undefined. What could be reason of the problem ?

mitchellsimoens
24 Feb 2012, 12:29 PM
Is a request being sent? What url are you using?

nocturn
24 Feb 2012, 3:33 PM
Yes, the request is send and I recive it in my controller action. The content of a panel is loaded but after couple of seconds (after content was loaded) the exception mentioned before is raised. Url looks like that /Home/TempView

mitchellsimoens
25 Feb 2012, 7:49 AM
Have you looked at the network tab to visually see what is going on with the request?

nocturn
25 Feb 2012, 3:35 PM
The request is OK. I get a response and the panel's content is reloaded. I exchanged file ext-all.js to ext-all-debug.js thanks to that it is a bit easier to check what is really going on. Basically there is a problem with function

getElementEventCache which is defined in line 11108 in file ext-all-debug.js. This function looks like that

getElementEventCache : function(element) {
if (!element) {
return {};
}
var elementCache = Ext.cache[this.getId(element)];
return elementCache.events || (elementCache.events = {});
},

and the last line throws an exception because elementCache is undefined. 32140
Here is a stackTrace
32141
any thoughts what might be the reason ? It looks like a bug to me

mankz
26 Feb 2012, 9:23 PM
You should use Ext.getCmp not Ext.get if you want to load content into the panel. Right now you are overwriting the entire panel el which is wrong.

nocturn
27 Feb 2012, 3:37 AM
Ok, thanks for the tip. However if I get component using Ext.getCmp('panelId') , the function load is undefined. What should I use instead ?
Edit
I followed You advice and I used sth like that


Ext.get('contentPanel').body.load(
{ url: '@Url.Action("TempView", "Home")' });

but unfortunatelly error still occurs

sskow200
27 Feb 2012, 7:49 AM
Ext.define('MyComponent', {
id: 'myComponent',

initComponent: function() {
Ext.apply(this, {
loader: {
url: '/get/all/',
method: 'GET',
success: this.onSuccess
}
});
this.callParent(arguments);
},

load: function(url) {
if(url) {
this.loader.url = url;
}
this.loader.load()
},

onSuccess: function() {
console.log('Success!');
}
});


Once you're component is created you would do...



Ext.getCmp('myComponent').load('/some/other/url');



???