Question

我需要使用EXT JS表单和ASP.NET MVC从数据库中的字段动态填充表单，但我找不到起点。

数据库包括所有设置：字段名称，字段数据类型和原始字段数据。在应用程序的主页面上单击菜单时，单击的项目的设置应显示在单独的表单上。数据类型包括复选框，文本字段和可能的组合框。

我可以轻松返回Json中的所有设置，但我知道表单需要使用Ext.each或其他方法进行迭代，但是我无法理解这个问题。我还考虑使用Ext可重用类型作为模板，从数据库接受Json数据以确定字段名称，类型和内容。

类似的东西：

TextSettings = Ext.extend(Ext.Container, {
    layout: 'column',
    autoHeight: true,
    autoWidth: true,
    initComponent: function() {
        this.items = [
            {
                xtype: 'container',
                style: 'float:left;clear:left;',
                items: [
                    {
                        xtype: 'label',
                        text: 'Setting Name',
                        style: 'display:block;',
                        ref: '../../../NameLabel'
                    },
                    {
                        xtype: 'label',
                        text: 'Setting description',
                        style: 'display:block;font-style:italic;',
                        ref: '../../../DescriptionLabel'
                    }
                ]
            },
            {
                xtype: 'container',
                style: 'float:right;clear:right;',
                items: [
                    {
                        xtype: 'textfield',
                        width: 300,
                        ref: '../../../SettingEdit'
                    }
                ]
            }
        ];
        TextSettings.superclass.initComponent.call(this);
    }
});

这看起来像是速成课程吗？

还有其他人做过类似的事吗？

Answer 1

我在线浏览了这个Ajax函数（可能是Sencha论坛），它似乎正在运行。

 var ajax = Ext.Ajax.request({
        url: '/Controller/Items',
        method: 'get',
        success: function (response) {
            response = Ext.util.JSON.decode(response.responseText);
            //form.add(Ext.decode(response.responseText).data);
            for (i = 0; i < response.data.length; i++) {
                form.add({
                    xtype: response.data[i].xtype,
                    fieldLabel: response.data[i].text,
                    name: response.data[i].name,
                    value: response.data[i].value,
                    style: response.data[i].style,
                    items: response.data[i].items,
                    width: response.data[i].width
                });
            }
            form.doLayout();
        }
    });

使用以下Json输出：

{success: true, data: [{xtype: 'label', text: 'Report', style: 'display:block', ref: '../../../Displaylabel' },{xtype: 'label', text: \"Report Text\", style: 'display:block;font-style:italic;', ref: '../../../DescriptionLabel'},{xtype: \"textfield\", width: 300, ref: \"../../../SettingEdit\", value: \"A comment... for YOU!!!\"}, {xtype: 'checkbox', text: 'Check it for fun'}]}

还有更多工作要做，但这至少给了我动态文本字段。

EXT JS ASP MVC从数据库动态加载表单字段

1 个答案: