Extjs 6 ViewModel不能正常工作

Question

我正在開發一個使用Extjs6的應用程序。我有一個標誌頁。我有兩個文本框，如下所示：

items: [{ 
    xtype: 'textfield', 
    name: 'email', 
    emptyText: 'Email', 
    bind : '{inEmail}', 
    labelWidth: 60, 
    anchor: '100%', 
    hideLabel: true, 
    allowBlank : false, 
    margin: '15 5 0 5', 
    listeners: listeners 
}, { 
    xtype: 'textfield', 
    reference: 'password', 
    name: 'password', 
    bind : '{inpassword}', 
    emptyText: 'Password', 
    inputType: 'password', 
    labelSeparator: '', 
    labelWidth: 60, 
    anchor: '100%', 
    hideLabel: true, 
    allowBlank : false, 
    margin: '15 5 0 5', 
    listeners: listeners 
}] 

我有這樣一個按鈕：

{ 
    xtype: 'button', 
    text: '<span style="color: white ">Enter</span>', 
    anchor: '100%', 
    handler: 'signin', 
    bind: { 
     disabled: '{!signinBtn}' 
    }, 
    margin: '-5 5 25 5' 
} 

在視圖模型我定義了一個公式：

formulas: 
{ 
    signinBtn: function (get) { 
     var fn = get('inEmail'), ln = get('inpassword'); 
     return (fn && ln); 
    } 
} 

但是，當我瀏覽到此頁，有時它不起作用。但是當我將disabled更改爲hidden時，它工作正常。

問題在哪裏？

Answer 1

簡短的回答是：不要將allowBlank: false加到textfield。

我已創建fiddle來回答您的問題。我已添加console.log(fn && ln);以在計算公式時在控制檯上查看。

小提琴的工作原理如您所料如果您不會將allowBlank: false添加到您的textfield。如果添加該屬性，則在清除textfield內容時不會評估該公式。