View Full Version : Reload / renew some panels after login

18 Feb 2010, 2:45 AM

I have a problem which I can't figure out.
First of all, let me explain the setup of the application.

If you go the application, by default you are not logged in (logical :D).
On the first page of the application, I have a standard login form with a username and password.
If you submit the form, we execute a function which goes through an Ajax call. This returns a Json result like "OK" or "ERROR".
So far so good, this all works.
If the result is "OK", I do a window.location.href = "index.php"
The page reloads and the panels are renewed with the content which is visible for a logged in user.

But this is not a nice solution I think. If the result is "OK" I want to reload / renew some specific panels, not the whole page.

In the panels there is some basic PHP code logic.
If you are not logged in the panel just shows some text using the "html: 'blabla'" property.
If you are logged in the panel has a menubar. So like this : "items: { menubar }".

Here is the code which will make it easier to understand:

Panel with some PHP logic:

var AgendaLayout = new Ext.Panel({
renderTo: "agenda",
id: "AgendaLayout",
name: "AgendaLayoutExt",
width: 800,
height: 570,
title: "<span style='font-size:14px;line-height:20px'>Agenda</span>",
layout: "border",
items: [{
id: "TopBarPanel",
name: "TopBarPanel",
region: "north",
margins: "5",
height: 40,
if($_SESSION['loggedin'] == "1") {
unstyled: true,
items: [ Menu ]
<?php } else { ?>
unstyled: false,
html: "Welkom <i>gast</i>. Gelieve u aan te melden of te registreren."
<?php } ?>
Ajax code

waitMsg: "Gelieve even te wachten...",
url: "/login",
params: {
par1: par1,
par2: par2
success: function(response) {

var result = eval(response.responseText);

switch(result) {
case "OK":

// Here should be some ext js code logic to reload / refresh / rerender the panel with the php logic so it loads the menubar item.

window.location.href = "";

case "ERROR":
Ext.MessageBox.alert("Fout bij inloggen", "Error.");

Thanks in advance for your help!


18 Feb 2010, 2:45 PM
If I understand you correctly: You want the server-side to update the items in your Panel and thats why you want to reload the panels?

Why not just have logic defined client-side to replace the contents of the panel when the login is successful? Wouldn't that be easier to implement? It would also save you the need for an extra request even after the login is already successful and gives you the possibility to limit your server-side-logic to providing/receiving data.

18 Feb 2010, 3:27 PM
This is not an aswer but an opinion

On my applications, the login is a plain php code. When the login is correct then i use the location.href stuff too

Why plain code ? Because people don't need to load the ExtJs core/styles/etc.. if they haven't a valid user/pass, i mean, this is for save bandwidth

Just check the Facebook/Hotmail/Yahoo logins. All uses some kind of location.href

If you still need your way, then you maybe want to create a viewport and load tabs with Ajax (http://www.extjs.com/deploy/dev/examples/tabs/tabs.html)

Don't know if a normall Ajax call can do the same as tabs.. i mean "autoLoad: { url: url, scripts: true"

19 Feb 2010, 12:28 AM
True. I argued this only because of it's simplicity and the fact that he's loading and using Ext already client-side. But I should have included a possible answer to.

An Ajax call can be used to load any panel like Sunco says. It can als be reload/refreshed; See Panel.getUpdater(). An other solution I've seen is to return an array of items through Ajax and insert those into a panel in the succeshandler.

8 Mar 2010, 6:40 AM
Yes, I reworked the application a bit.
Now I do render the panels and after the login for example I render and show some other panels.