十三、自定义组件

最新推荐文章于 2021-10-25 10:50:47 发布
最新推荐文章于 2021-10-25 10:50:47 发布
阅读量914 收藏
点赞数
分类专栏： ExtJS 文章标签： function extjs stylesheet html google 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwebsite/article/details/7992231
版权

有时候需要自定义组件使得Web程序更加丰富，ExtJS也提供了自定义组件的功能，主要通过Ext.define来实现。下面先新建一个MyPanel.html文件，其内容如下：

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN">

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no">

   <title>自定义Panel</title>

   <link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/>

    <scripttype="text/javascript"src="bootstrap.js"></script>

    <script type="text/javascript"src="MyPanel.js"></script>

</head>

<body>

<div id="myDiv"width="100%" height="100%" />

</body>

</html>

然后新建一个MyPanel.js和XZYPanel.js文件，自定义的组件名称为XZYPanel，XZYPanel.js文件的内容如下：

Ext.define('XZY.XZYPanel',{

    extend:'Ext.panel.Panel',  //继承的组件

    alias:'widget.mypanel',    

   requires: ['Ext.window.MessageBox'],

   title:'这是自定义的组件',

   html:'你好，这是来自于自定义的组件!<br/>这是显示的内容。',

   height:300,

   initComponent : function(){ //初始化组件函数

       Ext.Msg.alert('自定义组件','初始化');     

       this.callParent();   //返回至父容器中,这句是必须的        

   },   

   myPara01:'这是自定义的参数',   //这是自定义的参数

   showInfo:function(msg){      //这是自定义的函数

       alert('myPara01:'+this.myPara01+'\n消息:'+msg);

    },

   showSizeInfo:function(){      //这是自定义的函数

       var dom = Ext.get(this.body.dom);

       Ext.Msg.alert('自定义组件尺寸信息','DOM区域宽度：'+dom.getWidth()

           +'<br/>高度：'+dom.getHeight());

    }

});

从上面的代码可知，自定义的组件XZY.XZYPanel继承自Ext.panel.Panel，所以它具有Panel的所有配置项、属性和方法，如title、html、height等，也可以自定义一些属性和方法，如myPara01、showInfo()、showSizeInfo()等。值得注意的是initComponent函数为组件初始化函数，默认也可以不添加，但是有时候在涉及一些参数配置的情况下可以通过添加该函数在初始化组件的时候进行一些操作，在该函数中最后一定要添加this.callParent()，否则可能无法返回至父容器中。另外，this.body.dom为该组件所在的DOM，有时候要添加地图（如百度地图、Google地图），就可以添加至该DOM上，同时也可以设置该DOM的属性，如高度、宽度、颜色样式等，此处获取了它的宽度和高度。

在XZYPanel.js文件中添加了自定义的XZYPanel组件之后，接下来就开始使用自定义的组件，在MyPanel.js文件中添加如下内容：

Ext.Loader.setConfig({enabled: true});//允许设置参数

Ext.Loader.setPath('XZY', '');  //设置路径

 

Ext.onReady(function(){

    var tempPanel = Ext.create('XZY.XZYPanel',{

       myPara01:'这个参数已经被我修改了',

       renderTo:myDiv

    });

    tempPanel.showInfo('Hello,world');//调用XZYPanel的showInfo函数

    tempPanel.showSizeInfo();//调用XZYPanel的showSizeInfo函数

});

调用该自定义的组件和前面我们使用ExtJS中的组件方式基本一样，只是在前面需要设置其所在路径，由于本例中XZY.XZYPanel（XZYPanel.js文件）和MyPanel.js文件在同一个路径下，所以只需要设置XZY的路径为’’即可。保存这三个文件（MyPanel.html、MyPanel.js、XZYPanel.js）之后，浏览MyPanel.html网页，其结果如下图所示：




