Extjs Panel에 Json 결과를 포함시키는 방법은 무엇입니까?

Question

Json 결과에 몇 가지 문제가있어서 Extjs 패널의 html에 포함합니다.

여기까지 가야합니다. myPanel은 mainPanel에 포함되어 있으며 내 코드의 다른 섹션 사이에 myPanel의 일부 숨김을 표시합니다.

Ajax 요청은과 같이 JSON 결과를 검색 할 수 있습니다 :

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

내가 mypanel으로 이런 일을 myItem을 포함하고 싶습니다 :

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

이이 myPanel가에 내장되어 어디에 내 mainPanel :

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

현재 코드를 실행하면 "정의되지 않은"w가 나타납니다. myPanel에서는 myItem이 범위를 벗어 났으므로 myPanel에서 선택하지 않았다고 가정합니다. 따라서 myPanel에 myItem (Json 결과)이 반영되도록하려면 어떻게해야합니까?

감사합니다.

Answer 1

답을 찾았습니다. 테스트를 거쳐 저에게 도움이되었습니다. 이걸로 붙어있는 친구들에게. 내가해야 할 일은 html 콘텐츠를 본문 업데이트로 업데이트하는 것입니다.

기본적으로, 단지 mainPanel에서 중간을 잡아하도록 :

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

은 물론, 당신은 다시 mainPanel에 middle를 교체해야합니다.

그런 다음, 다음 표준으로 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 
});