工作中项目需要extjs，所以学习一下，做个笔记防止遗忘了。以后回忆起来也方便。

首先下载extjs官网地址：http://extjs.org.cn/

下载以后的目录结构：

先写一个入门的程序吧自定义类实现

  1. 新建web项目。
  2. 导入js文件。
  3. 项目中引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">
<script src="../ExtJS4.2/ext-all.js"></script>
<script src="d1.js"></script>
</head>
<body>
<h1>ExtJS4.2学习</h1>
<hr />
作者：springok
<h2>ExtJS 中自定义类</h2>
</body>
</html>

d1.js:

Ext.define('springok.Demo',{
    name:'springok',
    hello:function(){
        return 'Hello'+this.name;
    }
});  

Ext.onReady(function(){
    alert(new springok.Demo().hello());

});

测试：



很简单的主要就是类的实例化和调用。

测试一下类的实例化和调用的过程oo思想的体现：

d1.js修改为：

Ext.define('springok.Demo',{
    name:'ThinkDiary',
    hello:function(){
        return 'Hello'+this.name;
    }
}); 

Ext.define('springok.Window',{
    extends:'Ext.Window',
    title:'springok',
    initComponent:function(){ //初始化  先执行initComponent 再执行自定义初始化构造函数
        document.write( "initComponent执行......." );
        Ext.apply(this,{//将一批属性复制给当前对象
            items:[{
                html:'11111'
            },{
                html:'2222222'
            }]
        });
        this.callParent();//快捷调用父类函数
    },
    mixins:['springok.Demo'], //多重继承
    config:{ //辅助功能属性
        title:'demo'
    },
    statics:{ //定义类静态成员
        TYPE_DEFAULT:1
    },
    constructor:function(){ //自定义初始化构造函数，先执行此再执行initComponet
        //do something init
        document.write( "constructor执行......." );
    }  ,
    layout : 'fit'
}); 

new springok.Window();
Ext.onReady(function(){
    //new springok.DemoWindow();

});

**

接下来看下面向对象如何实现：

**

Ext.define("springok.Person", {
    Name: '',
    Age: 0,
    //普通的方法
    Say: function (msg) {
        Ext.Msg.alert(this.Name + " Says:", msg);
    },
    //构造器
    constructor: function (name, age) {
        this.Name = name;
        this.Age = age;
    }
});

Ext.onReady(function(){
//实例化类调用方法
    new springok.Person('springok.Person',18).Say("springok");

});

测试：

ExtJS学习(一)Ext自定义类实现的更多相关文章

  1. Ext JS学习第六天 Ext自定义类（一）

    此文来记录学习笔记 •我们在之前的学习,已经对ExtJS有了一个初步的认识,那么如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的.那么我 ...

  2. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

  3. Java学习笔记day06_自定义类_ArrayList

    1.自定义类class 使用类的形式, 对现实中的事物进行描述. 类是引用数据类型. 事物: 方法,变量. 方法:事物具备的功能. 变量:事物的属性. 格式: public class 类名{ //属 ...

  4. Ext JS学习第七天 Ext自定义类，继承（二）

    此文来记录学习笔记 一个简单ext继承的栗子 Ext.onReady(function () { Ext.define('Person',{ config:{ name:'z3' } , constr ...

  5. ExtJS学习(二)Ext组件模型

    Ext中所有的组件都继承自Ext.component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期,这样在后续对这些组件进行维护管理时将更加便捷,同时也保证了在进行布局时的便利. 组件 ...

  6. lumen框架学习01——引入自定义类和函数

    引入自定义的functions.php文件,首先把functions.php文件放在app的目录下,然后通过根目录的composer.json文件引入,具体操作如下图: 引入类文件也是一样,具体可参考 ...

  7. 20. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store,使得从远程JSON数据创建stores更为方便的简单辅助类.JsonStore合成了Ext.data.HttpProxy与Ext ...

  8. Extjs学习笔记——Ext.data.JsonStore使用说明

    Ext.data.JsonStore继承于Ext.data.Store.使得从远程JSON数据创建stores更为方便的简单辅助类. JsonStore合成了Ext.data.HttpProxy与Ex ...

  9. extjs学习之Ext.selection.CheckboxModel

    Ext.onReady( function() { var store=Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:[ ...

随机推荐

  1. 【USACO】 奶牛会展

    题目背景 奶牛想证明它们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N 头奶牛进行 了面试,确定了每头奶牛的智商和情商. 题目描述 贝西有权选择让哪些奶牛参加展览.由于负的智商或情商会造成 ...

  2. 【USACO17JAN】Promotion Counting晋升者计数 线段树+离散化

    题目描述 The cows have once again tried to form a startup company, failing to remember from past experie ...

  3. 使用WebStorm进行javascript调试

    曾经的选择是使用火狐浏览器的Firebug插件,具体的用法到时候在细说,这篇文章登场的是开发静态网页及javascript的利器--webstorm. 一.相关软件安装和配置 安装WebStorm  ...

  4. cocos2d-x-3.x 学习总结（一）

    这周学习了<cocos2d-x 3.x 游戏开发之旅>的第三章,做如下总结: 1.关于创建标签对象 书中是 Label* label = Label::create(); 可是总是提示出错 ...

  5. Ubuntu16.04下安装jdk1.8过程

    笔者环境:腾讯云服务器 Ubuntu16.04 x64 一 . 去oracle官网下载对应的jdk 下载地址:http://www.oracle.com/technetwork/java/javase ...

  6. 实践详细篇-Windows下使用VS2015编译的Caffe训练mnist数据集

    上一篇记录的是学习caffe前的环境准备以及如何创建好自己需要的caffe版本.这一篇记录的是如何使用编译好的caffe做训练mnist数据集,步骤编号延用上一篇 <实践详细篇-Windows下 ...

  7. DDD实战进阶第一波(八)：开发一般业务的大健康行业直销系统（业务逻辑条件判断最佳实践）

    这篇文章其实是大健康行业直销系统的番外篇,主要给大家讲讲如何在领域逻辑中,有效的处理业务逻辑条件判断的最佳实践问题. 大家都知道,聚合根.实体和值对象这些领域对象都自身处理自己的业务逻辑.在业务处理过 ...

  8. Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选

                需要实现的功能:选中父节点对应子节点全选:不选中父节点,对应子节点也不选中 如下图所示,选中车队,对应车队中车辆也全部选中,以实现车队中所有车辆在地图上的显示. 选中cqupt ...

  9. Spring错误之org.springframework.beans.factory.BeanNotOfRequiredTypeException: Bean named 'bookService' is expected to be of type 'pw.fengya.tx.BookService' but was actually of type 'com.sun.proxy.$Proxy1

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'cas ...

  10. 百钱买百鸡问题Java

    //百钱买百鸡public class baiqianbaiji { static void BQBJ(int m,int n)//m为钱的总数,n为鸡数 { int z; for(int x = 0 ...