Extjs kann nicht dynamisch Felder hinzufügen/entfernen in formpanel

Ich habe ein Formular-panel, verwendet wird ein Tabellen-layout, um ein Formular anzeigen. Ich muss hinzufügen, Funktionen zum hinzufügen /entfernen einer Gruppe von Komponenten.

Die Schaltfläche hinzufügen fügen Sie eine neue Zeile mit Komponenten unterhalb der vorhandenen Elemente & die Schaltfläche "entfernen" entfernt werden sollte, dass die zuletzt hinzugefügte Zeile.

Dem formpanel ein neues Feld hinzufügen können, aber es erscheint unterhalb der Schaltflächen und die form ist nicht in der zunehmenden Breite (siehe Screenshot unten). Ich habe versucht, dies mit den insert-und add-Funktion, aber beide haben den gleichen Effekt.

Weiß jemand, wie:
1) ich kann hinzufügen, eine Reihe von Komponenten in der nächsten Zeile?
2) Wie kann ich entfernen Sie die nächste Zeile.

Teilweise formPanel code & button-code:

![SearchForm = Ext.extend(Ext.FormPanel, {
     id: 'myForm'
     ,title: 'Search Form'
     ,frame:true     
     ,waitMessage: 'Please wait.'
     //,labelWidth:80    
     ,initComponent: function() {    
         var config = {                 
            items: [{
                layout:{
                    type:'table',
                    columns:5
                },
                buttonAlign:'center',

                defaults:{
                    //width:150,
                    //bodyStyle:'padding:100px'
                    style:'margin-left:20px;'
                },               
                items:[//row 1
                       {                    
                            xtype: 'label',
                            name: 'dateLabel',
                            cls: 'f',
                            text: "Required:"                   
                        },
                        {
                            xtype: 'container',
                            layout: 'form',
                            items: {
                                xtype: 'datefield',
                                fieldLabel: "From Date",  
                                 value: yesterday,
                                width: 110,
                                id: 'date1'                                                   
                            }
                        }][1]
buttons: [{
                            text: 'Add More Criteria (max 10 items)',
                            id: "addBtn",                   
                            scope: this,
                            handler: function(){
                                alert('hi');
                                /*this.items.add({
                                     xtype : 'textfield',
                                     fieldLabel : 'Extra Field',
                                     name : 'yourName',
                                     id : 'yourName'
                                 }); */
                                this.insert(4,{
                                        xtype: 'textfield',
                                        id: 'input20',
                                        //hideLabel: true,
                                        width: 180,
                                        fieldLabel: 'hi'
                                    });
                                this.doLayout();
                            }
                }

Extjs kann nicht dynamisch Felder hinzufügen/entfernen in formpanel

InformationsquelleAutor pm13 | 2011-09-20
  1. 5

    Einfachste Weg wäre, ein fieldset in form zu halten alle die 'Zeilen' und fügen Sie eine Zeile in diese fieldset mit fielset.add()

    (Ihre 'row' kann ein weiteres fieldset, dass alle Felder)

    • Ich habe auch etwas gesehen, dass eine fieldContainer gehalten innerhalb eines fieldSet, wäre dies der richtige Weg zu gehen über diese oder würde einfach nur das hinzufügen eines weiteren fieldset als eine Zeile genügt?
    • nur das hinzufügen eines weiteren fieldset als eine Zeile sollte ausreichend sein
    InformationsquelleAutor Amol Katdare
  2. 1

    Dynamische Formularfelder generation scheint offensichtlich zu sein, und es gibt viele Beispiele und einige blogs für mootools etc, aber in extjs Welt, die ich nicht finden konnte, ein Beispiel(wahrscheinlich, weil die meisten Menschen nutzen mächtige Extjs-grid).Ich hatte zu erfinden, indem ich mich für MedAlyser Projekt! und im Austausch mit Ihnen.Sie könnte Fehler enthalten und/oder unvollständig sein, aber ich hoffe, Sie hilft ein bisschen.

    function addressCounter(incr) {
    if (!this.no) {
        this.no = 0;
    } else {
        this.no = this.no + 1;
    };
};
var counter = new addressCounter();
console.log(counter.no);
//put below code inside your form  items       
{
    xtype: 'button',
    text: 'Add address ',
    id: 'addaddress',
    handler: function () {
        counter.no = counter.no + 1;
        console.log(counter.no);
        Ext.getCmp('patientaddress').add([{
            xtype: 'combo',
            store: 'AddressType',
            displayField: 'name',
            valueField: 'name',
            fieldLabel: 'Address Type',
            id: 'addresstype' + counter.no,
            name: "Patientaddress[addresstype][]",
            value: 'Home'
        }, {
            fieldLabel: 'zip',
            width: 160,
            maxLength: 10,
            enforceMaxLength: true,
            maskRe: /[\d\-]/,
            regex: /^\d{5}(\-\d{4})?$/,
            regexText: 'Must be in the format xxxxx or xxxxx-xxxx',
            name: "Patientaddress[zip][]",
            id: 'zip' + counter.no
        }, {
            fieldLabel: 'Address 1',
            name: "Patientaddress[address1][]",
            id: 'address1' + counter.no
        }, {
            fieldLabel: 'Address 2',
            name: "Patientaddress[address2][]",
            id: 'address2' + counter.no
        }, {
            fieldLabel: 'City',
            name: "Patientaddress[city][]",
            id: 'city' + counter.no
        }, {
            fieldLabel: 'State',
            name: "Patientaddress[state][]",
            id: 'state' + counter.no
        }, {
            xtype: 'combo',
            store: Ext.create('MA.store.Countries'),
            displayField: 'name',
            valueField: 'id',
            forceSelection: true,
            fieldLabel: 'Country',
            typeAhead: true,
            queryMode: 'local',
            name: "Patientaddress[country][]",
            id: 'country' + counter.no
        } //eof
        //countries;
        ,
        Ext.getCmp('addaddress'), {
            xtype: 'button',
            text: 'Remove address',
            id: 'removeaddress' + counter.no,
            handler: function (
            thisButton, eventObject) {

                activeRemoveButtonId = thisButton.getId().split('removeaddress')[1];

                console.log('activeRemoveButtonID:' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('address1' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('address2' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('city' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('state' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('country' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('removeaddress' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('addresstype' + activeRemoveButtonId);
                Ext.getCmp('patientaddress').remove('zip' + activeRemoveButtonId);

                Ext.getCmp('patientaddress').doLayout();
            }
        }]);
        Ext.getCmp('patientaddress').doLayout();

    } //eof function
}, //eof Add button

    Entfernen von Feldern war komplizierter, da die Schaltfläche entfernen, muss genau wissen, welches Feld entfernt werden. Dieser code erstellt neue Felder entfernt und Sie richtig, als Sie gefragt haben.Alle Vorschläge sind willkommen.

    InformationsquelleAutor Mehdi Fanai
Schreibe einen Kommentar