Ext继承Extends学习

最新推荐文章于 2021-03-17 11:44:02 发布
最新推荐文章于 2021-03-17 11:44:02 发布
阅读量639 收藏
点赞数
分类专栏： js&html&css 文章标签： ext js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--ExtJs框架开始-->
    <script type="text/javascript" src="/Ext/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="/Ext/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
    <!--ExtJs框架结束-->
    <script type="text/javascript">
        Ext.onReady(function () {
            //----------------继承前开始---------------//
            var Panel1 = new Ext.Panel({
                title: '标题',
                width: 500,
                height: 100,
                html: '好好学习'
            });
            var Panel2 = new Ext.Panel({
                title: '标题',
                width: 500,
                height: 100,
                html: '天天向上'
            });
            //----------------继承前结束---------------//
            //----------------继承后开始---------------//
            var MyPanel = Ext.extend(Ext.Panel, {
                title: '标题',
                width: 500,
                height: 100
            });
            var MyPanel1 = new MyPanel({
                html: '好好学习'
            });
            var MyPanel2 = new MyPanel({
                html: '天天向上'
            });
            //----------------继承后结束---------------//
            //定义新的类FormPanel，并且把变化的属性暴露出来以便以后继承
            var MyFormPanel = Ext.extend(Ext.form.FormPanel, {
                title: '属性外露',
                width: 500,
                labelWidth: 80,
                initComponent: function () {
                    this.items = [{
                        xtype: 'textfield',
                        fieldLabel: '姓名',
                        id: this.usernameid,//变化的部份
                        name: 'username',
                    }];
                    this.buttons = [{
                        text: '确 定',
                        handler: this.submit,//变化的部份
                        scope: this
                    }, {
                        text: '取 消',
                        handler: this.cancel,//变化的部份
                        scope: this
                    }];
                    MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent
                }
            });
            //创建测试对象1
            var testForm1= new MyFormPanel({
                usernameid:'username',
                submit: function () {
                    alert(Ext.getCmp('username').getValue());
                },
                cancel: function () {
                    testForm1.getForm().reset();
                }
            });
            //创建测试对象2
            var testForm2=new MyFormPanel({
                title: '覆盖属性',
                usernameid:'usernameid',
                submit: function () {
                    alert(this.usernameid);
                },
                cancel: function () {
                    testForm2.getForm().reset();
                }
            });
            //创建窗体
            var win = new Ext.Window({
                title: '窗口',
                id: 'window',
                width: 500,
                height: 620,
                resizable: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                items: [Panel1, Panel2, MyPanel1, MyPanel2, testForm1,testForm2]
            });
            win.show();
        });
    </script>
</head>
<body>
    <!--
说明：
(1)var MyPanel = Ext.extend(Ext.Panel, {
                title: '标题',
                width: 500,
                height: 100
            });
    Ext.extend 用来继承已有的类 这里给 title,width,height加上了默认值
    第12行至37行，简单介绍了组件的继承，如：平时我们在用MessageBox.show()时，一般会有4种情况，“成功”，“失败”，“出错”,“确认”。。
    我们通过简单的继承，就可以把这4类文本框封装的很好，每次使用时new我们的新类即可。
(2)第38--82行，我做了个组件套用子组件的例子，给组件附加子组件须在 initComponent: function () {} 初始化组件时加入，
    并且在完成后，还要显示的调用  MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent
    我们在开发中，常会用到 GridPanel，会定义分页组件，按钮等，经过这个实例，我们可以在把原有的 GridPanel再包一层，以保证软件中的“单一原则”。
    其中变化的部分我们可以通过定义新属性把他外露出来。如上例所示。
-->
</body>
</html>
陶龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP类继承 extends使用介绍
12-19
【PHP类继承与`extends`关键字】 类继承是面向对象编程的一个重要概念，它允许一个类（称为子类或派生类）从另一个类（称为父类或基类）继承特性，包括属性和方法。在PHP中，使用`extends`关键字实现类继承。通过...
ext继承重写
09-21
在EXT JS这个强大的JavaScript框架中，"继承"和"重写"是两个核心概念，它们在构建可复用和...通过深入学习和实践`ext_extends`中的示例，开发者可以更好地掌握EXT JS的这部分核心知识，从而提升开发效率和代码质量。
Ext布局的宽度问题
tonynju
12-31 219
Ext布局的宽度问题 出现问题: 在一个panel中添加子GridPanel,子GridPanel宽度超过父Panel宽度 通过设置父Panel的layout,子GridPanel中设置相应layout的配置 比如父Panel中设 layout:'anchor' 子GridPanel中: anchor: '100%'...
extJs 2.0学习笔记(Ext.Panel篇三)
火焰雪人
07-16 3765
 上一篇中把panel的config部分的文档翻译了一下，事实上，好多东西都加上了我自己的看法，也不能说完全是翻译。真是个苦差使啊。这一次主要是来研究一下Ext.Panel的属性、函数。属性：body : Ext.Element它是指向panel的body的Element引用。它被用于包含html内容。可以通过html config，或者是autoLoad config，又或者是通
