ExtJs自定义Button的xtype在拥有buttons配置项的组件中无效

对ExtJs的Button进行自定义封装时： 

Ext.Button.ConfirmBtn = Ext.extend(Ext.Button, {
			minWidth : 65,
			text : '确定',
			iconCls : 'confirm'
		});
Ext.reg('confirmBtn', Ext.Button.ConfirmBtn);

  

此时，拥有buttons配置项的组件代码如下： 

buttons : [{
			xtype : 'confirmBtn'
		}, {
			minWidth : 65,
			text : '确定',
			iconCls : 'confirm'
		}]

 

展示的效果没到达预期： 

 

几经翻代码，找到问题所在，原来在ExtJs的Panel源码中的initComponent函数里面 this.buttons.push(Ext.create(btns[i], 'button'));将button写死了： 

        if(this.buttons){
            this.elements += ',footer';
            var btns = this.buttons;
            this.buttons = [];
            for(var i = 0, len = btns.length; i < len; i++) {
                if(btns[i].render){ // button instance
                    this.buttons.push(btns[i]);
                }else if(btns[i].xtype){
                    this.buttons.push(Ext.create(btns[i], 'button'));//问题出现在这里
                }else{
                    this.addButton(btns[i]);
                }
            }
        }

 
 找到出错原因，对其重写：  

				if (this.buttons) {
					this.elements += ',footer';
					var btns = this.buttons;
					this.buttons = [];
					for (var i = 0, len = btns.length; i < len; i++) {
						if (btns[i].render) { // button instance
							this.buttons.push(btns[i]);
						} else if (btns[i].xtype) {
							this.buttons.push(Ext.ComponentMgr.create(btns[i],
									btns[i].xtype));//根据传入的xtype动态新建
						} else {
							this.addButton(btns[i]);
						}
					}
				}

 

最终效果如下，达到预期：

  

PS

ExtJs3.4之前的版本都出现这样的情况，应该是ExtJs自身对buttons的限制只允许为Button

    /**
     * @cfg {Array} buttons
     * 在面板底部加入按钮，{@link Ext.Button}配置的数组。
     * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this panel.
     */

 

原创文章，码字不易，转载请注明出处，谢谢。

永久链接: http://wangs7345.iteye.com/blog/2106501