Ext.widget 或Ext.createWidget 创建对象。”小红” })

创建对象的道:

题目:

    使用new
关键字创建对象。

复制代码 代码如下:

      new  classname ([config])

try{
var me = Man({ fullname: “小红” });
var she = new Man({ fullname: “小红” });
console.group();
console.info(“我的名是:” + me.attr(“fullname”) + “\n我的性是:” +
me.attr(“gender”));
console.groupEnd();
/*——[实践结果]——
自身之讳是:小红
自我的性别是:<用户不输入>
——————*/
me.attr(“fullname”, “小明”);
me.attr(“gender”, “男”);
me.fullname = “废柴”;
me.gender = “人妖”;
she.attr(“gender”, “女”);
console.group();
console.info(“我之名字是:” + me.attr(“fullname”) + “\n我之性是:” +
me.attr(“gender”));
console.groupEnd();
/*——[施行结果]——
本身之名是:小明
自我的性别是:男
——————*/
console.group();
console.info(“我的名是:” + she.attr(“fullname”) + “\n我的性别是:” +
she.attr(“gender”));
console.groupEnd();
/*——[推行结果]——
自身的讳是:小红
本身之性是:女
——————*/
me.attr({
“words-limit”: 3,
“words-emote”: “微笑”
});
me.words(“我好看视频。”);
me.words(“我们的办公室最好尽如人意了。”);
me.words(“视频里花真的多!”);
me.words(“我平常犹看优酷!”);
console.group();
console.log(me.say());
/*——[推行结果]——
小明微笑:”我好看视频。我们的办公最理想了。视频里花真的多!”
——————*/
me.attr({
“words-limit”: 2,
“words-emote”: “喊”
});
console.log(me.say());
console.groupEnd();
/*——[实践结果]——
有点明喊:”我喜爱看视频。我们的办公最精彩了。”
——————*/
}catch(e){
console.error(“执行出错,错误信息: ” + e);
}

    使用Ext.create方法创建。

知识点:
(1)JS面向对象基础:ECMA-262拿对象定义为:“无序属性的集纳,其性质可以分包基本值、对象或函数”。
(2)JS创建对象的艺术:
  (a)工厂模式:用函数来封装以特定接口创建对象的细节。
      function createPerson(name, age, job){
          var o = new Object();
          o.name = name;
          o.age = age;
          o.job = job;
          o.sayName = function(){
          alert(this.name);
          };
      return o;
      }
    var person1 = createPerson(“Nicholas”, 29, “Software
Engineer”);
    var person2 = createPerson(“Greg”, 27, “Doctor”);
    缺点:工厂模式则缓解了创办多独相识对象的题目,但也绝非缓解对象识别的问题(即什么理解一个对象的类别)。
  (b)构造函数模式:ECMAScript中之构造函数可以用来创造特定类型的靶子。可以创造于定义的构造函数,从而定义自定义对象类型的习性与法。
      function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
        alert(this.name);
        };
      }
      var person1 = new Person(“Nicholas”, 29, “Software
Engineer”);
      var person2 = new Person(“Greg”, 27, “Doctor”);
    缺点:使用构造函数的重点问题,就是每个方法都使在每个实例上再创设同周。不要遗忘了——ECMAScript中的函数是目标,因此各级定义一个函数,
    就是实例化一个目标。
  (c)原型模式:我们创建的每个函数都发一个prototype(原型)属性,这个特性是一个指南针,指向一个目标,而者目标的用是富含可以由特定类型
    的有着实例共享的特性和措施。使用原型对象的补是可被具备目标共享它涵盖的性与方式
      function Person(){
      }
      Person.prototype.name = “Nicholas”;
      Person.prototype.age = 29;
      Person.prototype.job = “Software Engineer”;
      Person.prototype.sayName = function(){
        alert(this.name);
      };
      var person1 = new Person();
      person1.sayName(); //”Nicholas”
      var person2 = new Person();
      person2.sayName(); //”Nicholas”
      alert(person1.sayName == person2.sayName); //true
    缺点:原型中持有属性是让众实例共享的,这种共享于函数非常方便。但是对引用类型值的性来说,问题即使比较突出了。
    (d)组合使用构造函数模式及原型模式:创建于定义类型的尽广大方法,就是下组合以构造函数模式与原型模式。构造函数模式用于定义实例属性,
      而原型模式用于定义方法和共享的特性。
      function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = [“Shelby”, “Court”];
      }
      Person.prototype = {
        constructor: Person,
        sayName : function () {
        alert(this.name);
        }
      };
      var person1 = new Person(“Nicholas”, 29, “Software
Engineer”);
      var person2 = new Person(“Greg”, 27, “Doctor”);
      person1.friends.push(“Van”);
      alert(person1.friends); //”Shelby,Court,Van”
      alert(person2.friends); //”Shelby,Court”
      alert(person1.friends === person2.friends); //false
      alert(person1.sayName === person2.sayName); //true
