Extjs使用renderTo后Button未渲染到指定Div内的问题求助

问题排查 #

你当前的代码存在4个核心问题，导致按钮无法正常渲染：

• _getEmptyPageText 函数存在语法错误，返回的HTML字符串不完整：
  你在'<div class="some div">' + emptyCreateText + ' </div>' ; 这里错误使用了分号打断了字符串拼接，函数执行到这里就直接返回了，后续的class="some div2"的div根本不会被包含在返回的HTML中，目标容器本身就不存在。
• Ext.get 入参使用错误：
  Ext.get() 只接收元素ID、DOM节点、已存在的Ext.Element实例，你传入的是类名some div2，默认不会按类名匹配元素，无法找到目标容器。
• 仅生成了HTML字符串，未插入到页面DOM中：
  _getEmptyPageText() 只是返回了HTML字符串，你没有将该字符串插入到页面已渲染的DOM节点内，哪怕HTML拼接正确，页面中也不存在对应的元素。
• 仅声明了按钮配置对象，未实例化Ext组件：
  getCreateButton() 只是返回了一个普通的JS配置对象，没有调用Ext的组件实例化逻辑，Ext不会自动渲染这个配置对应的按钮。

修复方案 #

按以下步骤调整代码即可：

1. 修复_getEmptyPageText的拼接错误，建议给目标容器加唯一ID方便查找：

_getEmptyPageText:function(){
     const emptyCreateText = 'some text'; 
     // 把中间的分号改成加号，给按钮容器加id
     return '<div class="some class">' + 
     '<div class="some div">' + emptyCreateText + ' </div>' +
     '<div id="createButtonWrap" class="some div2">'+ '</div>' + '</div>';
},

2. 调整按钮逻辑，直接返回实例化后的按钮组件，不需要提前指定renderTo：

getCreateButton: function() {
    var me = this;
    return Ext.create('Ext.button.Button', {
        cls: 'ri-btn',
        scale: 'medium',
        text: 'Create',
        handler: function() {
            me.someHandler();
        }
    });
},

3. 调整调用顺序，先把HTML插入DOM，再渲染按钮到目标容器：

// 假设你要把空页面内容渲染到页面上id为pageContainer的已有容器中，根据你的实际场景替换即可
Ext.get('pageContainer').update(this._getEmptyPageText());
// 实例化按钮后渲染到目标容器
this.getCreateButton().render('createButtonWrap');

内容的提问来源于stack exchange，提问作者Ash