我正在尝试创建一个带有下拉菜单和可点击按钮的组合框。
我已经覆盖了 renderTpl
并复制了日期选择器 todayBtn 的按钮实例化代码。 This fiddle shows what I have now ,按钮已呈现但尚未可点击,处理程序未执行。
我错过了什么?
代码:
Ext.define('EnhancedCombo', {
extend: 'Ext.form.field.ComboBox',
xtype: 'enhancedcombo',
footerButtonUI: 'default',
selAllText: 'Select All',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.selAllBtn = new Ext.button.Button({
ui: me.footerButtonUI,
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: me.selAllText,
tabIndex: -1,
ariaRole: 'presentation',
handler: me.selectAll,
scope: me
});
},
listConfig: {
renderTpl: [
'<div id="{id}-listWrap" data-ref="listWrap"',
' class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '">',
'<ul id="{id}-listEl" data-ref="listEl" class="', Ext.baseCSSPrefix, 'list-plain"',
'<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>',
'>',
'</ul>',
'</div>',
'<div id="{id}-footerEl" data-ref="footerEl" role="presentation" class="{baseCls}-footer" style="">{%this.renderSelAllBtn(values, out)%}</div>',
{
disableFormats: true,
renderSelAllBtn: function(values, out) {
Ext.DomHelper.generateMarkup(values.$comp.ownerCmp.selAllBtn.getRenderTree(), out);
}
}
],
},
selectAll: function() {
console.log('select all');
this.getPicker().getSelectionModel().selectAll();
}
});
最佳答案
每个组件都有一个方法finishRender
,在渲染运行期间从父组件调用。当我通过 generateMarkup
手动生成标记时,我还必须在呈现选择器之后手动调用 finishRender
方法,然后才能单击按钮。
在 DatePicker 中,todayBtn 的 finishRender
是从覆盖的私有(private) finishRenderChildren
中调用的方法。虽然我不能覆盖我的选择器的私有(private)方法,但我可以从一个 afterrender
监听器调用相同的 finishRender
方法,我可以添加到选择器(如 Narendra Jadhav 所建议的):
listConfig: {
...
listeners: {
afterrender: function(picker) {
picker.ownerCmp.selAllBtn.finishRender();
}
}
},
关于extjs - 带有可点击按钮的组合框列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51300972/