且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

extjs4如何多次显示字段

更新时间:2023-09-18 21:28:10

您在字段集中使用id:'scriptdetails'。在网页中,每个组件或元素都应具有唯一的ID。如果有具有相同id的元素,则在呈现元素时将存在问题,如单个元素被呈现具有错误或元素可能不被呈现。

You are using id:'scriptdetails' in fieldset. In web pages each component or element should have an unique id. If there are elements with same id then there will be problems in rendering the elements like single element is rendered with errors or element may not be rendered.

在您的情况下,由于您必须重复字段集,请不要使用固定ID。使用从服务器随机生成的ID或使用ExtJS提供的'itemId'。

In your case as you have to repeat the field set, don't not use fixed id. Use a random generated id from server or use 'itemId' which ExtJS provides.

请参阅:此处这里

更新:
工作小提琴是这里

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());

});