我想创建一个弹出窗口,它会有一些自定义模板。基本功能是在标题中添加一些文本,然后是表单、进度条和按钮。问题是我的自定义模板在最后呈现并且并不真正适合弹出窗口。什么是正确的方法?任何地方都有可用的例子吗?我的缩短代码:
Ext.define('MyTooltip', {
extend : 'Ext.window.Window',
title: 'Mywindow',
closeAction: 'hide',
width: 300,
height: 300,
layout: 'fit',
resizable: false,
draggable: true,
modal: true,
items: [],
data: {
bar: 'foo'
},
tpl : Ext.create('Ext.XTemplate', '<div class="tooltip"><h1>{bar}</h1><div>{form}</div></div>', {compiled: true}),
initComponent: function(){
var me = this;
//Create items
var progressBar = Ext.create('Ext.ProgressBar', {
text: 'Progress...',
width: 250,
animate: true,
hidden: true,
id: 'widget-progressbar'
});
me.items = [
Ext.create('Ext.form.Panel',{
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [
{
width: 50,
xtype: 'combo',
mode: 'local',
value: 'Audi',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: 'Cars',
name: 'cars',
queryMode: 'local',
store: ["Audi", "BMW", "Citroen"]
},
progressBar
],
buttons: [
{
text: 'Start',
handler: function() {
},
scope: this
}
]
})
]
me.callParent(arguments);
}
});
编辑
在第一个答案之后尝试更改我的 initComponent 方法,但是如何将我的项目呈现为 tpl 或 html ?
initComponent: function(){
(...)
me.callParent(arguments);
var tpl = Ext.create('Ext.XTemplate',
'<div>'+
'<div><h3>Available cars</h3>'+
'<div>{form}'+
'</div>'+
'</div>',
{compiled: true}
);
this.html = tpl.apply({
form: me.form.html
});
},