PDA

View Full Version : Items of panel won't update visually when invoking json function



ikteivi
4 Jul 2011, 7:04 AM
Hello.
I have a panel that should update it's children when im invoking a json function. I see that the json function is invoked, but the item's of the panel is not updated. can anyone see what's wrong?
I also wonder why i can't invoke "ToolbarDemo.views.homecard.doLayout()", i just get this errormessage:
Uncaught TypeError: Object function (){ superclass.apply(this, arguments); } has no method 'doLayout
Here's the code:

Panel

ToolbarDemo.views.homecard = Ext.extend(Ext.Panel,
{
title: "Menu",
iconCls: "home",
scroll: "vertical",
bodyStyle: "background-color: #FFFFFF !important; background-image: url(images/background.png) !important; background-repeat:no-repeat; background-position:bottom left;",
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar"
}],
defaults: {height: "110px"},
items: [
componentArray
]
});

ToolbarDemo.views.homecard.superclass.initComponent.apply(this, arguments);
}
});

Static buttons

var infoButton = new Ext.Component(
{
title: "infoButton",
html: [
'<div class="home_button_container">',
'<img class="home_button" src="images/info.png" />',
'<p class="home_button_text">Info</p>',
'</div>'
],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
ToolbarDemo.views.viewport.setActiveItem(2);}
}
}
});

var frontButton = new Ext.Component(
{
title: "frontButton",
html: [
'<div class="home_button_container">',
'<img class="home_button" src="images/front.png" />',
'<p class="home_button_text">Front</p>',
'</div>'
],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
ToolbarDemo.views.viewport.setActiveItem(1);}
}
}
});

var cantineButton = new Ext.Component(
{
title: "cantinaButton",
html: [
'<div class="home_button_container">',
'<img class="home_button" src="images/cantine.png" />',
'<p class="home_button_text">Cantine</p>',
'</div>'
],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
ToolbarDemo.views.viewport.setActiveItem(4);}
}
}
});

var userButton = new Ext.Component(
{
title: "userButton",
html: [
'<div class="home_button_container">',
'<img class="home_button" src="images/user.png" />',
'<p class="home_button_text">User</p>',
'</div>'
],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
ToolbarDemo.views.viewport.setActiveItem(3);}
}
}
});

});

Json request function

makeJSONPRequest = function() {
console.log('start jsonp code');

componentArray = [];
componentArray.push(frontButton);
componentArray.push(userButton);
componentArray.push(infoButton);

Ext.util.JSONP.request({
url: 'http://localhost/project/',
params: {
username:sUsername,
password:sPassword
},
callbackKey: "callback",
callback: function(data)
{
if (data && !data.errors)
{
console.log(data.errors);

var other= data.other;
for(var i=0; i<other.length; i++) {
console.log(i + ': ' + other[i]);

var otherButton_ = new Ext.Component(
{
title: "otherButton",
html: [
'<div class="home_button_container">',
' <img class="home_button" src="' + other[i]['url_icon_large'] + '" />',
' <p class="home_button_text">' + other[i]['name'] + '</p>',
'</div>',
],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
ToolbarDemo.views.viewport.setActiveItem(4);}
}
}
});
componentArray.push(otherButton_);
}

} else
{
if("missing_username_pwd" == data.errors)
{

}
else if("wrong_username_pwd" == data.errors)
{

}
console.log('Errors: ' + data.errors);
}
}
});

console.log('end jsonp code');
};

Rest of the js-file:

var componentArray = new Array(fronterButton, userButton, infoButton);
Ext.reg('homecard', ToolbarDemo.views.homecard);
makeJSONPRequest();