HTML Links not working after Ext.Panel.update(...)

[malagant]

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]

Not sure if this will do the trick, but try to use .doLayout() instead

[malagant]

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]

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]

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>