对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
相关推荐
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表ExtJS的xtype列表
ExtJs自定义消息框,自带的消息框,可以下载来了解一下。
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
extjs中的xtype的所有类型介绍
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
自定义下拉树,你懂的,内附图和前后台源代码
ExtJs xtype一览ExtJs xtype一览ExtJs xtype一览
自定义高级查询Extjs
ExtJS 4 button 按钮实例
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
有关于ext的xtype,Ext.QuickTips.init(),几种extjs的vtype默认支持的验证
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
扩展ExtJs4的Ext.form.field.Picker类,当点击下拉框时,异步加载树形结构数据的所有层级,需要后台提供树形结构数据,同时提供当树形列表选择改变后(selectionchange)等自定义事件,和是否为多选,父节点是否可选...
自定义树结构实现以及动态表头实现,整个程序是完整的,包括后台数据读取,数据赋值,树结构的类定义,前后端函数映射实现等,前端运用Extjs搭建页面
里面包含了所有extjs的一些xtype的class的对照说明
ExtJS xtype class对照表
extjs 开发中遇到的xtype值,此文挡包含了extjs中的全部xtype值
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....