Переключение с текстового поля на отображаемое поле с помощью ExtJS4 - PullRequest
Новая
       26

Переключение с текстового поля на отображаемое поле с помощью ExtJS4

3 голосов
/ 30 ноября 2011

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

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

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

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

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

М.

Ответы [ 4 ]

2 голосов
/ 30 ноября 2011

Начните с отображения всех полей как полей ввода с параметром disabled: true.Затем используйте это для обработчика кнопки Edit: 

 ...
 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
1 голос
/ 18 июня 2013 
Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);
0 голосов
/ 27 июня 2014

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

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

0 голосов
/ 26 сентября 2013

Вы можете переключаться на основе свойства 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;
    }
}

});

...