答案:

      Ext.create(classname,[config])

复制代码 代码如下:

    new Ext.Viewport({})

<!DOCTYPE html>
<html>
<head>
<style type=”text/css” rel=”stylesheet”>
</style>
<title></title>
</head>
<body>
</body>
<script type=”text/javascript”>
window.onload=function()
{
var Man;
//+++++++++++答题区域+++++++++++
Man=function(obj){
if(!(this instanceof Man))
{
return new Man(obj);
}
this.attrObj=obj||{};
this.wordsObj=[];
}
Man.prototype={
constructor:Man,
words:function(word){
word!=undefined&&this.wordsObj.push(word);
},
attr:function(attribute,attributeValue)
{
var defaultVaule=”<用户不输入>”;
if(arguments.length==2){
this.attrObj[attribute]=attributeValue;
}
else if(!(attribute instanceof Object))
{
if((this.attrObj[attribute]===undefined))
{
return defaultVaule;
}
else
{
return this.attrObj[attribute];
}
}
else{
for(property in attribute)
{
this.attrObj[property]=attribute[property];
}
}
},
say:function()
{
var limit=this.attrObj[‘words-limit’],
outputString,
wordsLen=this.wordsObj.length;
outputString=this.attr(“fullname”)+this.attr(“words-emote”)+”:”;
for(var i=0;i<limit;i++)
{
outputString+=this.wordsObj[i];
}
return outputString;
}
};
//+++++++++++答题结束+++++++++++
try{
var me = Man({ fullname: “小红” });
var she = new Man({ fullname: “小红” });
console.group();
console.info(“我之讳是:” + me.attr(“fullname”) + “\n我之性是:” +
me.attr(“gender”));
console.groupEnd();
/*——[行结果]——
自家之名字是:小红
本身之性是:<用户不输入>
——————*/
me.attr(“fullname”, “小明”);
me.attr(“gender”, “男”);
me.fullname = “废柴”;
me.gender = “人妖”;
she.attr(“gender”, “女”);
console.group();
console.info(“我之名字是:” + me.attr(“fullname”) + “\n我之性是:” +
me.attr(“gender”));
console.groupEnd();
/*——[履结果]——
自家之名是:小明
自身的性是:男
——————*/
console.group();
console.info(“我的名是:” + she.attr(“fullname”) + “\n我的性别是:” +
she.attr(“gender”));
console.groupEnd();
/*——[施行结果]——
自己的名字是:小红
自家的性别是:女
——————*/
me.attr({
“words-limit”: 3,
“words-emote”: “微笑”
});
me.words(“我爱好看视频。”);
me.words(“我们的办公室最好理想了。”);
me.words(“视频里花真的多!”);
me.words(“我平常都看优酷!”);
console.group();
console.log(me.say());
/*——[施行结果]——
小明微笑:”我欣赏看视频。我们的办公室最好美好了。视频里花真的多!”
——————*/
me.attr({
“words-limit”: 2,
“words-emote”: “喊”
});
console.log(me.say());
console.groupEnd();
/*——[尽结果]——
些微明喊:”我喜欢看视频。我们的办公室最好帅了。”
——————*/
}catch(e){
console.error(“执行出错,错误信息: ” + e);
}
}
</script>
</html>

    修改为Ext.create(‘Ext.Viewport’,{})

若或许感兴趣的章:

  • js面向对象之广泛创建对象的几乎种植方式(工厂模式、构造函数模式、原型模式)
  • js面向对象
    多种创建对象方法小结
  • 读书javascript面向对象
    掌握创建对象的9种艺术
  • 详解JavaScript因面向对象之创建对象(1)
  • 详解JavaScript因面向对象之创建对象(2)
  • JavaScript创建对象的常用方式总结
  • JS
    创建对象(常见的几种植方式)
  • javascript的函数、创建对象、封装、属性与方式、继承
  • JavaScript创建对象的写法
  • javascript中创造目标的几栽方法总结
  • JavaScript面向对象程序设计创建对象的章程分析

 

  Ext.widget 或Ext.createWidget 创建对象

    使用Ext.ns