大侠肖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Winform自定义组件库
07-14
资源为Winform用户自定义组件库，是自己平时做项目用到的组件以及参考晚上那些有特效组件封装的组件库，中间付出了很多努力，攻克了很多难点，大家喜欢的话，请大家多多给予鼓励，目前是V1.0版本，后期不断更新。...
Ext.define 方法
沉底的石头
09-17 2万+
define(String className, Object data, Function createdFn): Ext.Base  从上面可以看出，define方法最多接受3个参数，className(类的名字)，data(Object对象)，createdFn(回调函数)。 常用于 define a class，override or extend 一个类的proper
extjs的Ext.define()函数的用法以及注意点。
看不过的黑工坊
10-14 5922
译自：http://docs.sencha.com/extjs/4.2.3/#!/api/Ext define( className, data, [createdFn] ) : Ext.Base Defines a class or override. A basic class is defined like this: Ext.define('My.aweso
ExtJS 4.2 教程-03：使用Ext.define自定义类
weixin_30248399的博客
08-22 361
转载自起飞网，原文地址：http://www.qeefee.com/extjs-course-3-define-classes ExtJS 4.2 教程-01：Hello ExtJS ExtJS 4.2 教程-02：bootstrap.js 工作方式 ExtJS 4.2 教程-03：使用Ext.define自定义类 ExtJS 4.2 教程-04：数据模型 ExtJS 4.2 教程-...
5、ExtJs——Ext基础架构--define定义一个类
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
09-17 1万+
如果要学好ExtJS，对于javascript是必须的，也就是说，对于理解ExtJS底层基础架构的理解也是必须的。那么我们现在就开始学习ExtJS的基础架构。 如何创建一个Ext的类、创建类的复杂流程 - Ext.js和Ext-more.js深入解析 - Ext对原生javascript类的扩展 - Ext操作Dom - Ext开始响应事件
Ext4 创建类 Ext.define
ASD1415926的专栏
10-13 1154
Ext.define(className, members, onClassCreated); className 要声明的类的名字 members 一个对象，包含类成员 onClassCreated 一个可选的回调函数，因为新的异步加载机制，这个回调函数会很有用，当所有依赖已经引入，并且类完全创建好了之后，这个函数会被调用 继承： Ext.define("MyApp.M
Ext.define细节分析
weixin_30617695的博客
09-02 216
自己写的其实还是不懂，再看看别人写的吧Extjs4 源码分析系列一 类的创建过程https://www.cnblogs.com/creazyguagua/p/4302864.htmlhttp://www.cnblogs.com/creazyguagua/p/4667768.htmlExtJs4 makeCtor初步理解！http://blog.csdn.net/wjy397/article/d...
SashulinMessageBroker自定义组件工程
03-08
SMB创建的消息流是由组件构成的，默认提供了General、Database、MessageQueue、Socket、WebService、Http、Internet等系列常用组件，如果不满足业务需求，可以进行自定义组件开发。本项目是创建组件的例子，由idear...
angular4自定义组件详解
08-29
主要为大家详细介绍了angular4自定义组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android编程自定义组件实例详解
08-30
主要介绍了Android自定义组件,结合实例形式分析了Android自定义组件的原理、实现方法及相关操作技巧,需要的朋友可以参考下
VUE 自定义组件模板的方法详解
10-16
主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下
ExtJS4——Ext.onReady、Ext.define、Ext.create基础方法
ヾ凉秋的博客
10-25 924
Ext.onReady 说明：onReady内的语句块会在页面上下文加载后再执行 例子： rel="stylesheet" type="text/css" /> Ext.onReady(function () { //获取页面元素，元素ID为“onReady” var input = Ext.get("onReady"); Ext.Msg.alert("隐藏控件内容",input.dom.value); });
ExtJs学习一 Ext.define 与 Ext.create 方法总结
stryker的专栏
07-13 1万+
/** *@summary Ext.define 与 Ext.create方法的学习 */ Ext.define('TestDefine', { extend:'Ext.window.Window', alias: 'haha', width: 400,
玩转Extjs5之使用Ext.define自定义类（三）
六指琴魔
03-19 1552
一、 ExtJS5  自定义类         ExtJS5 允许用户使用Ext.define 自定义类。本文将通过实例介绍如何使用Ext.define自定义类。由于作者本人是学java的，Java在学习过程中，自定义类喜欢用“Person”，因此本文也用Person作为例子吧。具体代码如下： Ext.onReady(function(){
ExtJS4中的requires使用方法
sd396791336的专栏
12-03 7037
ExtJS4的requires是新增的机制，主要是实现异步加载机制。这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件，提高了加载速度和用户等待时间。 requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录，然后在需要用到对应js文件的时候使用Ext.require进行加载。 文件的存储结构如下所示： ux文件
ExtJS快速入门指南
热门推荐
励志的蜗牛
11-15 2万+
1 ExtJS快速入门指南 一、ExtJS 框架简介.......................................................................................................................... 2 二、如何使用Ext.....................................
Extjs 学习总结-Ext.define自定义类
weixin_34360651的博客
05-16 145
本教程整理了extjs的一些基本概念及其使用，包括自定义类（Ext.define）、数据模型、代理等。本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自定义类的代码： var Person = function (name, age) { this.Name = ""; this.Age =...
一、ExtJS4.1安装与配置
肖泽云
09-18 2273
1、首先，在官方网站下载http://www.sencha.com/products/extjs/，下载最新版本的ExtJS，下载之后将文件解压，如下图所示。 2、下载开发工具（主要是Javascript的智能提示）Spket，如果已经安装了Eclipse，则只需要下载Spket的Eclipse插件即可，下载地址http://www.spket.com/，下载直接解压，有两个文件夹（fe
matlab自定义组件
最新发布
04-07
Matlab中的自定义组件是指用户可以根据自己的需求创建的可重复使用的代码模块。这些组件可以包括函数、类、工具箱等，用于实现特定的功能或解决特定的问题。 在Matlab中，可以使用以下几种方式创建自定义组件： 1....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值