extjs4如何多次显示字段

Posted 2023-02-23

【中文标题】extjs4如何多次显示字段

【英文标题】：extjs4 how to display field multiple times

【发布时间】：2014-12-09 02:43:48

【问题描述】：

我有一个 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();
            
        
        

提前致谢

【参考方案1】：

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

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

参考：here 和 here

更新： 工作小提琴是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());

);

【讨论】：

将 id 更改为 itemId 没有帮助..我已经尝试过了。而且我不确定如何使用来自服务器的随机 id。您能否详细说明如何做到这一点？

@user3604227 我在回答中遗漏了一些东西。您只是在迭代中调用 fieldset 的 show() 。理想情况下，这不会向表单添加多个字段集。您必须将字段集添加到表单中。

@user3604227 更新了我的答案，这将根据您的要求帮助您

@user3604227 只做 scriptField.title = "Script Details" + i;在 for 循环内。我已经更新了小提琴和答案。

@user3604227 是 dyanmicPanel.ownerCt 仅指动态 Panel 的直接父级。它不引用根容器。

【参考方案2】：

您的 buildItems 代码在开始时执行一次。之后，您再也不会真正添加任何项目。您希望使用此功能执行的操作：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-add

如果你想添加一个项目，你必须创建一个新项目。您不能两次将相同的项目添加到容器中。所以你必须即时创建它们：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-create

为此，您应该使用一些已定义的“蓝图”，在其中定义它是一个字段集，包含一个文本字段，等等：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-define

项目的蓝图不应包含 id。我会使用 form.items[i] 来引用所有项目，并完全省略 id。

不过，您仍然有一个问题：您的项目都包含同名的文本字段。这不适用于submit()。但这完全是另一回事。