或者Ext.namespace  定义命名空间

      Ext.ns 是  Ext.namespace 的简写

      定义全局变量的语法:Ext.namespace(

        namespace1,namespace2,namespace3

    )   

  namespace1 是命名空间的讳。

    Ext.namespace(“Myapp”)      

 

  使用Ext.define
定义新类。

    语法:
Ext.define(classname,properties,callback);

      classname 定义新的类名。

      properties 新类的布局对象,对象里含了近乎的属性集对象。

      callback:回调函数,当类创建好后执行该函数。

 

    apply 和applylf 方法

      apply 方法中之来意是以有配置对象的分子复制到目标

    数据及其类型检测

      typeOf 检测变量的路

        语法:Ext.typeof(v)
 v是设检测的变量

      isEmpty  检测值是否也空

        语法:
Ext.isEmpty(v,allowEmptyString)

          v是只要检测的价值,  allowEmptyString
 默认为false,表示不

      允许空字符串,反过来,空字符串也归true;
当返回值为true时代表也空,false表示不也空。

    isObject 检测值是否为JavaScript 的对象。

      语法:
Ext.isObject(v)

        islterable 检测值是否可以迭代。

      语法:
Ext.islterable(v)

        isFunction 检测值是否为函数

      语法:
Ext.isFunction(v)

   lterate   对数组或者目标开展迭代。

      语法:
Ext.iterate(object, fn,scope);

        object 是若拓展迭代操作的数组或者目标

          fn 是要拓展迭代操作的函数,

            scope 是作用域,f该办法无回来值。

        Clone

          可以针对克隆数组,对象,DOM
节点和日期等数码,以免保持原有的针对。

          语法:
Ext.clone(item)

        item: 要复制的累组, 对象,DOM
节点或日期,返回克隆后底。

  Id

    产生id

      语法:
Exd.id([el,prefix]) 101

  getBody

      返回时document
对象的body 元素

      语法
Ext.getBody()

  getHead

    返回docuemnt
对象的head 元素

    语法: Ext.getHead()

  getDoc

    返回document 对象

    语法: Ext.getDoc()

  Destroy

    删除对象及其事件,从DOM 中
删除节点。

    语法:
Ext.destroy(obj1,obj2,…)

  urlAppend

    为url
追加查询字符串。

    语法:Ext.urlAppend(url,s)

  addBehaviors

    为配合配选择符的素绑定事件。

    语法:Ext.addBehaviors(o)
   o为对象。

  getScrollBarWidth

    获取滚动条宽度

      语法:
Ext.getScrollBarWidth([force])

      force
的用意是迫使重新计算滚动条宽度,该方式返回滚动条的大幅度。

  destroyMembers

    删除对象的成员。

      语法:Ext.destroyMembers(o,namel,
name2…);

        o 是若刨除的该成员对象,namel
要删减成员的最主要字,该方法无返回值。

  copyTo

    从一个对象复制性名称及外一个目标。

      语法:
Ext.copyTo(dest,source,name[,useProtoypeKeys]);

    平台检测工具 Ext.is

    Ext.Function中静态方法:

    1.flexSetter

      封装一个光收两单参数的函数,封装后,函数的参数会变的利落。

        语法:
Ext.Function.flexSetter(fn);

          fn 要卷入的函数; 该办法返回封装厚度函数。

    2.Bind

      绑定函数的法,主要意图是保作用域。

        语法:
Ext.Function.bind(fn[,scope,args,appendArgs]);

              Ext.bind(fn[,scope,args,appendArgs]);  // 简写

    3.Pass

      封装一个初函数,在调用旧函数时,将预设的参数插入到新函数的参数前面作为旧函数的参数

        该方法主要用于创造回调函数。

      语法:
Ext.Function.pass(fn,args[,scope])

        fn 是如果包的函数: args 是几度组,为预设的参数,
scope是可选参数,为函数的作用域。

    4.Alias

      为道创建一个号。

        语法:Ext.Function.alias(object,methodName);

          object 是设创建别名的对象; methodName
是字符串,创建

      别名的措施名称,该法返回要创建别名的函数。

    5.createInterceptor

      创建一个截留函数。

        语法:Ext.Function.createInterceptor(origFn,newFn[,scope,returnValue])

    6.createDelayed

      创建一个延时实行的回调函数。

        语法:
