PDA

View Full Version : Tools template - ignored?



kanister
17 Oct 2011, 1:23 AM
i need to change layout of some tools.
in ext3 i edited toolTemplate in grid or form.
now there is tpl config in tool itself,
hovewer setting it up makes no changes to layout.

Ext.grid.Panel({
tools:[{
tpl:'<div>i want to see it</div>', // new Ext.XTemplate('<div>same here</div>')
handler:function(){alert('a');}
}]
});

... how can i achieve what i desire?

skirtle
17 Oct 2011, 4:49 AM
Take a look here:

http://docs.sencha.com/ext-js/4-0/source/Tool.html#Ext-panel-Tool

It looks like renderTpl might not be a bad place to start.

For complicated customizations it might be better not to use a tool at all. The header of a panel should be able to cope with you adding all sorts of other components to it.

kanister
17 Oct 2011, 6:06 AM
what is missing or what am i doing wrong???

{
renderTpl: [
'<div class="x">{tool}</div>'
],
renderData: {
tool: "myname"
},
renderSelectors: {
toolEl: 'div.x'
}
}

skirtle
17 Oct 2011, 1:23 PM
Please use CODE tags when posting code (# button on the editor toolbar).

Are you using 4.0.2a? It seems to have changed between 4.0.2a and 4.0.6 but in 4.0.2a there's this line near the end of initComponent:


me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;

This seems a bit annoying to me. You've got a few options. You could tweak your template so that the selectors match up. Or, given initComponent is so short, you could override it in a subclass and call the grandparent's copy of initComponent, skipping the tools version. Or maybe you could just use a component instead of a tool.

kanister
17 Oct 2011, 11:53 PM
Thanks for advice. I ended up with something like this... any remark?



function(tpl,text,hand){
return {
xtype:'component',
renderData:{
text:text
},
listeners:{
render:function(){
this.getEl().on('click',hand);
}
},
renderTpl:new Ext.XTemplate(tpl)
};
}