使用ExtJS4從文本字段切換到顯示字段

我創建了一個在普通顯示字段中顯示值的窗體。使用ExtJS4從文本字段切換到顯示字段

表單旁邊有一個「編輯」按鈕，一旦用戶點擊，顯示字段應該切換爲文本字段，因此會使數據可編輯。

基於用戶點擊按鈕，我猜測可以通過使用兩個相同的表單來實現，一個可編輯，一個不可見，另一個可見。另一種方式，或許是在點擊按鈕時動態選擇xtype。

任何人都可以指向我的方向來做到這一點？我是ExtJS的一名新手，只是剛剛開始學習ExtJS4。

預先感謝您。

來源

2011-11-30 Menelaos

切換能見度是一個很不錯的辦法。切換xtypes將不起作用，它們僅用於初始化。 – suknic

如何禁用字段，然後在編輯模式下啓用它們？ – JamesHalsall

首先將所有字段渲染爲輸入字段，其中禁用：true。然後用這個編輯按鈕處理程序：

... 
form.getForm().getFields().each(function(field) { 
      field.setDisabled(false); //use this to enable/disable 
      // field.setVisible(true); use this to show/hide 
}, form);//to use form in scope if needed

來源

2011-11-30 19:28:29 dbrin

這應該很好用！我今天沒有時間嘗試，但明天會做，並會報告回來。謝謝！ – Menelaos

它按預期工作，但造型明智，它不看我需要它。理想情況下，我希望它從文本字段切換到輸入字段。無論如何，這是朝着正確方向邁出的一步，所以再次感謝。 – Menelaos

這裏真正的選擇是在卡片佈局中有2個面板（一次只顯示一個面板）。一個面板是一個包含用於編輯的輸入字段的表單面板，另一個面板是一個帶有xtemplate的純面板，用於以只讀模式呈現數據。你可以想出更具創意的東西，而不僅僅是一個普通的xtemplate，但這是一般的想法。 – dbrin

Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}'); 
Ext.getCmp('yourfieldid').setReadOnly(true);

來源

2013-06-18 13:44:03 rada

這對我來說比禁用該領域更好。由於我想要在兩種狀態之間切換，我添加了一個樣式類並刪除並添加了基於'focus'和'blur'的類 – globetrotter

您可以根據屬性isEditable切換。然後，當你點擊按鈕，你改變屬性，只需刪除並添加表單。如果您來回切換，它會變得更清潔。

Ext.define('E.view.profile.information.Form', { 
extend: 'Ext.form.Panel', 
xtype: 'form', 

title: 'Form', 
layout: 'fit', 

initComponent: function() { 
    this.items = this.buildItems(); 
    this.callParent(); 
}, 

buildItems: function() { 
    return [this.buildInvestmentPhilosophy()]; 
}, 

buildInvestmentPhilosophy: function() { 
    var field = { 
     name: 'investmentPhilosophy', 
     xtype: 'displayfield', 
     editableType: 'textarea', 
     grow: true, 
     maxLength: 6000, 
     value: '---', 
     renderer: E.Format.textFormatter 
    }; 
    this.toggleEditingForForm(field); 
    return field; 
}, 

toggleEditingForForm: function (form) { 
    if (this.isEditable) { 
     Ext.Array.each(form, this.configureFieldForEditing, this); 
    } 
}, 

configureFieldForEditing: function (field) { 
    if (field.editableType) { 
     field.xtype = field.editableType; 
    } 
}

}）;

來源

2013-09-26 18:50:35 technoSpino

您還可以嘗試使用兩個項目：顯示字段和具有相同數據源的文本字段，並且可以使用按鈕處理程序隱藏/顯示正確的項目。你不應該有任何問題，CSS

（如果您沒有CSS問題，我很喜歡看你的代碼）

來源

2014-06-27 12:32:42 Meinew

使用ExtJS4從文本字段切換到顯示字段

回答

相關問題