ExtJS 组件_button按钮配置-属性-方法详解
行者彡的博客
03-17 5705
https://docs.sencha.com/extjs/7.3.0/modern/Ext.html Ext.QuickTips.init(); var buttonName =new Ext.Button({ id:"buttonName", text:"Button组件基本用法", tooltip:"提示信息：Button组件基本用法", //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init(); tooltipType:"title",//定义显示提示信息的类型，有qti
ext继承的两种写法
hqmln的博客
11-08 247
在使用extjs时，因为特殊的业务要求，extjs提供的功能不能满足业务逻辑，所以需要对其进行扩展，也就是所谓的继承， 在extjs中继承有两种写法 1。在ExtJS中使用Ext.extend()函数实现继承功能： /* *扩展树的多选模式，加了写业务逻辑方法validNodeHasFolder，并重写了select方法加入了业务逻辑 **/ Ext.ns("Ext.targsoft"...
EXT 中 类的继承
gkuiyj的专栏
07-31 168
深入剖析ExtJS 2.2实现及应用连载 版权所有，转载标明出处和作者及版权信息 作者：彭仁夔 QQ：546711211 Blog:http://www.cnblogs.com/jxnuprk或htttp://jljlpch.iteye.com 在javaScript中，面向对象的类是通过函数来模拟的。函数的prototype中的方法和属性可以看作是类的实例方法和属性。函数的的方法...
Java的extends使用方法
01-20
理解继承是理解面向对象程序设计的关键。在Java中，通过keywordextends继承一个已有的类，被继承的类称为父类(超类，基类)，新的类称为子类(派生类)。在Java中不同意多继承。 　（1）继承 class Animal{ void eat...
JavaScript中类的继承（ES6、class、extends、super）
01-08
`extends`关键字是实现继承的关键，如`class ColorTest extends Test`表示ColorTest类继承自Test类。这样，ColorTest将拥有Test类的所有公共属性和方法。如果在子类中没有定义构造函数，子类将继承父类的构造函数。...
详解vue mixins和extends的巧妙用法
11-29
- **数据处理**：在数据（`data`）处理上，`extends`的行为更像传统的继承，而`mixins`则更注重功能的融合。 ### 使用建议 - 当你需要从多个组件中抽取共同功能时，可以使用`mixins`。 - 如果你想让一个组件直接...
ExtJs中继承的实现与理解—extend
热门推荐
司建伟的专栏
07-27 1万+
以下总结参考网络上资源 Ext中实现类的继承Js代码  extend (Object subclass,Object superclass,[Object overrides] : Object)   第一个参数：子类 第二个参数：父类 第三个参数：要覆盖的属性。 这里需要强调一
Ext_继承_Ext.extend
66
04-12 2104
/*Ext.extend继承Ext.extend(要继承的Ext父类,子类自定义配置信息)*///创建命名空间Ext.namespace("My.Control");My.Control.Window = Ext.extend(Ext.Window,{ //子类的构造函数，参数为示例化子类时传入自定义配置信息 constructor:function(con
Ext中继承的用法
陌上霜寒的专栏
10-20 140
在使用Ext的时候，我们有时候可能不用Ext自带的一些类，而是自己去创建一个自己定义的类。Ext很好的提供了这种方便。那就是在写JS文件的时候自己使用Ext.extend();来完成。 完整的解释是如下：Ext.extend(Object subClass,Object supperClass,[Orrider ]);其中subClass是我们所写的子类，supperClass是我们要继...
EXTJS的继承机制
Java Dynamic的专栏
06-30 1573
1.对象的继承 对象继承是子类对象复制其父类对象的属性和方法，从而得到父对象的属性和功能. Ext的对象继承是通过Ext.apply方法获得，实现原理是通过对象的反射实现. code: Ext.apply = function(o,c,defaults){     if(defaults) Ext.apply(o.defaults);     if(o&& c &&
ext.js继承
旭哥的博客
06-14 673
ext.js  -- extend继承第一个参数：子类 第二个参数：父类 第三个参数：要覆盖的属性。 这里需要强调一下，子类继承下来的是父类中通过superclass.prototype方式定义的属性（包括用此方法定义的函数）,而不继承superclass中的定义的属性和方法，如果子类中的方法名与父类中相同则会覆盖。例子    父类Js代码  BaseClass = function() {   ...
js继承和Ext继承
pgLi
04-24 278
原型链继承 var supper = function(name){ this.name = name; this.cfg = ['name']; this.setNmae = (name)=>{ this.name = name; }; this.getNmae = ()=>{ return this.name; }; }; var ...
Ext 继承
tinalucky的专栏
04-18 127
一个Ext继承模板： [code="javascript"]MyComponent = Ext.extend ( Ext.some .component , { //缺省构造参数，可被自定义设置覆盖 propA: 1 , initComponent: function ( ) { //在组件初始化期间调用的代码 ...
继承extends代码编写例子
最新发布
08-15
下面是一个使用继承和extends关键字的Java代码编写例子： ```java // 定义一个父类Animal class Animal { protected String name; public Animal(String name) { this.name = name; } public void eat() { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值