Как вставить результат Json в Extjs Panel?

Question

У меня есть некоторые проблемы с результатом Json, и я вставил его в html-панель Extjs.

Вот что мне удалось сделать так далеко. myPanel встроен в mainPanel, и у меня есть некоторые показы / скрытия myPanel между другими разделами моих кодов.

Ajax-запрос для получения результата Json, например, так:

Ext.Ajax.request({
    url: 'myStore',
    success: function(r) {
        var myItem = Ext.decode(r.responseText).itemName;
    }
})

Я бы хотел вставить myItem в mypanel, примерно так:

var myPanel = new Ext.Panel({
    hidden: true,
    html:myItem
})

Здесь myPanel встроен в мою главную панель:

var mainPanel = new Ext.Panel({
    applyTo: 'mywizard',
    frame: true,
    items: [{
        id: 'top',
        xtype:'panel',
        items: [
            topPanel1,
            topPanel2
        ]
    },{
        id: 'middle',
        xtype: 'panel',
        items: [
            middlePanel1,
            middlePanel2,
            myPanel
        ]
    },{
        id: 'bottom',
        xtype: 'panel',
        items: [
            footer        
        ]
    });

В настоящее время, если бы мне нужно было запустить код, я получил «неопределенное» в myPanel, поэтому я предположил, что myItem находится вне области видимости, поэтому myPanel не захватывает его. Следовательно, я хотел бы знать, как / что мне делать, чтобы myItem (результат Json) отражался в myPanel?

Спасибо.

Answer 1

Я нашел ответ, проверил и работал на меня. Для любых друзей, застрявших с этим. Что мне нужно сделать, это просто обновить содержимое HTML с обновлением тела.

По сути, просто возьмите середину основной панели так, чтобы:

var middle = new Ext.Panel({
    id: 'middle',
    xtype: 'panel',
    items: [
        middlePanel1,
        middlePanel2,
        myPanel
    ]
})

Конечно, вам нужно заменить middle обратно на mainPanel.

Затем следует создать myPanel как норму:

var myPanel = new Ext.Panel({
    id: 'myPanel',
    hidden: true,
    html: 'empty'
})

Внутри Ajax-запроса вы обновляете

Ext.Ajax.request({
    url: 'myStore',
    success: function(r) {
        var myItem = Ext.decode(r.responseText).itemName;
        var editmycontent = Ext.getCmp('myPanel');
            editmycontent.body.update(myItem);  // update myItem here
        middle.doLayout();  // refresh the changes
    }
})

Вот и все!

Answer 2

у вас есть синтаксическая ошибка в этой части, исправленный код выглядит так:

var myPanel = new Ext.Panel({
    hidden: true,
    html:myItem // no ; here
});

также вы должны быть осторожны с проблемой определения объема, если ваш код находится в классе, я бы сделал что-то подобное

Ext.Ajax.request({
    url: 'myStore',
    success: function(r) {
        var myItem = Ext.decode(r.responseText).itemName;
        var myPanel = new Ext.Panel({
             hidden: true,
             html:myItem // no ; here
        });
        this.parentPanel.add(myPanel);
    }
    ,scope: this // note the set the scope
});