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

最新推荐文章于 2023-03-13 22:19:00 发布

最新推荐文章于 2023-03-13 22:19:00 发布 · 627 阅读

文章标签：

#JavaScript #UI #ViewUI

ExtJs 同时被 2 个专栏收录

6 篇文章

订阅专栏

3 篇文章

订阅专栏

本文详细阐述了在使用ExtJS时，遇到Panel组件按钮自定义封装时的问题及其解决方法，通过修改Panel源码中的initComponent函数，实现按钮的动态创建与配置，确保了预期效果的达成。

对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]);
						}
					}
				}

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

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