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

24 Feb 2012, 7:28 AM
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 });

// // 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) {
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 ?

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

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

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

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
any thoughts what might be the reason ? It looks like a bug to me

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.

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 ?
I followed You advice and I used sth like that

{ url: '@Url.Action("TempView", "Home")' });

but unfortunatelly error still occurs

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

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

onSuccess: function() {

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