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

Posted 2021-05-06

我从数据库中获取表单字段。我需要动态创建标签，并需要根据索引显示这些标签内的字段。

例：

变量矩阵长度为4.它应该创建4个选项卡。 matrix [0]内容应该转到第一个标签。 matrix [1]内容应该转到第二个标签。 matrix [2]内容应该转到第三个选项卡，矩阵[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
    }],
    []
];

谢谢你的帮助。

答案

您的代码在视图中创建了多个tabpanel。删除以下代码：

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>

以上是关于如何在ExtJS Tabpanel中显示JSON表单字段？的主要内容，如果未能解决你的问题，请参考以下文章

extjs 3.4 中 TabPanel 中的标题折叠

如何以编程方式隐藏 TabPanel 中的 Tab（ExtJS 3）

如何更改 TabPanel extjs 的像素位置？

如何在 ExtJs 中单击 TabPanel 中的 Tab 菜单时初始化各个选项卡数据？

ExtJS (3.4)：更新 TabPanel 中面板的工具提示

ExtJS3：无法读取未定义的属性“parentNode”