如何在 ExtJS Tabpanel 中显示 JSON 表单字段？答案

【问题标题】：How to display JSON form fields in ExtJS Tabpanel?如何在 ExtJS Tabpanel 中显示 JSON 表单字段？
【发布时间】：2018-04-16 17:59:47
【问题描述】：

我正在从数据库中获取表单字段。我需要动态创建选项卡，并且需要根据索引在这些选项卡内显示字段。

例子：

可变矩阵长度为 4。它应该创建 4 个选项卡。 matrix[0] 内容应该转到第一个选项卡。 matrix[1] 内容应该转到第二个选项卡。 matrix[2] 内容应该转到第三个选项卡，matrix[3] 内容应该转到第四个选项卡。

var matrix = [
    [{
        "allowBlank": false,
        "xtype": "textfield",
        "fieldLabel": "Full Name <span class=\"red\">*</span>",
        "labelWidth": 180,
        "width": 500,
        "labelAlign": "left",
        "name": "refDataName",
        "fieldsetId": 1,
        "colspan": 1,
        "maxLength": 100
    }, {
        "xtype": "textfield",
        "fieldLabel": "First Name",
        "labelWidth": 180,
        "width": 500,
        "labelAlign": "left",
        "name": "refDataOne",
        "fieldsetId": 1,
        "colspan": 1,
        "maxLength": 100
    }, {
        "xtype": "textfield",
        "fieldLabel": "Last Name",
        "labelWidth": 180,
        "width": 500,
        "labelAlign": "left",
        "name": "refDataTwo",
        "fieldsetId": 1,
        "colspan": 1,
        "maxLength": 100
    }],
    [{
        "xtype": "textfield",
        "fieldLabel": "Parent Name",
        "labelWidth": 180,
        "width": 500,
        "labelAlign": "left",
        "name": "refDataThree",
        "fieldsetId": 2,
        "colspan": 1,
        "maxLength": 100
    }],
    [{
        "xtype": "textfield",
        "fieldLabel": "Address",
        "labelWidth": 180,
        "width": 500,
        "labelAlign": "left",
        "name": "refDataFive",
        "fieldsetId": 3,
        "colspan": 1,
        "maxLength": 100
    }],
    []
];

感谢您的帮助。

【问题讨论】：

这不是一个代码编写服务 :) 你应该发布你尝试过的代码，如果你不能自己弄清楚我建议你做更多的研究并试一试.如果仍然无法解决，您可以返回这里使用您的代码并寻求一些指导。
我已经尝试了一些东西，for (var z = 0; z 0) { object = {};对象['xtype'] = "tabpanel"; object['title'] = "表格-" +z; object['layout'] = {type: "table", columns: 2}; object['defaults'] = {anchor: "100%", bodyStyle: "padding:40px", labelStyle: "padding-left: 45px"};对象['可折叠'] = true;对象['items'] = 矩阵[z]; } } this.getView().add(object);无法获取。
您可以尝试格式化您的代码吗？
对不起，您可以在这里查看：paste.ofcode.org/W8zdMBn4S73cQJJT5AWjcz
外部链接会影响您帖子的寿命。

标签： javascript extjs

【解决方案1】：

您的代码在视图中创建了多个选项卡面板。删除以下代码：

object['xtype'] = "tabpanel";

并将object 添加到tabpanel。

Ext.application({
      name: 'Fiddle',

      launch: function() {
      var matrix = [
      [
          {
            "allowBlank": false,
            "xtype": "textfield",
            "fieldLabel": "Full Name <span class=\"red\">*</span>",
            "labelWidth": 180,
            "width": 500,
            "labelAlign": "left",
            "name": "refDataName",
            "fieldsetId": 1,
            "colspan": 1,
            "maxLength": 100
        },
        {
            "xtype": "textfield",
            "fieldLabel": "First Name",
            "labelWidth": 180,
            "width": 500,
            "labelAlign": "left",
            "name": "refDataOne",
            "fieldsetId": 1,
            "colspan": 1,
            "maxLength": 100
        },
        {
            "xtype": "textfield",
            "fieldLabel": "Last Name",
            "labelWidth": 180,
            "width": 500,
            "labelAlign": "left",
            "name": "refDataTwo",
            "fieldsetId": 1,
            "colspan": 1,
            "maxLength": 100
        }
    ],
    [
        {
            "xtype": "textfield",
            "fieldLabel": "Parent Name",
            "labelWidth": 180,
            "width": 500,
            "labelAlign": "left",
            "name": "refDataThree",
            "fieldsetId": 2,
            "colspan": 1,
            "maxLength": 100
        }
    ],
    [
        {
            "xtype": "textfield",
            "fieldLabel": "Address",
            "labelWidth": 180,
            "width": 500,
            "labelAlign": "left",
            "name": "refDataFive",
            "fieldsetId": 3,
            "colspan": 1,
            "maxLength": 100
        }
    ],
    []
]; 
var tabpanel=Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
});
for (var z = 0; z < matrix.length; z++) {
          if(matrix[z].length > 0) {
            object = {};
            object['title'] = "Form - " +z;
            object['layout'] = {type: "table", columns: 2};
            object['defaults'] = {anchor: "100%", bodyStyle: "padding:40px", labelStyle: "padding-left: 45px"};
            object['collapsible'] = true;
            object['items'] = matrix[z];
            tabpanel.add(object);
          }
      }
        }
      });

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript"  src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

【讨论】：