Wechseln Sie von der textfield-Instanz displayfield mit ExtJS4

Ich habe ein Formular erstellt, dass zeigt die Werte im Klartext displayfields.

Gibt es eine Schaltfläche "Bearbeiten" neben dem Formular und nach dem anklicken durch den Benutzer, die displayfields schalten soll wird Textfeldern und wird, deshalb, damit die Daten bearbeitet werden.

Diese, ich vermute, würde erreicht werden, indem zwei identische Formen, eins bearbeitet und eins nicht und das ein oder andere sichtbar sein würde, auf der Grundlage der Benutzer nachdem Sie auf die Schaltfläche. Ein anderer Weg, vielleicht ist der xtype dynamisch ausgewählt, bei Klick auf die Schaltfläche.

Kann jemand mich in Richtung eine bestimmte Richtung, um dies zu tun? Ich bin ein absoluter Neuling auf ExtJS und gerade erst angefangen zu lernen, ExtJS4.

Vielen Dank im Voraus.

M.

  • Umschalten der Sichtbarkeit ist ein sehr guter Ansatz. Die Umschaltung der xtypes wird nicht funktionieren, Sie sind nur für die Initialisierung.
  • wie zum deaktivieren der Felder, und dann aktivieren Sie im edit-Modus?
InformationsquelleAutor Menelaos | 2011-11-30
  1. 2

    Beginnen, Rendern Sie alle Felder wie input-Felder mit disabled:true. Dann verwenden Sie diese für die Schaltfläche Bearbeiten-handler:

     ...
 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
    • Dies sollte funktionieren, schön! Ich habe keine Zeit, zu probieren Sie es aus heute, aber morgen machen und berichten. Danke!!!
    • Es funktioniert wie vorgesehen, aber styling-wise, es sieht nicht wie ich es brauche. Im Idealfall, ich will es zu einem Wechsel von einem textfield-Objekts auf ein Eingabefeld. Egal, dies ist ein Schritt in die richtige Richtung, also nochmals vielen Dank.
    • Die wirkliche alternative ist hier zu haben 2 Platten in einem Karten-layout (was bedeutet, dass nur eine auf einmal angezeigt). Ein panel ist eine form-panel mit Eingabe-Feldern für die Bearbeitung, während die andere ist eine Ebene Platte mit xtemplate zu Rendern, Ihre Daten in einem nur-lese-Modus. Sie können sich mit etwas kreativer, als nur eine schlichte xtemplate für diese, aber das ist die Allgemeine Idee.
    InformationsquelleAutor dbrin
  2. 1
    Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);
    • Dies funktionierte für mich besser als deaktivieren Sie das Feld. Da wollte ich ein Umschalten zwischen den beiden Staaten, füge ich ein style-Klasse und entfernt und Hinzugefügt, dass die Klasse basiert auf "focus" und "blur"
    InformationsquelleAutor rada
  3. 0

    Können Sie Umschalten, basierend auf einer Eigenschaft isEditable. Wenn Sie dann klicken Sie auf die Schaltfläche, die Sie ändern Sie die Eigenschaft und entfernen Sie einfach und fügen Sie die form. Es macht es cleaner, wenn Sie hin-und her wechseln.

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

    });

    InformationsquelleAutor technoSpino
  4. 0

    Können Sie auch versuchen, zwei Elemente : eine displayfield und ein Textfeld mit der gleichen Datenquelle und Sie konnte hide/show den richtigen Artikel mit euren button-handler.
    Sie sollten keine CSS-Probleme

    (Wenn Sie nicht über CSS-Probleme, ich würde mich freuen, Sie zu sehen-code)

    InformationsquelleAutor Meinew
Schreibe einen Kommentar