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

Question

I am getting form fields from the database. I need to create tabs dynamically and need to display fields inside those tabs based on the index.

Example:

The variable matrix length is 4. It should create 4 tabs. matrix[0] contents should go to first tab. matrix[1] contents should go to second tab. matrix[2] contents should go to third tab and matrix[3] contents should go to fourth tab.

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
    }],
    []
];

Thanks for your help.

Answer 1

Your code is making multiple tabpanels inside the view. Remove the following code:

object['xtype'] = "tabpanel";

And add the object to the 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>