In der json-Daten, wie Sie erstellt ein Formular in sencha

Möchte ich Lesen, json-Daten aus Datei - Inhalt der json-Datei angezeigt, unten

    {
    "form": {
        "fields" : [
                {
                    "field":"textfield",
                    "name": "username",
                    "constrain": "5-10",
                    "value": ""
                },
                { 
                    "field":"textfield",
                    "name": "password",
                    "constrain": "5-10",
                    "value": ""
                },
                { 
                    "field":"datepickerfield",
                    "name": "Birthday",
                    "constrain": "5-10",
                    "value": "new Date()"
                },
                { 
                    "field":"selectfield",
                    "name": "Select one",
                     "options":[
                        {"text": "First Option",  "value": 'first'},
                        {"text": "Second Option", "value": 'second'},
                        {"text": "Third Option",  "value": 'third'}
                        ]
                },

            ]    
      }
}

Modell

    Ext.define('dynamicForm.model.Form', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'field', type: 'string'},
                {name: 'name', type: 'string'},
                {name: 'constrain', type: 'string'},
                {name: 'value', type: 'string'}
             ],
             hasMany: {model: 'dynamicForm.model.SelectOption', name: 'options'}
        }
    });

Ext.define('dynamicForm.model.SelectOption', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'text', type: 'string'},
            {name: 'value', type: 'string'}
         ]
    }
});

store

Ext.define('dynamicForm.store.FormStore', {
    extend : 'Ext.data.Store',
    storeId: 'formStore',
    config : {
        model : 'dynamicForm.model.Form',
        proxy : {
            type : 'ajax',
            url : 'form.json',

            reader : {
                type : 'json',
                rootProperty : 'form.fields'
            }
        },
        autoLoad: true
    }
});

Das, was ich versucht habe, so für.

    var fromval = Ext.create('dynamicForm.store.FormStore');
    fromval.load(function (){
        console.log(fromval);
              //i added register view which having form panel with id "testForm"
            Ext.Viewport.add({
                xtype : 'register'
            });
        for(i=0; i< fromval.getCount(); i++) {
            console.log("------");
            Ext.getCmp('testForm').add({
                    xtype: fromval.getAt(i).data.field,
                    label: fromval.getAt(i).data.name,
                    value: fromval.getAt(i).data.value,
                    options: [
                        {text: "First Option",  value: "first"},
                        {text: "Second Option", value: "second"},
                        {text: "Third Option",  value: "third"}
                    ]
            });
        }
    });

zwei text fileds und Datum woking gut, aber ich weiß nicht, wie man Optionen für das select-Feld aus Speicher, nur gehört, codiert jetzt.

über alle auf der Grundlage der oben genannten json-Daten, die ich brauche zu erstellen sencha Formular dynamisch.

whathaveyoutried.com ?
ich kann nicht finden, alle post mit meiner Frage in dieser website.
Nein, es gibt nichts in Bezug auf Ihre Frage. Aber haben Sie den Artikel gelesen ? Aus dem Artikel: "Wenn Sie Entwickler sind und Sie sind über Fragen, die ein anderer Entwickler eine technische Frage (über ein forum, per E-Mail, über einen chat-channel, oder in person), die Sie besser bereit sein, eine Antwort auf die Frage "Was haben Sie versucht?" [...] Das problem ist, dass diese person das problem lösen Technik zu Fragen, für die Lösung. Nicht um zu suchen Beratung, wie Sie die Aufgabe angehen, sondern nur nach dem code gefragt, vollständig ausgebildet und bereit zu gehen"
ich schaue nie für fertig-code in stack-überlauf, ich will einfach nur eine Idee und ich versuche
Ok, dann, haben Sie Zugriff auf das JSON ? Können Sie es ändern, bevor es gesendet/abgerufen ?
ich aktualisiert, was ich versucht habe

InformationsquelleAutor Viswa | 2013-03-06

Besser zu Folgen MVC-Struktur:

Erstellen Sie ein Modell:

Ext.define('MyApp.model.FormModel', {
extend: 'Ext.data.Model',
config: {
    fields: ["field","name"]
}
});

Einen store mit proxy:

Ext.define('MyApp.store.FormStore',{
extend: 'Ext.data.Store', 
config:
{
    model: 'MyApp.model.FormModel',
    autoLoad:true,
    proxy:
    {
        type: 'ajax',
        url : 'FormData.json', //Your file containing json data
        reader:
        {
                rootProperty:'form.fields'
        }
    }
}
});

Dem formData.json-Datei:

{
"form": {
    "fields" : [
            {
                "field":"textfield",
                "name": "username"
            },
            { 
                "field":"textfield",
                "name": "password"
            },
        ]    
  }
}

