PDA

View Full Version : ServerProxy error when using Tree Panel



simonr26
12 Jan 2013, 6:46 AM
The application below allows user to login, click 'Search' on the Home menu
which invokes the 'main' page containing a tree panel.
This works correctly when first entering page - however if user leaves main page,
e.g. selects Home and then tries to reenter main page, the following error is
shown and the main page is not entered:

Ext.Error: You are using a ServerProxy but have not supplied it with a url.

On following retries the following is shown:
TypeError: nodes is null @ ext-debug.js:1243

Am using Ext JS 4 MVC architecture
version of extjs: 4.1
have not included controllers.

Please could you help me resolve this?



Treenode.js (model)
Ext.define('App.model.Treenode', {
extend: 'Ext.data.Model',
fields: [ 'treenodeId', 'text' ],
});

Treenodes.js (store)
Ext.define('App.store.Treenodes', {
extend: 'Ext.data.TreeStore',
model: 'App.model.Treenode',
autoLoad:false,
proxy: {
type: 'ajax',
url: 'navview.action',
reader: {
type: 'json',
root: 'children'
}
}
});

Viewport.js (view)
Ext.define('App.view.Viewport', {
extend:'Ext.container.Viewport',
requires:[
'App.view.Home',
'App.view.Header',
'App.view.Navigation'
],
layout:'card',
id:'viewport',
activeItem:0,
items:[
{
id:'card-0',
},
{
id:'card-1',
xtype:'panel',
layout:'border',
items:[
{
xtype: 'view.Home',
region:'center'
}
]
},
{
id:'card-2',
xtype:'panel',
layout:'border',
items:[
{
xtype:'view.Header',
region:'north',
height:85
},
{
xtype:'Navigation',
region:'west',
width:200
},
{
html: '',
region:'center'
}
]
}
]
});

Navigation.js (view)
Ext.define('App.view.Navigation', {
extend:'Ext.tree.Panel',
alias:'widget.Navigation',
id: 'navigation',
store: 'Treenodes'
});

Login.js (view)
Ext.define('App.view.Login', {
extend:'Ext.window.Window',
alias:'widget.view.Login',
id:'loginwindow',
width:420,
height:350,
modal:true,
layout:'border',
title:'Login',
initComponent:function () {
Ext.apply(this, {
items:[
{
xtype:'form',
height: 150,
id:'loginform',
bodyPadding:10,
header:false,
region:'center',
border:false,
waitMsgTarget:true,
layout:{
type:'vbox'
},
defaults:{
labelWidth:85
},
items:[
{
itemId:'userName',
xtype:'textfield',
fieldLabel:'Username',
name:'username',
allowBlank:false,
anchor:'100%',
validateOnBlur:false,
style: {
'margin-top': '20px'
}
},
{
xtype:'textfield',
fieldLabel:'Password',
name:'password',
allowBlank:true,
inputType:'password',
anchor:'100%',
validateOnBlur:false,
enableKeyEvents:true,
style: {
'margin-top': '5px'
}
},
]
}
],
buttons:[
{
id:'loginButton',
type:"submit",
action:"login",
formBind:true,
text:'Login',
scale:'medium',
width:90
}
]
});
this.callParent(arguments);
},
defaultFocus:'userName'
});

Home.js (view)
Ext.define('App.view.Home' ,{
extend: 'Ext.container.Container',
requires: ['Ext.window.MessageBox'],
alias : 'widget.view.Home',
id: 'homelist',
title : 'Home',
layout:{
type:'hbox',
padding:"100"
},
width:500,
height:400,
initComponent: function() {
Ext.apply(this, {
items:[
{
itemId:'home',
xtype:'button',
action:"search",
text:'Search',
region:'center',
height:60,
width:100,
style: 'margin:100px'
}]
});
this.callParent(arguments);
}
});

Header.js (view)
Ext.define('App.view.Header', {
extend:'Ext.panel.Panel',
alias:'widget.view.Header',
layout:'column',
id:'header',
height: 85,
items:[{
xtype:'container',
columnWidth:.20,
items:[

{
id:'homeButton',
xtype:'button',
iconAlign:'right',
text:'Home',
margin:'5 0 0 0',
action:'home',
width: 100
}
],
border:'none'
}
]
});


Login.js (controller)
var loginWin = Ext.create('App.view.Login');
Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',
init:function () {
this.control({
'viewport':{
render:this.index
},
'button[action=login]':{
click:this.login
},
'button[action=home]':{
click:this.home
}
});
},
views:[
'Login', 'Viewport'
],
refs:[
{
ref:'viewport',
selector:'viewport'
},
{
ref:'loginwindow',
selector:'loginwindow'
},
{
ref:'loginform',
selector:'loginform'
}
],
index:function () {
loginWin.show();
},
login:function () {
var loginwin = Ext.getCmp('loginwindow');
var loginform = Ext.getCmp('loginform');
var loginvalues = loginform.getValues();
var lay = this.getViewport().getLayout();
loginform.getForm().submit({
method:'POST',
url:'login_check.action',
scope: this,
success:function(loginform,action){
var lay = this.getViewport().getLayout();
lay.setActiveItem(1);
loginwin.hide();
},
failure:function(loginform, action){
loginform.reset();
}
});
},
home:function (button) {
console.log('Home button');
var lay = this.getViewport().getLayout();
lay.setActiveItem(1);
}
});

Navs.js (controller)
Ext.define('App.controller.Navs', {
extend: 'Ext.app.Controller',
init:function () {
this.control({
'Navigation':{
itemclick: function(view, record, item, index, evt, options) {
}
}
});
},
stores: ['Treenodes'],
models: ['Treenode'],
views:[
'Navigation'
],
refs:[{
ref:'navigation',
selector:'navigation'
},
{
ref:'Navigation',
selector:'navigation'
}]
});

Home.js (controller)
Ext.define('App.controller.Home', {
extend: 'Ext.app.Controller',
init:function () {
this.control({
'button[action=search]':{
click:this.search
}
});
},
views:[
'Home'
],
refs:[
{
ref:'homelist',
selector:'homelist'
}
],
search:function () {
var lay = Ext.getCmp('viewport').getLayout();
var st = Ext.getCmp('navigation').getStore();
st.removeAll();
st.load();
lay.setActiveItem(2);
}
});

mitchellsimoens
14 Jan 2013, 2:02 PM
Is the treenode store getting destroyed after the first closing of the view?

cmeans
11 Apr 2013, 10:21 AM
Hi Mitchell,

I'm experiencing a similar problem with v4.1.3.

I'm calling removeAll on my TreeStore, which has nodes on it that were populated via store.setRootNode passing in a JSON object.

The removeAll call works fine if I've not added any data to the tree programmatically, and works fine if I've set the "root" property on the store, but gives the error mentioned above if there are nodes that were added programmatically.

I'm just trying to clear out the tree, prior to some processing, which would then repopulate the tree...and I'd rather not have a bogus root node sitting there (which is a fallback/workaround).

I've gone through the ExtJS source a bit, and the call stack seems to indicate an issue with the "phantom" flag setting...which I think means it's thinking there's remote data that needs to be delt with.

I did add the "id" property to all nodes in hopes that would fix it, but it made no diff.

Thanks.

-Chris