天天看點

名詞解釋——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: {
                width: 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