Переключиться с Textfield на Displayfield с ExtJS4

StackOverflow https://stackoverflow.com/questions/8330088

  •  26-10-2019
  •  | 
  •  

Вопрос

Я создал форму, которая отображает значения в простых полях отображения.

Рядом с формой есть кнопка «Редактировать», и после нажатия пользователя нажатие DisplayFields должна перейти на TextFields и, следовательно, сделает данные редактируемыми данными.

Это, я полагаю, будет достигнуто за счет наличия двух идентичных форм, одна редактируемая, а одна - одна, а другая будет видна, основываясь на том, что пользователь нажал кнопку. Другой способ, возможно, состоит в том, чтобы xtype динамически выбрал при нажатии на кнопку.

Кто -нибудь может указать мне в определенном направлении, чтобы сделать это? Я - полный новичок в Extjs и только начал изучать ExtJS4.

Заранее спасибо.

М.

Это было полезно?

Решение

Начните с того, что все поля в качестве поля ввода с отключенными: 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

Другие советы

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

Вы можете переключаться на основе собственности. Затем, когда вы нажимаете кнопку, вы измените свойство, просто удалите и добавляете форму. Это делает его чище, если вы переключаетесь туда -сюда.

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;
    }
}

});

Вы также можете попробовать иметь два элемента: поле дисплея и текстовое поле с тем же источником данных, и вы можете скрыть/показать правильный элемент с помощью обработчика кнопок. У вас не должно быть проблем с CSS

(Если бы у вас не было проблем с CSS, мне бы понравилось видеть вас код)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top