PDA

View Full Version : HTML Links not working after Ext.Panel.update(...)



malagant
24 Jun 2010, 3:23 AM
Hi,

I created a mobile version of my website with sencha touch and I love it, but I ran into a problem:

After loading HTML via Ajax from a server and calling update on my Ext.Panel it gets showed as expected but links are not working.
What am I doing wrong?

Cheers
Michael Johann

Iumentum
24 Jun 2010, 3:50 AM
Not sure if this will do the trick, but try to use .doLayout() instead

malagant
24 Jun 2010, 3:59 AM
I tried this, but without success:



onNavigate : function(ui, item) {
if (item.url) {
Ext.Ajax.request({
url: item.url,
method: 'GET',
format: 'html',
success: function(response, opts) {
var element = document.createElement("bla");
element.innerHTML = response.responseText;
appl.Main.ui.update(new Ext.Element(element).first().getHTML());
appl.Main.ui.doLayout();
}
});
}
ui.navigationBar.doComponentLayout();
},

TommyMaintz
24 Jun 2010, 11:06 AM
Can you tell us what type of component your appl.Main.ui is? Also try just calling appl.Main.ui.update(response.responseText). This will probably not solve your issue but it is the preferred way of loading content into a component.

If you could provide a link to your app or zip file with your source code we might be able to help you better.

malagant
24 Jun 2010, 11:33 AM
Hi Tommy,

thank you for your reply. Here is the code for the example. Maybe you have an idea.
I did change my code according to your suggestion, but with the same effect.



<script type="text/javascript">
Ext.ns('appl', 'Ext.ux');

Ext.ux.UniversalUI = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
scroll: 'vertical',
items: [
{
cls: 'card'
}
],
initComponent : function() {

this.backButton = new Ext.Button({
hidden: true,
text: 'Zurück',
ui: 'back',
handler: this.onBackButtonTap,
scope: this
});

this.navigationButton = new Ext.Button({
hidden: Ext.platform.isPhone || Ext.orientation == 'landscape',
text: 'Navigation',
handler: this.onNavButtonTap,
scope: this
});

this.navigationBar = new Ext.Toolbar({
ui: 'dark',
dock: 'top',
title: this.title,
items: [this.backButton, this.navigationButton].concat(this.buttons || [])
});

this.navigationPanel = new Ext.NestedList({
items: this.navigationItems || [],
dock: 'left',
width: 250,
height: 456,
hidden: !Ext.platform.isPhone && Ext.orientation == 'portrait',
toolbar: Ext.platform.isPhone ? this.navigationBar : null,
listeners: {
listchange: this.onListChange,
scope: this
}
});

this.dockedItems = this.dockedItems || [];
this.dockedItems.unshift(this.navigationBar);

if (!Ext.platform.isPhone && Ext.orientation == 'landscape') {
this.dockedItems.unshift(this.navigationPanel);
}
else if (Ext.platform.isPhone) {
this.items = this.items || [];
this.items.unshift(this.navigationPanel);
}

this.addEvents('navigate');

Ext.ux.UniversalUI.superclass.initComponent.call(this);
},

onListChange : function(list, item) {
if (Ext.orientation == 'portrait' && !Ext.platform.isPhone && !item.items && !item.preventHide) {
this.navigationPanel.hide();
}

if (item.card) {
this.setCard(item.card, item.animation || 'slide');
this.currentCard = item.card;
if (item.text) {
this.navigationBar.setTitle(item.text);
}
if (Ext.platform.isPhone) {
this.backButton.show();
this.navigationBar.doLayout();
}
}

this.fireEvent('navigate', this, item, list);
},

onNavButtonTap : function() {
this.navigationPanel.showBy(this.navigationButton, 'fade');
},

onBackButtonTap : function() {
this.setCard(this.navigationPanel, {type: 'slide', direction: 'right'});
this.currentCard = this.navigationPanel;
if (Ext.platform.isPhone) {
this.backButton.hide();
this.navigationBar.setTitle(this.title);
this.navigationBar.doLayout();
}
this.fireEvent('navigate', this, this.navigationPanel.activeItem, this.navigationPanel);
},

onOrientationChange : function(orientation, w, h) {
Ext.ux.UniversalUI.superclass.onOrientationChange.call(this, orientation, w, h);

if (!Ext.platform.isPhone) {
if (orientation == 'portrait') {
this.removeDocked(this.navigationPanel, false);
this.navigationPanel.hide();
this.navigationPanel.setFloating(true);
this.navigationButton.show();
}
else {
this.navigationPanel.setFloating(false);
this.navigationPanel.show();
this.navigationButton.hide();
this.insertDocked(0, this.navigationPanel);
}

this.doComponentLayout();
this.navigationBar.doComponentLayout();
}
}
});

appl.Main = {
init: function() {
this.logoutRequest = function() {
Ext.Ajax.request({
url: '/users/sign_out',
method: 'GET',
format: 'json',
success: this.onSuccess,
failure: this.onFailure,
scope: this,
extraParams: { authenticity_token: "" }
});

this.onSuccess = function(result, request) {
this.handleSessionButtons(true);
};

this.onFailure = function(result, response) {
this.handleSessionButtons(false);
};
};

this.logoutButton = new Ext.Button({
text: 'Abmelden',
ui: 'action',
handler: this.onLogoutButtonTap,
scope: this
});

this.loginButton = new Ext.Button({
text: 'Anmelden',
ui: 'action',
handler: this.onLoginButtonTap,
scope: this
});

this.registerButton = new Ext.Button({
text: 'Registrieren',
ui: 'action',
handler: this.onRegisterButtonTap,
scope: this
});

this.ui = new Ext.ux.UniversalUI({
navigationItems: appl.Structure,
title: "Willkommen bei rails-experts.com",
listeners: {
navigate: this.onNavigate,
scope: this
}
});
this.handleSessionButtons(false);

Ext.Ajax.request({
url: '<%= root_url %>',
method: 'GET',
format: 'html',
success: function(response, opts) {
appl.Main.ui.update(response.responseText);
}
});

},

handleSessionButtons: function(loggedIn) {
if (loggedIn) {
this.loginButton.disable();
this.registerButton.disable();
this.logoutButton.enable();
} else {
this.loginButton.enable();
this.registerButton.enable();
this.logoutButton.disable();
}

},

onNavigate : function(ui, item) {
if (item.url) {
Ext.Ajax.request({
url: item.url,
method: 'GET',
format: 'html',
success: function(response, opts) {
var element = document.createElement("bla");
element.innerHTML = response.responseText;
appl.Main.ui.update(new Ext.Element(element).first().getHTML());
}
});
}
ui.navigationBar.doComponentLayout();
},

onRegisterButtonTap: function() {
var form = appl.RegisterForm;
form.show();
},
onLoginButtonTap: function() {
this.form = appl.LoginForm;
this.form.show();
},
onLogoutButtonTap: function() {
this.logoutRequest.call(this);
this.handleSessionButtons(true);
}
};

Ext.setup({
onReady: function() {
appl.Main.init();
}
});
</script>