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.

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.

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'
        }
    ]}
});

---

The component has a reference to where it places the html content so it grabs from that div.

But I guess it works :) Thanks.

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