2013-02-01 82 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