How to add an add button in in my custom module - magento-1.7

Question

I have a module which is used to add banner images through admin panel. I have created the module successfully. My module edit page has two tabs. One for adding general informations of banner and second one for adding images. The general information tab is working fine now.
I need to have a button 'add banner image' in my second tab initially. When clicked on it, it should load an file type button.We can use this button for loading the image. We can use 'add banner image' in any number of times for loading the image. This is just similar to the add custom option for a product. I need that exact same functionality here.
I have searched a lot. But couldnt find how to add 'add banner image' button to my second tab. Please help me to solve this issue. Give me an idea of how can impliment this functionality. Sorry for my bad english.Thanks

Answer 1

I have created a similar functionality where I can add postcode ranges in my custom module using below code.
In my Module_name/Block/Adminhtml/Regions/Edit/Tab/Form.php I have added.
$fieldset->addField('postcodes', 'text', array(
'name'=>'postcodes',
'class'=>'requried-entry'
));
$form->getElement('postcodes')->setRenderer(
$this->getLayout()->createBlock('zones/adminhtml_regions_edit_tab_postcodes')
);
This will add postcodes field in my tab with renderer adminhtml_regions_edit_tab_postcodes
In my Module_name/Block/Adminhtml/Regions/Edit/Tab/Postcodes.php I have added the button with the code.
class Ripples_Zones_Block_Adminhtml_Regions_Edit_Tab_Postcodes
extends Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Price_Group_Abstract
{
public function __construct()
{
$this->setTemplate('zones/postcodes.phtml');
}
protected function _prepareLayout()
{
$button = $this->getLayout()->createBlock('adminhtml/widget_button')
->setData(array(
'label' => Mage::helper('zones')->__('Add Postcode Range'),
'onclick' => 'return addPostCodeRange.addItem()',
'class' => 'add'
));
$button->setName('add_postcode_range_button');
$this->setChild('add_button', $button);
return parent::_prepareLayout();
}
}
This will add a button on my tab with the onclick function addPostCodeRange.addItem().
After this I have added a phtml file in design/adminhtml/default/default/template/zones/postcodes.phtml
<?php $_htmlId = $this->getElement()->getHtmlId() ?>
<?php $_htmlName = 'postcodes';?>
<tr>
<td class="label">Postcode Range</td>
<td colspan="10" class="grid">
<table cellspacing="0" class="data border" id="postcodes_table">
<col width="50" />
<col width="50" />
<col width="1" />
<thead>
<tr class="headings">
<th><?php echo Mage::helper('zones')->__('From') ?></th>
<th><?php echo Mage::helper('zones')->__('To') ?></th>
<th class="last"><?php echo Mage::helper('catalog')->__('Action') ?></th>
</tr>
</thead>
<tbody id="<?php echo $_htmlId ?>_container"></tbody>
<tfoot>
<tr>
<td colspan="3" class="a-right"><?php echo $this->getAddButtonHtml() ?></td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
//<![CDATA[
var tierPriceRowTemplate = '<tr>'
+ '<td><input type="text" value="{{from}}" class="custgroup required-entry" name="<?php echo $_htmlName ?>[{{index}}][from]" id="postcodes_row_{{index}}_from" />'
+ '</td>'
+ '<td><input type="text" value="{{to}}" class="custgroup required-entry" name="<?php echo $_htmlName ?>[{{index}}][to]" id="postcodes_row_{{index}}_to" />'
+ '</td>'
+ '<td class="last"><input type="hidden" name="<?php echo $_htmlName ?>[{{index}}][delete]" class="delete" value="" id="postcodes_row_{{index}}_delete" />'
+ '<button title="<?php echo Mage::helper('zones')->__("Delete Range") ?>" type="button" class="scalable delete icon-btn delete-product-option" id="postcodes_row_{{index}}_delete_button" onclick="return addPostCodeRange.deleteItem(event);">'
+ '<span><span><span><?php echo Mage::helper('zones')->__("Delete") ?></span></span></span></button></td>'
+ '</tr>';
var addPostCodeRange = {
template: new Template(tierPriceRowTemplate, new RegExp('(^|.|\\r|\\n)({{\\s*(\\w+)\\s*}})', "")),
itemsCount: 0,
addItem : function () {
var data = {
from: '',
to: '',
readOnly: false,
index: this.itemsCount++
};
if(arguments.length >= 2) {
data.from = arguments[0];
data.to = arguments[1];
}
if (arguments.length == 3) {
data.readOnly = arguments[2];
}
Element.insert($('<?php echo $_htmlId ?>_container'), {
bottom : this.template.evaluate(data)
});
$('postcodes_row_' + data.index + '_from').value = data.from;
$('postcodes_row_' + data.index + '_to').value = data.to;
if (data.readOnly == '1') {
['from', 'to', 'delete'].each(function(idx){
$('postcodes_row_'+data.index+'_'+idx).disabled = true;
});
$('postcodes_row_'+data.index+'_delete_button').hide();
}
},
disableElement: function(el) {
el.disabled = true;
el.addClassName('disabled');
},
deleteItem: function(event) {
var tr = Event.findElement(event, 'tr');
if (tr) {
Element.select(tr, '.delete').each(function(elem){elem.value='1'});
Element.hide(tr);
Element.addClassName(tr, 'no-display template');
}
return false;
}
};
<?php $collection = Mage::getModel('zones/regions')->getCollection()->addFieldToFilter('regions_id',array('eq' => $this->getRequest()->getParam('id'))); ?>
<?php foreach ($collection as $_item): ?>
<?php $postcodes = unserialize($_item['postcodes']); ?>
<?php foreach ($postcodes as $postcode): ?>
addPostCodeRange.addItem( '<?php echo $postcode['from'] ?>', '<?php echo $postcode['to'] ?>');
<?php endforeach; ?>
<?php endforeach; ?>
//]]>
</script>
</td></tr>
This file contains the function. I have added two textboxes on function call. You can add file field in this function.
Hope this helps.