Hi,

I'm not much of a javascript expert yet as front end development is new to me so apologies for probable stupidness on my part.

Is there a tidy way of adding custom renderers to panels (well, to their updaters) I'm adding to my TabPanel?

This seems a bit clumsy:

Code:
var newtab = tabs.add({
  title: 'New Tab ' + (++index),
  id: 'tabno' + index,
  iconCls: 'tabs',
  html: 'Tab Body ' + (index) + '<br/><br/>' + Ext.example.bogusMarkup,
  closable:true
}).show();

var updater = newtab.getUpdater();
updater.setRenderer(MyRenderer);
Thanks in advance for any advice.

My whole example:

Code:
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="ext-3.0.3/resources/css/ext-all.css" />

        <script type="text/javascript" src="ext-3.0.3/adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="ext-3.0.3/ext-all.js"></script>

        <link rel="stylesheet" type="text/css" href="ext-3.0.3/examples/tabs/tabs-example.css" />
        <script type="text/javascript" src="ext-3.0.3/examples/ux/TabCloseMenu.js"></script>

        <link rel="stylesheet" type="text/css" href="ext-3.0.3/examples/shared/examples.css" />
        <script type="text/javascript" src="ext-3.0.3/examples/shared/examples.js"></script>

        <script type="text/javascript">

            function MyRenderer() {}

            MyRenderer.render = function(el, response, updateManager, callback) {
                el.update('Hello from MyRenderer', updateManager.loadScripts, callback);
            }

            function createMyTab() {

                var tabs = new Ext.TabPanel({
                    id:'mytabs',
                    renderTo:'tabs',
                    resizeTabs:true, // turn on tab resizing
                    minTabWidth: 115,
                    tabWidth:135,
                    enableTabScroll:true,
                    width:800,
                    height:600,
                    defaults: {
                        autoScroll:true
                    },
                    plugins: new Ext.ux.TabCloseMenu()
                });

                // tab generation code
                var index = 1;
                //    while(index < 7){
                //        addTab();
                //    }

                function addTab(){

                    var newtab = tabs.add({
                        title: 'New Tab ' + (++index),
                        id: 'tabno' + index,
                        iconCls: 'tabs',
                        html: 'Tab Body ' + (index) + '<br/><br/>' + Ext.example.bogusMarkup,
                        closable:true
                    }).show();

                    var updater = newtab.getUpdater();
                    updater.setRenderer(MyRenderer);
                }

                new Ext.Button({
                    text: 'Add Tab',
                    handler: addTab,
                    iconCls:'new-tab'
                }).render(document.body, 'tabs');
            }

            function testTabGet() {
                var tabs = Ext.getCmp('mytabs');
                //alert(tabs);
                tabs.add({
                    title: 'My New Tab ',
                    iconCls: 'tabs',
                    html: 'My Tab Body ' + '<br/><br/>'
                        + Ext.example.bogusMarkup,
                    closable:true
                }).show();

            }

            function dispFunc(a,b,respdata,d) {
                var data = Ext.util.JSON.decode(respdata.responseText);
                //var data = eval(respdata);
                alert(data.row[1]);
            }

            //, callback: dispFunc
            function refTab() {
                var myTab = Ext.getCmp('mytabs');
                var el = myTab.getItem('tabno' + '3');
                var mgr = el.getUpdater();
                mgr.update({
                    url: "queryResults.jsp"
                });

            }
        </script>

    </head>
	<body>
		TODO write content
        <input type="button" value="initTab" onclick="createMyTab()" />
        <input type="button" value="addTab" onclick="testTabGet()" />
        <input type="button" value="referenceTab" onclick="refTab()" />
		<div id="tabs" style="margin:15px 0;"></div>
    </body>
</html>