Hi!
I can't use the variable for values option of Template.overwrite method.
I could display without using the variable but I want to use the variable.
Thanks for your help.
Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Panel Test</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../../../ext/resources/css/ext-all.css" />
<!-- JS -->
<script type="text/javascript" src="../../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext/ext-all-debug.js"></script>
<style type="text/css">
body {
font-family: helvetica, tahoma, verdana, sans-serif;
padding: 20px;
padding-top: 32px;
font-size: 13px;
background-color: #fff !important;
}
.x-panel-mc {
font-size: 12px;
line-height: 18px;
}
</style>
<script>
Ext.onReady(function(){
var ct = new Ext.Panel({
renderTo: 'grid-example',
frame: true,
title:'Panel Test',
width: 600,
height: 100,
layout: 'border',
items: [
{
id: 'detailPanel',
region: 'center',
bodyStyle: {
background: '#ffffff',
padding: '7px'
},
html: 'Please select a book to see additional details.'
}
]
})
// define a template to use for the detail view
var bookTplMarkup = [
'id: {id}<br/>',
'name: {name}<br/>',
];
var bookTpl = new Ext.Template(bookTplMarkup);
var detailPanel = Ext.getCmp('detailPanel');
//NG
//var testStr = "{\"id\":\"1\",\"name\":\"taro\"}";
//NG
//var testStr = '{"id":"1","name":"taro"}';
//NG (I want to use this way)
bookTpl.overwrite(detailPanel.body, testStr);
//OK (But I want to use variable)
//bookTpl.overwrite(detailPanel.body, {"id":"1","name":"taro"});
});
</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>