extjs - 带有可点击按钮的组合框列表

Question

我正在尝试创建一个带有下拉菜单和可点击按钮的组合框。

我已经覆盖了 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();
    }
});

Answer 1

每个组件都有一个方法finishRender ，在渲染运行期间从父组件调用。当我通过 generateMarkup 手动生成标记时，我还必须在呈现选择器之后手动调用 finishRender 方法，然后才能单击按钮。

在 DatePicker 中，todayBtn 的 finishRender 是从覆盖的私有(private) finishRenderChildren 中调用的方法。虽然我不能覆盖我的选择器的私有(private)方法，但我可以从一个 afterrender 监听器调用相同的 finishRender 方法，我可以添加到选择器(如 Narendra Jadhav 所建议的):

listConfig: {
    ...
    listeners: {
        afterrender: function(picker) {
            picker.ownerCmp.selAllBtn.finishRender();
        }
    }
},