PDA

View Full Version : Using childEls in header of a window



sasklacz
29 Aug 2012, 8:30 AM
I'm trying to create an Ext.Window with custom header. The header should render a template and add childEls. Unfortunately right now it throws 'container is undefined' error, so I'm probably doing this incorrectly.

Here's a sample code, using modified window/layout example so demo can be reproduced by pasting the code to layout.js :



Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.onReady(function(){


var win,
button = Ext.get('show-btn'),
headerTpl = new Ext.XTemplate(
'<h4>{headerText}</h4>',
'<span id="{id}-pdfexportdialogClose"></span>'
),
createHeader = function () {
var me = this;


return {
xtype: 'header',
renderTpl: me.headerTpl,
renderData: {
headerText: me.headerText
},
childEls: ["pdfexportdialogClose"]
};
};


button.on('click', function(){
win = Ext.create('widget.window', {
title: 'Layout Window',


hideAction: 'hide',
modal : false,
width : 240,
height: 300,
frame : false,
header : false,
title : null,
layout : 'fit',
draggable : true,
padding: 0,


header : createHeader(),
items: [
{
region: 'west',
title: 'Navigation',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Bogus Tab',
html: 'Hello world 1'
}, {
title: 'Another Tab',
html: 'Hello world 2'
}, {
title: 'Closable Tab',
html: 'Hello world 3',
closable: true
}]
}]
});


if (win.isVisible()) {
win.hide(this, function() {
button.dom.disabled = false;
});
} else {
win.show(this, function() {
button.dom.disabled = false;
});
}
});
});