PDA

View Full Version : renderTpl tweaking



clarence.n.huang
2 May 2012, 9:42 AM
What I'm trying to accomplish is to place some custom markeup around the dockedItems of the panel class, a natural way to do this seems to be to modify the "renderTpl". What I first tried to do is this:



// in my custom Panel subclass

initComponent: function(){
var me = this;
me.header = false;
// renderTpl tweaking!
me.renderTpl = [


"<div class='header'>", // this my own custom markup
"<div class='header-inner-wrapper'>",
'{% this.renderDockedItems(out,values,1); %}',
"</div>",
"</div>",


// here is all copied from AbstractPanel
(Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) ? '<div></div>' : '',
'<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
' {baseCls}-body-{ui}<tpl if="uiCls">',
'<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
'</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'{%this.renderContainer(out,values);%}',
'</div>',
//''//,
//'{% this.renderDockedItems(out,values,0); %}'
];


me.callParent(arguments);
}



however this does not work as I realized that its actually this line here:


'{%this.renderContainer(out,values);%}',

which actually builds up the entire structure of the panel and its docked items. some digging through the code found me this:



// inside 'Ext.layout.container.Container'

doRenderContainer: function (out, renderData) {
// Careful! This method is bolted on to the renderTpl so all we get for context is
// the renderData! The "this" pointer is the renderTpl instance!


var me = renderData.$comp.layout,
tpl = me.getRenderTpl(),
data = me.getRenderData();


tpl.applyOut(data, out);
},



so it seems that the layout is gotten from the component.layout variable. However the 'dock' compoent layout used by the panel does not have a renderTpl variable so I'm very lost on how to accomplish this. Would love to have some EXTJS guru enlighten me on this. Thanks!

vietits
2 May 2012, 5:32 PM
The following code works well for me on Chrome 18, Ext 4.1.0.


Ext.onReady(function(){
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
renderTpl: [
"<div class='header'>", // this my own custom markup
"<div class='header-inner-wrapper'>",
'{% this.renderDockedItems(out,values,1); %}',
"</div>",
"</div>",
// here is all copied from AbstractPanel
(Ext.isIE6 || Ext.isIE7 || Ext.isIEQuirks) ? '<div></div>' : '',
'<div id="{id}-body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
' {baseCls}-body-{ui}<tpl if="uiCls">',
'<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
'</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'{%this.renderContainer(out,values);%}',
'</div>'
//''//,
//'{% this.renderDockedItems(out,values,0); %}'
]
});


Ext.create('MyPanel', {
title: 'MyPanel',
layout: 'fit',
width: 400,
height: 200,
renderTo: Ext.getBody(),
html: 'MyPanel'
});
});

clarence.n.huang
2 May 2012, 5:34 PM
Hi, thanks for the reply.

It does work but the problem is that the header of the panel (and other docked items) is not nested within my custom markup, which is what I'm trying to achieve.

- Thanks

vietits
2 May 2012, 5:51 PM
After open example in Chrome browser, I used "Inspect Element" tool and saw "<div class="header"><div class="header-inner-wrapper"></div></div>" there.

clarence.n.huang
2 May 2012, 6:13 PM
Hi, thats exactly right, the markup generated is (omitted some for clearer formatting)


<div id="ext-comp-1009" class="x-panel x-panel-default" style="width:400px;height:200px;">
<div id="ext-comp-1009_header" class="x-panel-header">
<!--- MISC header tags -->
</div>
<div class="header">
<div class="header-inner-wrapper"></div>
</div>
<div id="ext-comp-1009-body" >
MyPanel
</div>
</div>




however the markup I actually want is



<div id="ext-comp-1009" class="x-panel x-panel-default" style="width:400px;height:200px;">

<div class="header">
<div class="header-inner-wrapper">
<div id="ext-comp-1009_header" class="x-panel-header"> <!--- MISC header tags -->
</div>
</div>
</div>
<div id="ext-comp-1009-body" >
MyPanel
</div>
</div>




I want the generated header (and docked items) to be enclosed within my custom markup

clarence.n.huang
3 May 2012, 8:20 AM
Still stuck on this one, anyone has any ideas?

vietits
3 May 2012, 5:23 PM
By reading the source code I realized that docked items (include panel header) are under control of dock layout (Ext.layout.component.Dock). 'dock' layout will render (and force) the items directly under the outest element representing panel in the following order:
- panel header.
- top and left docked items.
- others DOM nodes (such as body...).
- right and bottom docked items.
This will be done by dock layout and it does not depend on the position of items in the renderTpl.