javascript - extjs4如何多次显示字段

Question

我有一个 extjs 表单面板。根据组合框中选择的值，我需要多次显示字段集。即如果选择的值为1，则显示一次设置的字段，如果选择的值为2，则显示两次。

我面临的问题是，字段集仅显示一次。由于我正在更改字段集的标题，因此我可以更清楚地看出正在显示的字段集是 for 循环的最后一次迭代中的字段集。

但是，我可以在 js 控制台中看到 for 循环的所有迭代的日志消息，这意味着循环正在正确执行。

这是我的代码:

 Ext.define('ELM.view.cl.Edit', {
    extend : 'Ext.form.Panel',
    alias : 'widget.cform',
    addMode : false,
    layout : 'fit',
    autoShow : true,
    initComponent : function() {
        this.items = this.buildItems();
        this.callParent(arguments);
    },
    buildItems : function() {
        return [ {
            xtype : 'form',
            id : 'details',
            items : [
                    {
                    xtype : 'fieldset',
                    columnWidth : 0.5,
                    title : 'Details',
                    items : [
                            {
                                    fieldLabel : 'Number Of Scripts Required',
                                    xtype : 'combo',
                                    name : 'noOfScriptsRequired',
                                    id : 'noOfScriptsRequired',
                                    store : new Ext.data.SimpleStore({
                                    fields : [ 'no', 'val' ],
                                    data : [['1','1'],['2','2'],['3','3']]
                                    }),
                                    displayField : 'no',
                                    valueField : 'val',
                                    listeners : {
                                        select : function(combo, value) {
                                            var formpanel = Ext.widget('cform');
                                            var sd = this.up('form').getComponent(
                                                            'scriptdetails');
                                            for ( var i=1; i<=combo.getValue();i++){
                                                console.log(i);
                                                var title="Script details "+i;
                                                sd.setTitle(title);
                                                sd.show();
                                                sd.hidden = false;
                                                console.log(sd);
                                            }
                                        }
                                    }
                                }, ]
                    }, {
                        xtype : 'fieldset',
                        id : 'scriptdetails',
                        columnWidth : '0.5',
                        hidden : true,
                        title : 'Script Details',
                        items : [ {
                            xtype : 'textfield',
                            fieldLabel : 'Script Name',
                            name : 'scriptName'
                        } ]
                    }

            ]
        } ];
    }

});

更新:这是工作代码:

{
    fieldLabel : 'Name :',
    xtype : 'textfield',
    name : 'name'
},{
    fieldLabel : 'Number Of Scripts Required',
    xtype : 'combo',
    name : 'noOfScriptsRequired',
    id : 'noOfScriptsRequired',
    store : new Ext.data.SimpleStore({
        fields : [ 'no', 'val' ],
        data : [ [ '1', '1' ],  [ '2', '2' ],[ '3', '3' ] ]
        }),
    displayField : 'no',
    valueField : 'val',
    listeners : {
        select : function(combo, value) {
            var dynamicPanel = Ext.getCmp("dynamicPanel");
            var scriptField = {
                xtype : 'fieldset',
                items : [
                    {
                    xtype : 'textfield',
                    fieldLabel : 'Script Name',
                    name : 'scriptName'
                    },
                    {
                    xtype : 'textfield',
                    fieldLabel : 'Script Parameters',
                    name : 'scriptParameters'
                    } ]
                    };
            dynamicPanel.removeAll(true);
            for ( var i = 0; i < combo.getValue(); i++) {
                var index = dynamicPanel.items.length;
                var j = i + 1;
                scriptField.title = "Script Details "+ j;
                dynamicPanel.insert(index,scriptField);
                dynamicPanel.doLayout();
            }
        }
        }

提前致谢

Answer 1

您正在字段集中使用 id:'scriptdetails'。在网页中，每个组件或元素都应该有一个唯一的 ID。如果存在具有相同 id 的元素，则渲染元素时会出现问题，例如单个元素渲染时出错或元素可能无法渲染。

在您的情况下，因为您必须重复字段集，所以不要使用固定 ID。使用服务器随机生成的 ID 或使用 ExtJS 提供的“itemId”。

引用:here和 here

更新: 工作 fiddle 是 here

Ext.onReady(function() {

    var store = new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [
            [1, '1'],
            [2, '2'],
            [3, '3'],
        ]
    });

    var scriptField = {
        xtype: 'fieldset',
        columnWidth: '0.5',
        title: 'Script Details',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Script Name',
            hiddenName: 'scriptName'
        }]
    };

    var container = new Ext.Panel({
        layout: 'hbox',
        height: '700px',
        items: [{
            xtype: 'panel',
            id: 'parentContainer',
            height: '700px',
            layout: 'form',
            items: [{
                xtype: 'combo',
                editable: false,
                triggerAction: 'all',
                mode: 'local',
                store: store,
                valueField: 'myId',
                displayField: 'displayText',
                fieldLabel: 'Show Number of Items',
                listeners: {
                    select: function(combo, value) {
                        var dynamicPanel = Ext.getCmp("dynamicPanel");
                        dynamicPanel.removeAll(true);
                        for (var i = 0; i < combo.getValue(); i++) {
                            scriptField.title = "Script Details " + i;
                            dynamicPanel.add(scriptField);
                            dynamicPanel.doLayout();
                            dynamicPanel.ownerCt.doLayout();
                            dynamicPanel.ownerCt.ownerCt.doLayout();
                        }
                    }
                }
            }, {
                xtype: 'panel',
                id: 'dynamicPanel',
                items: []
            }]
        }]
    });

    container.render(Ext.getBody());

});