PDA

View Full Version : Custom renderer in TabPanel



dpwrussell
5 Dec 2009, 6:20 PM
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:


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:



<!--
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>