对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