覆蓋ExtJS模型獲取器和設置器的最佳實踐

Question

我想攔截模型中的字段get/set，以便在顯示之前以及在模型存儲之前將值轉換。在這種情況下，我想在模型中存儲未編碼的數據，但顯示解碼值。

當我直接覆蓋get/set方法時，我發現它們正在被代理用來將原始數據放入模型中。我不想重寫這個過程，我甚至不知道如何判斷它是否是代理加載模型或用戶界面。

這是最好的方法是什麼？轉換，順便說一句，似乎是一個糟糕的選擇。它不是雙向的和生活的。

Answer 1

注意：我沒有測試過這個代碼，因此如果您有任何問題，請使用這些概念和評論。

當您爲數據實體定義Ext.data.Model類（對於Ext JS 3使用Ext.data.Record）時，請將convert函數作爲Ext.data.Field屬性實例的一部分添加。如果你願意，這可以在所有領域完成，但可能不推薦。

我是新來的這個框架，所以我不知道該怎麼做的一件事是在convert函數中使用「this.self」符號，以便在您的Model類中擴展另一個類。例如，如果您沒有在Employee類中定義的默認值，並且它從另一個類（例如Employee）繼承，但Employee構造函數設置該屬性，它將採用在超類中定義的值（base當你對數據進行編碼時，這個類或者父類是構造函數。現在，它只是獲得EmployeeDeveloper.dataValue屬性。

Ext.define('EmployeeDeveloper', { 
    extend: 'Ext.data.Model', 
    fields: [ 
    { name: 'name', type: 'string', defaultValue: 'Paul' }, 
    { name: 'profession', type: 'string', defaultValue: 'Ext JS developer' }, 
    { name: 'salary', type: 'float', defaultValue: '95000' }, 
    { name: 'dataValue', type: 'string', 
     convert: function(value, record) { 
     // feel free to use value and record parameters in this function 
     return encodeData(record.get('dataValue')); // you may have to use the "value" parameter instead of record.get('dataValue') if referencing the field in it's own convert function (haven't tested) 
     } 
    } 
    ] 
}); 

var empDev = Ext.create(
    'EmployeeDeveloper', 
    { 
    name: 'MacGyver', 
    dataValue: 'ABC' 
    }, 
    'MacGyver', 
    123 
); 

var encodedDataValue = empDev.get('dataValue'); 

注意有關轉換：如果引用的是轉換函數簽名如下定義的字段，代碼不會知道它，將無法檢索值。

或者如果你有一個自定義的類，但不使用模型類...

今晚我也看了其他的事情在Ext JS中這是一種整齊。他們在Ext JS 4中添加了自動獲取器和設置器。新版本的框架自動爲您的屬性添加「獲取」，「設置」，「重置」或「應用」，並且將屬性的首字母大寫爲「配置「屬性您定義的類。

在常規JavaScript中，它們沒有真正的類，但Sencha使定義一個類（使用「define」函數）和實例化用戶定義類的對象實例成爲可能。

例如，假設您有以下類中定義：

Ext.define('Paul.MyClass'), { 
    extend: 'Ext.Window', 
    config: { 
    name: 'Paul' 
    } 
}); 

如果您創建對象的實例，像這樣，就自動擁有了四個功能。

var win = Ext.create('Paul.MyClass'); // create instance of MyClass object 
var myName = win.getName(); // get name 
win.setName('MacGyver'); // set name 
win.resetName(); // this resets the value back to the default value ('Paul') 
win.applyName(); // this calls custom code 
win.show(); 

我建議用您建議的邏輯覆蓋apply *方法。然後調用win.get *（）;之後才能獲得新的價值。對計劃編碼的每個字段使用額外的編碼字段可能是明智的，所以每次在代理和/或存儲中訪問（獲取或設置）數據時，都不必操作屬性。

Ext.define('Paul.MyClass'), { 
    extend: 'Ext.Window', 
    config: { 
    name: 'Paul', 
    dataValue: 'non encoded value of your data' 
    } 
    applyName: function(title) { 
    this.name = this.name + ' ' + title; // custom logic goes here 
    } 
    applyDataValue: function(encodeKey) { 
    // get the encoded data value 
    this.self.dataValue = 'encoded data value'; // custom logic goes here 
    } 
});