使用 json 数据如何在 sencha 中创建表单答案

【问题标题】：Using json data how to create form in sencha使用 json 数据如何在 sencha 中创建表单
【发布时间】：2014-01-30 21:10:40
【问题描述】：

我想从文件中读取 json 数据 - json 文件的内容如下所示

    {
    "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'}
                        ]
                },

            ]    
      }
}

型号

    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'}
         ]
    }
});

商店

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

这就是我尝试的目的。

    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"}
                    ]
            });
        }
    });

两个文本文件和日期都很好，但我不知道如何从商店中获取选择字段的选项，现在刚刚听到编码。

总而言之基于以上json数据，我需要动态创建煎茶表单。

【问题讨论】：

@TDeBailleul 我在那个网站上找不到任何与我的问题相关的帖子。
不，与您的问题无关。但是你读过这篇文章吗？来自文章：“如果您是开发人员，并且您要向其他开发人员询问技术问题（在论坛上、通过电子邮件、聊天频道或亲自），您最好准备好回答问题“你试过什么？” [...] 问题在于，这个人解决问题的技巧是寻求解决方案。不是寻求关于如何处理任务的建议，而只是询问代码，完全形成并准备好“
@TDeBailleul 我从不在堆栈溢出中寻找现成的代码，我只是想要一个想法，我正在尝试
好的，您可以访问 JSON 吗？您可以在发送/检索之前对其进行修改吗？
@TDeBailleul，我更新了我尝试过的内容

标签： json extjs sencha-touch sencha-touch-2

【解决方案1】：

最好遵循 MVC 结构：

创建模型：

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

有代理的商店：

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

formData.json 文件：

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

然后根据需要使用FormStore填写表单数据。

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 感谢@Malay Shah，我做了完全相同的事情，我可以从商店获取字段值，现在我正在尝试从已经创建的面板中动态添加字段，但我还没有成功.
这可能会有所帮助，尽管有点偏离轨道。 stackoverflow.com/questions/11616286/… 具体来说，您可以在前 3 个项目中将 options 属性设置为空 {}。
如何从表单模型中获取 options 属性
var opt= formval.getAt(i).raw.options; if(opt) { console.log(opt); } 它记录下来，但还没有找到合适的方法。

【解决方案2】：

{
    "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();
                });
            }
        });
    }
});

【讨论】：

【解决方案3】：

如果你将它插入到任何 extjs 组件内容中，它会自动完成：

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

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

panel.show();

【讨论】：