Ext.Function.createDelayed(fn,delay[,scope,args,appends]);

    7.Defer

      在指定时间后实施函数。

        语法:
Ext.Function.defer(fn,defay[,scope,args,appends]);

           Ext.defer(fn,defay[,scope,args,appends])

    8.createSequence

      创建一个函数,在实施原始函数之后执行指定的函数。

        语法:
Ext.Function.createSequence(origFn,newFn[,scope]);

    9.createBuffered

      创建一个缓冲函数。

        语法:
Ext.function.createBuffered(fn,buffer,scopr,args);

    10.createThrottled

      封装那些为一再且迅速调用的函数。如鼠标移动事件,只有当去上调用时间及指定间隔后才见面实行操作。

    11.Clone

      为指定的函数创建一个克隆函数。

        语法:
Ext.Function.clone(fn);

          其中,fn是要是克隆的函数。

    12.interceptBefore

      在函数的旧操作前实施一个点名的操作。

        Ext.Function.interceptBefore(object,methodName,fn[,scope]);

    13.interceptAfter

      在函数的初操作之后执行一个指定的操作。

        语法:
Ext.Function.interceptAfter(object, methodName,fn[,scope]);

Ext.Array 中的静态方法

  1.each

    枚举数组。

      语法:
Ext.Arrary.each(array,fn[,scope,reverse]);

              Ext.each(array,fn[,scope,reverse])  // 简写

            array 是要是枚举的再三组, fn
是枚举每个项目时如果执行之回调函数,  函数可以承受三单参数, item ,index
和items

                item 是枚举的数组元素,index
时反复组的此时此刻目录。

               items  数组本身。 scope 是可选参数,
为函数作用域。

                reverse 是可选参数。为布尔值。

  2.forEach

      遍历一屡组,并且动指定函数处理数组的每一个素。

      语法:
Ext.Array.forEach(array,fn[,scope]);

        array
是只要遍历的频繁组,fn是处理函数,函数可以承受三个参数, item ,index 和items

            item 是遍历的数组元素,index 时数组的脚下目录。

          items  数组本身。

  3.toArray

    将只是迭代的数转发为数组。

      语法Ext.Array.toArray(iterable[,start,end]);

        Ext.toArray(iterable[,start,end]);  // 简写

           iterable
的数据类型为其它可迭代的数码。表示一旦转型为数组的数额;

         start 是可选参数,为数字值,表示转换的启位置,end
表示转换 后底毕位置,该法返回转换后的数组。

  4.pluck

    根据指定的性质,获取数组内每个队形指定要字之价。

      语法:Ext.Array.pluck(array,name);

          Ext.pluck(array,name); // 简写

        array 是获取数据的屡屡组, name 是字符串,
未指定的主要字,该方法返回由指定要字的值所组成的数组。

  5. from

    将一个值换为数组。

      语法:
Ext.Array.from(value[,newReference]);

          value 是更换为数组的值; newReference
是可选参数,决定采用数组元素是否用心得 指向。

  6.sort

    对数组中的元素进行排序。

      语法:
Ext.Array.sort(array[,fn]);

  7.别样数组方法    

 

荒唐被的静态方法:

   1.ignore  布尔值, 默认值为false 显示错误报告。

   2.notify 企图及ignore 属性相同。

    创建类的类
 Ext.Class    

    所有继承类的基类:
Ext.Base

    实现动态加载:
Ext.Loader   

    管理类的好像:
Ext.ClassManager

    动态加载的路线设置:   

  事件与下

    绑定浏览器的日的经过
Ext.EventManager

    要为因素绑定事件,统称会使用Ext.EventManager
的on 方法。

      语法:
Ext.EventManager.on(el,eventNmae,fn[,scope,opticons]);

    封装浏览器事件:
Ext.EventObject    180

      删除浏览器事件:
 un(removerListener)  removeAll purgeElement

    内部事件.

      内部事件目标
Ext.util.Event

      为组件时间长接口。
 Ext.util.Observable

    为组件绑定事件。

      特定功能的绑定事件。

          延时任务:
Ext.util.DelayedTask

          一般任务:
Ext.util.TaskRunner 与Ext.TaskManager

          封装好的单机事件:
Ext.util.ClickPepeater

    键盘事件

      为素绑定键盘事件。
