名词解释——Ext JS4

  • Ext.onReady——Ext主入口,和onload事件不同,不需要页面所有东西加在出来。

Ext js 的基本语法就是使用树状图来配置对象来定义界面:

{
    config_options1:value1,
    config_options1:value1,
   …
    config_options1:value1,
  layout:{},
  items:[
  { },
  { },//配置对象
  …],
listeners:{
//定义事件(根据需要而定)
      click:function(){},
dblclick:function(){}
…  
}
}

格式中 config_options1: config_options1:value1 都是API文档中对象的配置项。

  • 属性layout可以是对象,也可以是字符。该属性表示当前容器内使用什么来填充子空间。如果没有特殊要求,使用布局的别名作为值。
  • 如使用Hbox布局 ,布局内的子控件需要剧中对齐。
layout:{
        type:'hbox',
        align:'middle'  
}
  • items属性。是一个数组。可以在里面定义当前控件的子控件。里面是一个或者多个配置项,跟需要而定。
  • 属性listeners是一个对象,可以在里面绑定事件。对象的属性就是事件名称。属性值就是要执行的函数。
  • xtype——在使用ExtJS时,很多时候通过定义xtype来指定改位置使用什么组件。例如:“ xtype:"panel" ”,这里指定使用面板作为当前位置的组件。这样做的主要目的是简化代码。如果没有xtype,就得先使用变量指向一个组件,然后将其加入父组件中;或者直接在父组件中的定义中加入一堆由new关键字或Ext.Create方法创建的组件。——所以,这不但影响熟悉代码的效率,还影响代码的可读性。                           ————注:在某些组件下,会默认其内部组件为某些组件,所以就不用书写xtype语句。
  • new——在extjs4版本之前用new关键字创建对象。new class([config])class是类名,config是可选参数。
  • Ext.careate——新增的创建对象语法。
Ext.create(classname,[config])

     注:其中classname可以是类的【全名】、【别名】、【备用名】;config是可选参数,为类的配置对象

  • 使用Ext.widge或Ext.careteWidget创建对象
  • 使用Ext.ns或Ext.namespace定义命名空间

    注:定义一个“MyApp”的命名空间,可以如下图实现:

MyApp={}
//创建命名空间
Ext.namespace{"MyApp","MyApp.data","MyApp.user"};
Ext.ns{"MyApp","MyApp.data","MyApp.user"};
  • 使用Ext.define定义新类————在ExtJs3中,定义新类使用的是Ext.extend方法。ExtJS4定义类语法如下:
Ext.define(classname,properties,callback);
//classname 类名
//properties 新类的配置对象,对乡里包含了类的属性集对象。下表列出常用属性以及说明。
//callback :回调函数,当类创建完成后,执行该函数。

常用属性集对象以及说明

属性 说明

extend

要继承的类的名称。比如subclass继承自supclass,定义如下:

Ext.define("subclass",{extend:"superclass",……})
 alternateClassName

 类的备用名称,例如:

Ext.define("subclass",{
     alternateClassName:"myclass",
      …
});

这样subclass就有了一个备用名称“myclass”,在使用Ext.create创建对象时就可以使用myclass这个名称创建subclass实例了。

 alias  类的别名,用法和alternateClassName一样
 requires  需要使用到的类名数组,在动态加载时会根据该属性去下载类,譬如subclass。需要使用到Ext.EventManager和Ext.util.MixedCollection,定义如下:
Ext.define("subclass"{
     requires:["Ext.EventManager","Ext.util.MixedCollection"],
});
 constructor    构造属性,一般来初始化类的配置项和调用父类的方法,例:
Ext.define("subclass",{
     extend:"superclass",
     constructor:function(config){
     this.initConfig(config);
     …
     this.callParent("mehtodName");
},
…
});
   
 config

 定义类的配置项,创建时会自动为config里面的每个属性添加set和get

方法,例如:

        Ext.define("subclass", {
            config: {
                 100,
                heigth:100
            },
            construtor: function(config) {
                this.initConfig(config);
                //
                return this;
            },
            //
        });
        var mysubclass = new subclass();
        mysubclass.setWidth(200);
        mysubclass.getHeigth();

代码中,initConfig方法执行后就会为config的属性创建get和set方法。

这样创建类的示例后,就可以直接通过set和get方法读写属性的值。

注:例子中用setWidth设置了配置中width的值,使用getHigth获取了heigth的值。

 statics  

 定义静态方法,例如:

        Ext.define("subclass", {
            statics: {
                method: function (args) {
                    return new this(args);
                }
            },
            constructor: function (config) {
                this.initConfig(config);
            }
        });
        var myclass = subclass.method("class");
   
  •  apply和applyIf方法——将所有配置对象的成员复制到对象。
  • ExtJS4.0 不推荐使用extend方法。在这之前所有类以及自定义扩展基本都是使用extend定义的。ExtJS中,因为对类系统进行了重新架构,因而除了个别类外,基本都是用defind方法来定义。
  • 数据及类型检测

1.typeOf:检测变量的类型

(1)语法

    Ext.typeOf(v);

   其中v是要检测的变量:下面列出了可能的返回值。

  1. undefined——无定义
  2. null——空
  3. string——字符串
  4. number——数组
  5. boolean——布尔值
  6. date——日期
  7. function——函数
  8. object——对象
  9. array——数组
  10. regexp——正则表达式
  11. element——DOM元素
  12. textnode——DOM的文本节点且包含内容
  13. whitspace——DOM的文本节点且内容为空

源代码:

page:119

1.isEmpty:检测值是否为空

  1. 语法

 

//获取Controller
Ext.getApplication().loadModule('md.mdOCarController');

  • renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子(我目前是这么理解的)

先看下renderer: function()里的参数

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。

原文地址:https://www.cnblogs.com/blogs2014/p/5368773.html