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

Question

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

Example:

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

感谢您的帮助。

Answer 1

您的代码正在 View 内创建多个选项卡面板。删除以下代码:

object['xtype'] = "tabpanel";

并将对象添加到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>