Verwenden und dann die FormStore um die form zu füllen Daten, wie Sie benötigen.

Ext.define('MyApp.view.LoginPage', {
extend: 'Ext.form.Panel',
config: {
items:{
xtype:'fieldset',
layout:'vbox',
items:[{
        flex:1,
        xtype:'textfield',
        id:'namefield',
        placeHolder:'Username'
    },{
        flex:1,
        xtype:'passwordfield',
        id:'passwordfield',
        placeHolder:'Password'
    }]
},
listeners:{
    painted:function()
    {
        var store=Ext.getStore('FormStore');
        while(!store.isLoaded())
        {
            console.log("loading...");
        }

        var record=store.getAt(0);
        Ext.getCmp('namefield').setValue(record.data.name);
        Ext.getCmp('passwordfield').setValue(record.data.password);
    }
}
}
});

+1 vielen Dank @Malaysischen Shah, ich habe genau die gleichen und ich kann die Felder mit dem Wert von Speicher, nun möchte ich hinzufügen-Feld dynamisch aus dem panel, die ist bereits erstellt und ich bin nicht erfolgreich, doch.
siehe mein update..
Dies könnte helfen, wenn etwas aus der Spur. stackoverflow.com/questions/11616286/... speziell könnten Sie haben Optionen - Eigenschaft leer da {} in den ersten 3 Elemente.
wie man die Optionen-Eigenschaft von Formular-Modell
var opt= formval.getAt(i).raw.options; if(opt) { console.log(opt); } Es logs, konnte nicht herausfinden, ein richtiger Weg, allerdings noch nicht.
Danke @Malaysischen Shah, Sie haben es..

InformationsquelleAutor Malay Shah

{
    "data":[
        {
            "xtype":"textfield",
            "title":"UserName",
            "name": "username"
        },
        { 
            "xtype":"textfield",
            "title":"password",
            "name": "password"
        },
        { 
            "xtype":"textfield",
            "title":"phone no",
            "name": "birthday"
        },
        { 
            "xtype":"textarea",
            "title":"address",
            "name": "address"
        }
    ]
}

Ext.define('dynamicForm.model.FormModel', {
        extend: 'Ext.data.Model',

        fields: ['field', 'name']
    });


Ext.define('dynamicForm.store.FormStore', {
    extend : 'Ext.data.Store',
    model : 'dynamicForm.model.FormModel',
    proxy : 
    {
        type : 'ajax',
        url : 'data/user.json',

        reader : 
        {
            type : 'json',
            rootProperty:'data'
        },

        autoLoad: true
    }
});


Ext.define('dynamicForm.view.DynaForm',{
    extend:'Ext.form.Panel',
    alias:'widget.df1',

    items:[]

});

Ext.application({
    name:'dynamicForm',
    appFolder:'app',

    controllers:['Users'],

    launch:function(){
        Ext.create('Ext.container.Viewport',{

            items:[
                {
                    xtype:'df1',

                    items:[]
                }
            ]
        });
    }
});

Ext.define('dynamicForm.controller.Users',{
    extend:'Ext.app.Controller',

    views:['DynaForm'],
    models:['FormModel'],
    stores:['FormStore'],

    refs:[
    {
        ref:'form1',
        selector:'df1'
    }
    ],

    init:function(){
        console.log('in init');
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {

        var fromval=this.getFormStoreStore();
        var form=this.getForm1();
        fromval.load({
            scope: this,
            callback: function(records ,operation, success) {
                Ext.each(records, function(rec) {
                 var json= Ext.encode(rec.raw);
                 var response=Ext.JSON.decode(json);
                 for (var i = 0; i < response.data.length; i++) {
                    form.add({
                        xtype: response.data[i].xtype,
                        fieldLabel: response.data[i].title,
                        name: response.data[i].name
                        });
                    }
                    //form.add(Ext.JSON.decode(json).data);
                    form.doLayout();
                });
            }
        });
    }
});

InformationsquelleAutor Balrrazh

-1

Wird es automatisch geschieht, wenn Sie stecken Sie es in jede extjs-Komponente Inhalt :

var jsonValues =  "{
    "form": {
        "fields" : [
                {
                    "field":"textfield",
                    "name": "username"
                },
                { 
                    "field":"textfield",
                    "name": "password"
                },
            ]    
      }
}";

var panel = new Ext.Panel({
        id        : 'myPanel',
        items      : [jsonValues]
});

panel.show();

Haben Sie versucht, diesen code ? Funktioniert es wirklich ?
! wirklich???????
Ist das möglich?

InformationsquelleAutor Totsuzen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.