1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    malagant is on a distinguished road

      0  

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

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


    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

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    2
    Vote Rating
    0
    Iumentum is on a distinguished road

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    malagant is on a distinguished road

      0  

    Default


    I tried this, but without success:

    Code:
       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();
            },

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    3
    Vote Rating
    0
    malagant is on a distinguished road

      0  

    Default


    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.

    Code:
    <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>

Similar Threads

  1. [2.??] Ext.Panel AutoScroll not working on initial HTML config object
    By foxwhisper in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Dec 2008, 8:26 AM
  2. Update panel (not html)
    By PSB in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 8 Jul 2008, 2:02 PM
  3. HTML with inline JavaScript method is not working with panel.items.html
    By starsavari in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 2 Nov 2007, 7:35 PM
  4. Tutorial: Introduction to Ext - translation links not working
    By efege in forum Community Discussion
    Replies: 6
    Last Post: 26 Apr 2007, 12:19 PM

Thread Participants: 2