2013-02-01 81 views
0

我想在面板中使用模板。模板觸發器來自另一個網格項目選擇。但是這個代碼不起作用....爲什麼這個tpl不起作用?

我的代碼有什麼問題? 只是簡單地複製/粘貼我的代碼來運行... 任何人,你能解決這個問題嗎?

HTML代碼:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> 
<script type="text/javascript" src="extjs/ext-all-debug.js"> 
</script> 
<script type="text/javascript"> 
Ext.onReady(function() { 

Ext.create('Ext.data.Store',{ 
    storeId: 'letterStore', 
    fields: ['TitleLetter','LetterType'], 
    data: { 
    'items': [ 
     { 'TitleLetter' : 'Keterangan', 'LetterType' : 'Not My Type'}, 
     { 'TitleLetter' : 'Dua', 'LetterType' : 'Yes This is my Type' } 
    ] 
    }, 
    proxy: { 
    type: 'memory', 
    reader: { 
     type: 'json', 
     root: 'items' 
    } 
    } 
}); 


var panel = Ext.create('Ext.panel.Panel',{ 
    title: 'Testing', 
    renderTo: Ext.getBody(), 
    items: [ 
    { 
     xtype: 'gridpanel', 
     title: 'Grid For TPL', 
     bodyPadding: 5, 
     listeners: { 
     itemclick: function(selModel, record, index, options){ 

      var detailPanel = this.child('#detailPanel'); 
      detailPanel().update(record.data); 
     } 
     }, 
     store: Ext.data.StoreManager.lookup('letterStore'), 
     width: 300, 
     height: 300, 
     columns: [ 
     { 
      xtype: 'gridcolumn', 
      dataIndex: 'TitleLetter', 
      text: 'Judul Surat' 
     }, 
     { 
      xtype: 'gridcolumn', 
      dataIndex: 'LetterType', 
      text: 'Tipe Surat' 
     }, 

     ] 
    }, 
    { 
     xtype: 'panel', 
     itemId: 'detailPanel', 
     title: 'Show TPL', 
     tpl: ['I am trying to use TPL {TitleLetter}'] 
    }, 


    ] 


}); 



}); 

</script> 
</head> 
<body> 
</body> 
</html> 
+0

是......非常感謝您的回答。 我是新來的stackoverflow。 世界各地的人都有不同的語言。我正在學習英語。我不是指諷刺。 – kenzominang

回答

2

試試這個你itemclick事件:

itemclick: function(selModel, record, index, options) { 
    // In this function, "this" refers to the grid, 
    // so you need to go up to the parent panel then 
    // back down to get the detailPanel 

    var detailPanel = this.up().down("#detailPanel"); 
    detailPanel.update(record.data); 
} 

編輯:繞過Ext.ComponentQuery完全更快的方法。

itemclick: function(selModel, record, index, options) { 
    var detailPanel = this.ownerCt.getComponent("detailPanel"); 
    if (detailPanel) { 
     detailPanel.update(record.data); 
    } 
} 
+0

哇......很好......你的解釋讓我明白。非常感謝@Eric :) – kenzominang

+2

?如果這不是諷刺,你能否把這個標記爲正確的答案。 – Reimius

+1

@Reimius ExtJS標籤被那些不知道是什麼的人感染;)從我那裏得到一個+1 Eric;)不要忘記這是否是諷刺;自己動手 – sra