1. #1
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default Answered: How to access inner html of a card

    Answered: How to access inner html of a card


    I want to update a card using ajax - I pulled the kitchensink example but it turns out it doesn't work in card layout because the content seen on screen is not the actual item as defined in the items: sectionof my view - I guess the card layout duplicates content. So technically the ajax works but it doesn't update the visible card part. Is there a way to sync the visible with hidden part of a card? I hope this makes sense.

  2. Use the magical getter for it:

    Code:
    var panel = Ext.create('Ext.Panel', {
        fullscreen : true,
        layout     : 'card',
        items      : [
            {
                xtype : 'container',
                html  : 'Hello'
            }
        ]
    });
    
    var html = panel.down('container').getHtml();
    getHtml method is automatically created because we passed in the html config on our container.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    Answers
    3563
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Use the magical getter for it:

    Code:
    var panel = Ext.create('Ext.Panel', {
        fullscreen : true,
        layout     : 'card',
        items      : [
            {
                xtype : 'container',
                html  : 'Hello'
            }
        ]
    });
    
    var html = panel.down('container').getHtml();
    getHtml method is automatically created because we passed in the html config on our container.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    How would that access this div with no ID? I don't understand why that would be different than what I have. This is one subview in a card layout.

    Code:
    Ext.define('App.view.About', {
        extend: 'Ext.Container',
        xtype: 'about',
        initialize: function() {
            this.on({
                scope: this,
                painted: 'onPainted',
            });
        },
        onPainted: function() {
            var panel = Ext.getCmp('ajax');
            panel.update('new text');
        },
        config: {
            layout: 'vbox',
            scrollable: true,
            items: [{
                docked: 'top',
                xtype : 'toolbar',
                items: [{
                    text: 'Back',
                    back: 'hello',
                    ui: 'back',
                }]
            },
            {
                xtype: 'panel',
                id: 'ajax',
                styleHtmlContent: true,
                html: 'this should be replaced but it's not'
            }
        ]}
    });

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    Answers
    3563
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The component has a reference to where it places the html content so it grabs from that div.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    But I guess it works Thanks.

    I replaced var panel = Ext.getCmp('ajax'); with var panel = this.down('panel');

Thread Participants: 1