自定义Ext JS组件类

╰半夏微凉° 2024-03-26 12:23 26阅读 0赞

在Ext JS 中如何自定义一个组件类呢？  
实现方式是继承Ext.Component ，定义一个自己的组件类。 那么，这个组件类该怎样扩展自己的功能呢？

举例来说， 有这样一个需求：  
扩展一个Grid的子类，通过pageType的属性值来显示不同的列。

*  如果是查看页面，则所有列都是不可编辑的
 *  如果是编辑页面， 则某些列是可以编辑的。  
    在使用上类似：

{
    					xtype: 'mygrid',
    					pageType : 'edit'
    				}

根据pageType 的值的不同，最终呈现的效果是：

![在这里插入图片描述][08ddc8c75ef44efc98cf9a87c032efc0.png]

### 自定义组件类的思考 ###

*  自定义组件类 从Ext.Component 继承
 *  自定组件的切入点是什么呢?  
    切入点主要有两个：

1.  constructor 方法  
    ![在这里插入图片描述][3d7f7b28f14949d3a46120e1d1d86c39.png]
2.  initComponent 方法

![在这里插入图片描述][bd507a37121646a38e873750f69ff5bb.png]

#### cons ####

[08ddc8c75ef44efc98cf9a87c032efc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5acad126e21d4cae89b9e5d3f04e6f89.png
[3d7f7b28f14949d3a46120e1d1d86c39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/6f189e52cbbb4426bf4158094d5f40cb.png
[bd507a37121646a38e873750f69ff5bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/fe034ef0ee36470d8eb31e14a0b69ed6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义Ext JS组件类

在Ext JS 中如何自定义一个组件类呢？实现方式是继承Ext.Component ，定义一个自己的组件类。那么，这个组件类该怎样扩展自己的功能呢？举例来说，有这

╰半夏微凉°/ 2024年03月26日 12:23/ 0 赞/ 27 阅读

相关 Ext JS中定义和使用类Ext JS风格的html 按钮

Ext JS 的按钮样式如下： ![在这里插入图片描述][86b3c540fedb453cbe09597eb860a25e.png] 按钮的背景色默认为应用的主色调或是灰色

心已赠人/ 2024年03月17日 21:19/ 0 赞/ 36 阅读

相关 Helm组件，模板自定义

包管理工具helm主要解决安装服务的问题。可通过仓库下载想要的yaml文件。修改文件就可以安装想要的系统信息。 ![在这里插入图片描述][watermark_type_Zm

小灰灰/ 2022年09月05日 11:29/ 0 赞/ 148 阅读

相关 Android 自定义preference组件

上篇博文代码实现了Android自带的preference组件，本文将通过实例讲解自定义preference组件。主要通过以下几步来实现： 1.定义需要的layout布局

向右看齐/ 2022年08月24日 06:06/ 0 赞/ 305 阅读

相关自定义引入 swiper 组件

Swiper是目前应用较广泛的移动端网页触摸内容滑动js插件，在项目中引入也很方便。但是有时候，我们只需要swiper的部分功能，这样也可以减少swiper文件

「爱情、让人受尽委屈。」/ 2022年05月09日 00:50/ 0 赞/ 324 阅读

相关 echarts组件自定义---tooltip

tooltip: { trigger: 'axis', axisPointer: {

冷不防/ 2022年04月13日 04:54/ 0 赞/ 321 阅读

相关 js 操作数组函数-自定义

1.删除数组中指定的元素 / 参考实例 foreach = function (obj, insp){ 　　if(obj== null &

以你之姓@/ 2022年04月10日 08:23/ 0 赞/ 176 阅读

相关 js 自定义吐司 toast 组件

-------------------- 要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮) ----

约定不等于承诺〃/ 2021年11月13日 21:06/ 0 赞/ 425 阅读

相关 Vue.js组件通信之自定义事件

组件通信从父组件向子组件通信，通过props传递数据就可以了，但Vue组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示： ![在这里插入图片描述

╰+攻爆jí腚メ/ 2021年08月13日 21:42/ 0 赞/ 397 阅读

相关 flume之自定义sink组件

flume内部提供了很多种sink，如：logger、file\_roll、avro、hdfs、kafak、es等，方便直接将event数据对接到本地磁盘、或者其他第三方存储中

阳光穿透心脏的1/2处/ 2021年06月24日 15:57/ 0 赞/ 558 阅读