Ext.util.KeyMap

      键盘导航
  Ext.util.KeyNav

  基本选项符合

     1.* 任何选择器

       语法:
Ext.query(“*”)

    2.因元素标记 E  选择素

      语法:
Ext.query(“E”)

    3.挑选含在标记E 中的F

      语法:
Ext.query(“E F”)

    4. 精选于含有在标记E 中的直接子标记F

      语法:
Ext.query(“E >F”)

    5.抉择以具有紧跟在要素E 后的元素F

      语法:
Ext.query(“E+F”)

    6.取舍当元素E以后的同层的元素 F

      语法:
Ext.query(“E~F”)

    7.选id 属性值为ID 的因素。

      语法:
Ext.query(“#ID”)

    8.选择css 类名为classname 的元素。

      语法:
Ext.query(“E.classname”)

  属性选择器:

    1. 摘含属性 attribute 的元素

        语法:Ext.query(“[attribute]”)

        Ext.query(“E[attribute]”)  // E 为素标记。

    2.挑选 attribute  的属于性值为value 的要素。

      语法:Ext.query(“[attribute=vale]”)

         Ext.query(“E[attribute=vale]”) // E为元素标记。

    3. 抉择 attribute 的属性值以 value 开头的因素。

      语法:
Ext.query(“[attribute^=value]”)

             Ext.query(“E[attribute^=value]”)  // E 为要素标记

    4.[attribute$=value]: 选择attribute 的属于性值 value 结尾的素

      语法:
Ext.query(“[attribute$=value]”)

            Ext.query(“E[attribute$=value]”)

    5.[attribute*=value] 选择 attribute 的属于性值包含 value 的因素

      语法:
Ext.query(“[attribute*=value]”)

        Ext.query(“E[attribute*=value]”)

    6.摘attribute 的属于性值能整除 value 的元素

      语法:
Ext.query(“[attribute%= vale]”)

            Ext.query(“E[attribute%= vale]”)

    7.[attribute!=value]  选择 attribute 的性质值不顶 value
的因素。

      语法:
Ext.query(“[attribute != vale]”)

          Ext.query(“E[attribute != vale]”)

css 属性值选择适合

  伪选择器

    1. first-child

        且该父节点的首先个子节点。

      语法:
Ext.query(“E: first-child”)

    2. last-child

    3.nth-child(n)

    4.nth-child(odd)

    5.nth-child(even)

    6.only-child

    7.checked

    8.first

    9.last

    10.nth(n)

    11.contains

    12.nodeValue

    13.not

    14.has

    15.next

    16.prev

    17.any(S1 | S2)

扩张选择器

    使用Ext.get 获取元素

      语法:var el = Ext.get(id)

    数据交互。

      Reader 对象的部署起

      Reader
对象的布局决定了怎么从返回的多寡中归的多寡中提数据。

        1.idProperty
字符串,指定那份字段为每个记录之绝无仅有标识字段。

        2.totalProperty
  从返回数据获取数据库记录总数的性能名称,默认为total。

        3.successProperty   

        4.root

        5.messageProperty

        6.implicitIncludes

    数据模型

      数据模型的骨架子——字段
Ext.data.Field

    数据集

      数据说明和错误处理

        模型的涉

        管理数据模型

        定义数据模型

        数据模型的概念过程

        数据模型的缔造

        数据模型的配备起,属性和方式。

    Store

      定义类:

        定义一个stadent
的类; 在MyApp.student 命名空间。

          Ext.defne(“MyApp.student.Student”,{

              name: “tom”,

              sex: “box”,

              // 添加构造函数

        constructor: function(name,sex){

            if(name) {

                this.name= name

              }

            if(sex){

              this.sex= sex

            }

        }

      showInfo:function(){

        alert(“hello”+this.name+”sex”+this.sex)

      }

    })

 

  调用类

        // 开启动态加载

      Ext.Loader.setConfig({enabled:true});

        // 动态加载  My.App 命名空间 MyApp 目录

      Ext.Loader.setPath(“My.App”,”MyApp”)

        // 动态加载类。

      Ext.require(‘MyApp.student.Student’)

      Ext.onReady(function(){

        var student =
Ext.create(“MyApp.student.Student”,”lisi”,”girl”);

        student.showInfo();

      })

 

    加载多只八九不离十

      Ext.require({

          ’Ext.grid.*’,

          ’Ext.data.*’

          ’Ext.util.*’,

          ’Ext.grid.PaginScroller’

      })

      // 加载所有类 ,除了 Ext.data.* 所有类。

     Ext.exclude(‘Ext.data.*’).require(“*”);

  基本数据类

     字符串类型,日期型,布尔等核心数据类类型。

      // 定义一个日子类型的数码。

    var datel = new Date(“2011-11-12”);

    var date = new Date(2011,11,12,12,1,12);

      // 转化为 字符串类型

     alert(date.toLocaleDateString());

      // 转化为数值类型

     alert(Number(data))

      // 转化为 布尔  假

    var myFalse = new Boolean(false);

      // 定义数值

    var num = new Number(45.6)

      alert(num)

 

  函数执行时控制

    主要出少数单地方
1.被有函数等待一段时间后由推行为,

    某个函数按这必然的频率往往实践。

     1.守候函数执行,页面加载了等带来 3秒后弹来提示。

Eet.onReady(function(){

  var funcl = function(name1,name2){

    Ext.Msg.alert(“hello,”+name1+”+name2”)

  }

  Ext.defer(funcl,3000,this,[“zhangsan”,”lisi”]);

})

 

    2.受mydiv 每个1秒 更新一潮

Ext.onReady(function() {

var i= 0;

var task = {

  run : function() {

    Ext.fly(‘mydiv’).update(new Date().toLocaleTimeString());

    if(i > 10)

    Ext.TaskManager.stop(task);

    i++;

    },

          interval: 1000

        }

      Ext.TaskManager.start(task);

    })

    页面上 <div
id=”mydiv”></div>

键盘事件监听

    1.Ext.KeyMap   简历键盘与用户动作里的照耀。

       Ext.getDoc  当前的document 集合

      Ext.onReady(function() {

        var f = function () {

          alert(“B 被按下”)

      }

      var map = new Ext.KeyMap(Ext.getDoc(), [

      {

        key: Ext.EventObject.B,

        fn: f

      },

      {

      key: “bc”,

      fn: function() {

        alert( alert(‘b c 其中一个吃依下’))

      }

     },

    {

      key: “x”,

      ctrl: true,

      shift: true,

      alt: true

      fn: function () { alert(‘Control + shift + alt +
x组合以下’);},

      stopEvent: true

    },{

      key:’a’,

      ctrl: true

      fn:function () {

        alert(‘Control + A 全选事件给集团,自定义执行事件。’)

      },

        stopEvent: true

      }

    ])

  })

 

  Ext.KeyNav

      Ext.keyNav  主要是因此来绑定方向打之

var div1 = Ext.get(“div1);

    var nav = new Ext.KeyNav(Ext.getDoc(),{

      “left”: function (e) {

          div1.setXY([div1.getX() -1, div1.getY()]);

        },

      “right”: function (e) {

        div1.setXY([div1.getX() -1, div1.getY()]);

      },

      “up”: function (e) {

        div1.move(“up”,1);

      },

      “down”: function (e) {

        div1.moveTo([div1.getX() -1, div1.getY() + 1]);

    },

      ”enter”:function (e) {}

  })

   

  新的类库

    Ext.define(className, members, onClassCreated)

      className 要声明的近乎的名

      members 一个靶,包含类成员

      onClassCreated
 一个可选的回调函数,类创建好了以后,这个函数会吃调用

    例子:

Ext.define(‘My.sample.Person’, {

    name: ‘Unknown’,

    constructor: function(name) {

if(name) {

this.name = name

}

    },

  eat: function(foodType) {

    alert(this.name + ” this eating ” + foodType)

  }

})

var aaron = Ext.create(‘My.sample.Person’, ‘Aaron’)

aaron.eat(“Salad”)

继承

    Ext.namespace(“MyApp”);

    MyApp.MyWindow = Ext.extend(Ext.window,{

title: “Welcome!”,

initComponent: function() {

Ext.apply(this,{

items: [{

xtype: “textfield”,

name: “tfName”,

fieldLabel: Enter your name“

    }]

})

    MyApp.MyWindow.superclass.inotComponent.apply(this,argumemts)

  }

});

var win = new MyApp.Mywindow();

win.show();

 

Ext.define(“MyApp.MyWindow”,{

// 继承window

extend: “Ext.window”,

title: “Wecome”,

initComponent: function() {

this.items = [{

xtype: “textfild”,

name: “tfName”,

fieldLabel: “Enter your name”

}];

      // 把子类的漫天传递过去。

      this.callParent(arguments)

      }

    })

  //  使用是看似

  var win = Ext.create(“MyApp.MyWindow”);

  //  显示出

  win.show()

    (initComponent 初始化部件方法)

 

子类从父类继承

Ext.define(“Parent”,{

constructor: function(name){

this.name = name;

}

});

Ext.define(“Child”,{

extend: “Parent”,

constructor:function(name, sex){

this.sex = sex;

this.callParent([name]);

}

});

  var c = new Child(“John Huang”, “male”)

    或者 :  var c = Ext.create(“Child”,
“John Huang”, “male”)  // 建议用的

例化对象

    console.log(c.name)

    console.log(c.sex)

 

  建议使用Ext.create
 实例化

Ext.onReady(function(){

Ext.define(“MyApp.Parent”,{

constructor: function(name){

this.name = name;

}

});

Ext.define(“MyApp.Child”,{

extend: “MyApp.Parent”,

constructor:function(name, sex){

this.sex = sex;

this.callParent([name]);

}

});

 var c = Ext.create(“MyApp.Child”, “John Huang”, “male”);

console.log(c.name)

console.log(c.sex)

  })

 

Configuration 配置 (实例成员)

  配置属性 config,
自动创建 setters 和 getters

    基本采用办法:

Ext.define(“MyClass.A”,{

config: {

name: “tom”,

set: “mate”

age: 18

},

show: function() {

alert(this.config.name)

}

  });

var objA = Ext.create(“MyClass.A”);

objA.show();

objA.setName(“John”);

objA.show();

alert(objA.getName())

 

Ext.onReady(function(){

Ext.define(“MyClass.A”,{

config: {

name: “tom”,

set: “mate”

},

show: function() {

alert(this.config.name);

alert(this.config.set)

}

});

var objA = Ext.create(“MyClass.A”);

objA.show();

var name = a.getName();

alert(name);

objA.setName(“John”);

alert(objA.getName());

objA.setAge(11);

alert(a.getAge());

})

 

 

config 属性将为该性能自动抬高 setter 和  getter 函数。

  如果想改 setter
的所作所为,可以另行写 apply 属性方法, 该法吧setter 的其中贯彻

   具体代码如下

Ext.define (“MyClass.A”,{

config: {

name: “John Huang”,

sex:”male”

},

applyName: function(val){

this.name = “dev” + val;

  },

show: function() {

console.log(this.name)

}

})

 

var a = Ext.create(“MyClass.A”);

a.setName(“John”);

console.show();  // 控制台结果: dev: John

 

Ext.onReady(function(){

Ext.define(“MyClass.A”,{

config: {

name: “tom”,

set: “mate”,

age: 18

},

applyAge: function(val){

if(val < = 18){

alert(“对不起,您未成年, 系统拒绝访问”);

this.config.age = 18;

}else{

this.config.age = val;

}

  },

show: function() {

alert(this.config.name);

alert(this.config.set)

}

});

var objA = Ext.create(“MyClass.A”);

objA.show();

var name = a.getName();

alert(name);

objA.setName(“John”);

alert(objA.getName());

objA.setAge(11);

alert(a.getAge());

})

Ext.define(“MyClass.A”, {

conifg: {

name: “John Huamg”,

sex: “male”

},

applyName: function(val) {

this.name = “dev” + val;

    },

show: function() {

console.log(this.name);

}

  })

Ext.onReady(function(){

var a = Ext.create(“MyClass.A”);

a.setName(“John”);

a.show();   //  控制台结果吧 dev: john

})

 

Ext.onReady(function(){

var a = Ext.create(“MyClass.A”);

console.log(a.config.name);  // john Huang

console.log(a.name);  // undefined

console.log(a.getName);  // dev: John Huang

console.log(a.name); // dev: John Huang

console.log(a.config.name); //  John Huang

})

getName 内部贯彻首涂鸦调用和第n 此调用时不同之

    首不成调整用时 getName
方法时中贯彻步骤如下 :

  1. 检测对象是否有name 属性,有则履行步骤2 ,无责执行步骤3,

2.赶回name 属性,并与新中贯彻。

3.缘config.name 为参数执行 applyName 函数,因为applyName

函数具体无 this.name = ….,
就会加加 name 属性到目标吃,

接下来更新中贯彻(若
applyName 函数 体无 this.name=…

的语句,那么getName
方法中如下:

function() { retrun this [q];},直接回到对象的特性。)

setter 和 getter  是用 config 的分子属性复制当前看似的积极分子属性,

然后针对成员属性上后续操作。

就此自当重新写 applyName
时候如果留心遵循原则

 不要改动 config
的分子属性值

设若于接近中成员函数中访问config
的分子属性如下

Ext.define(“MyClass.A”,function() {

config: {

name: “John Huang”,

sex: “male”

},

showName: function()
{

var  name = this.name
|| 

this.config.name;  

},

updateName:function(val){

this.name = val

})

 

重组属性:

可用于贯彻多累,该属性可以一起方式加载类文件,并实例化类。

基本用法:

Ext.define(“MyClass.A”,{

showA: function() {

console.log(“A”)

}

});

Ext.define(“MyClass.B”, {

showB: function() {

  consle.log(“B”)

}

})

 

Ext.define(“MyClass.C”,{

mixins: {

classA: “MyClass.A”,

classB: “MyClass.B”

},

showC: function() {

console.log(“C”)

}

})

 

var objC = Ext.create(“MyClass.C”);

objC.showA();  // A

objC.showB();  // B

objC.showC();  // C

 

办法同名时

差不多单mixins 类拥有与名函数

Ext.define(“MyClass.A”,{

show: function() {

console.log(“A”)

}

});

Ext.define(“MyClass.B”,{

show: function() {

console.log(“B”)

}

});

 

Ext.define(“MyClass.C”,{

mixins: {

classA: “MyClass.A”,

ClassB: “MyClass.B”

}

});

var objC = Ext.create(“MyClass.C”);

objC.show();   // A

mixins 中后者的措施无法掩盖前者的同名方法。

术的调用遵循最近优先原则,优先级别顺序从高到底——当前好像,

父类, mixins 类

  当前看似援mixins
类成员。

Ext.define(“MyClass”,{

show: function() {

console.log(“A”)

}

});

Ext.define(“MyClass.c”,{

mixins: {

dassA: “MyClass.A”

},

alert: function() {

this.mixins.classA.show();

  }

})

var ObjC = Ext.create(“MyClass.C”);

objC.alert();   // A

 

接近的静态成员属性(statics)

    可以通过Ext.Class.statics
属性来设置类的静态成员。

Ext.define(“A”,{

statics: {

count: 0,

appName: “A”

},

constructor: function() {

return this.statics().count;

},

getCount: function() {

return this.statics().count;

    },

getAppName: function () {

return this.self.appName;

}

   })

 

var a  = Ext.create(“A”);

a.getCount();   // 1

a.getAppName(); // A

A.count; // 1

A.appName; A

 

概念内部不能够利用this.statics,成员名
的方访静态成员,而是一旦采用this.self

 静态成员称, 或 this.statics(), 静态成员叫。

类似定义外部使用“类名静态成员”,来访问静态成员。

 

 

MVC

Ext.application({

requires: [‘Ext.container.Viewport’],

name: ‘FWY’  // 全局的名 一般根据项目

appFolder : ‘app’, // 动态加载js文件夹

lauch: function() {

Ext.create(‘Ext.container.Viewport’,{

layout: “fit”,

item: [{

xtype: ‘panel’,

title: “标题”,

html:”内容”

}]

  })

}})

 

 

controller model store view

controller  作为连续model store 和 view 的大桥, 在mvc 开发模式中

起了根本的用意。如果说model
定义了数额模式, store 提供了数额

读取的法, view
用来展示数据,那么controller 将因此来支配具体的

数量操作。

 

Application.js 文件

1.name : 应用程序名称  自定义的

2.appFolder 应用程序的目录,用来展开动态加载代码的。

3.controllers 应用程序使用到的控制器。

4.autoCreateViewport 是否自动创建 Viewport,默认为flase ,设置为 true

应用程序自动创建Viewport
,这个Viewport 的定义在本人之等的app/

view/viewport.js 中;如果也false 的上,我要是在launch
中收到创建以视图。

Viewport.js 的定义

Viewport 作为我们应用程序的视图模板,可以吃单个定义在Viewport.js 文件被

她定义之良简短,通常用来拿一个要基本上个view
作为它们的分支控件。

 

 

 

store  作为数据仓库, store 起及了数量存取的作用, grid, form 等

见的数量是通过store
来提供的

controller 层

 

alias: ‘widget.创建别名

 

initComonent: function () {

    

}’

      demo
下载 https://github.com/ningmengxs/Extjs.git

相关文章