87,991
社区成员
发帖
与我相关
我的任务
分享Extjs里的template定义时，看到一个'{%this.renderContainer(out,values)%}'，谁能告诉我这是干什么用的？
这是Ext.tab.Bar里的一个模板，写在renderTpl中了，源代码是：
renderTpl: [
'<div id="{id}-body" class="{baseCls}-body {bodyCls}<tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'{%this.renderContainer(out,values)%}',
'</div>',
'<div id="{id}-strip" class="{baseCls}-strip<tpl if="ui"> {baseCls}-strip-{ui}<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl></tpl>"></div>'
],
我现在就想知道他中间'{%this.renderContainer(out,values)%}'的部分是怎么生成的？因为我想改变这部分的结构，但我现在不知道这段代码是在什么地方被重写的，还有那个out和value是怎么来的？
望牛人帮忙，不胜感激！
renderTpl: [
'<div id="{id}-body" class="{baseCls}-body {bodyCls}<tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'{%this.renderContainer(out,values)%}',
'</div>',
'<div id="{id}-strip" class="{baseCls}-strip<tpl if="ui"> {baseCls}-strip-{ui}<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl></tpl>"></div>'
],
我现在就想知道他中间'{%this.renderContainer(out,values)%}'的部分是怎么生成的？因为我想改变这部分的结构，但我现在不知道这段代码是在什么地方被重写的，还有那个out和value是怎么来的？
望牛人帮忙，不胜感激！
...全文
请发表友善的回复…
发表回复
yufulou 2012-12-26
- 打赏
- 举报
好吧，但就是因为看不懂这个doRenderContainer才发的帖求助啊……
yibey 2012-12-24
- 打赏
- 举报
setupRenderTpl: function (renderTpl) {
var me = this;
renderTpl.renderBody = me.doRenderBody;
renderTpl.renderContainer = me.doRenderContainer;
renderTpl.renderItems = me.doRenderItems;
renderTpl.renderPadder = me.doRenderPadder;
}
自己看Ext.layout.container.Container这个类里的最后一个函数setupRenderTpl这里定义了你想要的，至于为什么这样，你有兴趣自己去看吧
yufulou 2012-12-23
- 打赏
- 举报
ext4
yufulou 2012-12-23
- 打赏
- 举报
你就看一眼Ext.tab.Bar的源代码就可以了……
yibey 2012-12-21
- 打赏
- 举报
上代码吧，你这样让我猜我猜不出来。
yufulou 2012-12-21
- 打赏
- 举报
这段文档我看过，this.renderContainer我记得应该是定义在了Ext.container.Container里，但调用的时候，this指的是XTemplate对象（这也在注释里写明了），你会发现，bar里要生成的代码这renderTpl里没有写全，中间缺少那部分元素就是代码 '{%this.renderContainer(out,values)%}'所在的位置，现在我就想找，这个代码是怎么执行的，怎么就把中间的部分写进去了
yibey 2012-12-20
- 打赏
- 举报
Any code contained in "verbatim" blocks (using "{% ... %}") will be inserted directly in the generated code for the template. These blocks are not included in the output. This can be used for simple things like break/continue in a loop, or control structures or method calls (when they don't produce output). The this references the template instance.
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'{% if (xindex % 2 === 0) continue; %}',
'{name}',
'{% if (xindex > 100) break; %}',
'</div>',
'</tpl></p>'
);
API文档里说明using "{% ... %}" 使用这个方式的符号里的用来控制业务逻辑，并没有输出。
比如这里的意思是如果行号是偶数的输出name，如果不是的则不输出，最多输出到100个行号为止。
'{% if (xindex % 2 === 0) continue; %}',
'{name}',
'{% if (xindex > 100) break; %}',
所以你这里具体this.renderContainer这个是什么玩意，要看你的renderTpl 生成TPL对象的时候看该对喜爱那个的renderContainer是什么（应该是该函数）
