View Full Version : adding buttons to tpl created html

29 Nov 2011, 10:11 PM

I'm trying to added a button that will open a popup panel containing more options. However I can't get it to show up using what I think should work.

here is my index.html code. The reason I'm using tables is to ensure that the size formatting remains the same. The first table is the header, and the following table is where each row from the JSON store is being applied to

<div id="shipInput" class="x-hidden-display">
<div class="detail">
<div class="clear"">
<table border="1" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" style="margin: 0px;">
<td width="4%"><strong>ID</strong></td>
<td width="25%"><strong>Customer</strong></td>
<td width="48%"><strong>Description</strong></td>
<td width="15%"><strong>Date</strong></td>
<td width="8%"><strong>Action</strong></td>
</table><tpl for=".">
<table id="row{id}" border="1" cellspacing="0" cellpadding="0" style="margin: 0px;">
<td width="4%">{id}</td>
<td width="25%">{CUID}</td>
<td width="48%">{DESC}</td>
<td width="15%">{DATE}</td>
<td width="8%"><div id="editBtn"></div></td>
<div class="clear"></div>

the following is the code from my app.js for the button

var actButton = new Ext.Button({
renderTo: 'editBtn',
text: 'Click Me',
handler: function () {
alert("You Clicked Me...");

30 Nov 2011, 11:23 AM
Do you see the button? Any errors?

30 Nov 2011, 6:25 PM
nothing shows up in the place where it is supposed to be. There are also no errors being thrown in the console.

you can see the example at http://www.sing-hong.com/dash/ and clicking on the refresh button.

30 Nov 2011, 11:55 PM
well, ok - it turns out it *is* working...however it is only working on the first one, that is hidden

for the entries that are built using my ajax function, they are not being put into using the renderTo function.

function showTodayShip() {
url: 'shipping.php?action=get',
success: function(e) {
var obj = Ext.util.JSON.decode(e.responseText);
var shipInput = obj.shipInput;
if (shipInput) {
var html = tpl.applyTemplate(shipInput);

var actAlert =function () {alert("You Clicked Me...");}
new Ext.Button({
text: 'Click Me',
ui: 'confirm',
handler: actAlert,

how do I get it to add to every instance of the editBtn div that is added?