extjs4 how to display field multiple times

怎甘沉沦 提交于 2019-12-11 20:34:07

问题


I have an extjs form panel. Based on the value selected in the combo box, I need to display a fieldset multiple times. That is,display the field set once if value chosen is 1, twice if value chosen is 2.

The problem that I am facing is that, the field set is being displayed only once. Since, I am changing the title of the fieldset, I can tell more clearly that the fieldset being displayed is the one in the last iteration of the for loop.

However,I can see the log messages in the js console for all the iterations of the for loop which means that the loop is being executed properly.

Here is my code:

 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'
                        } ]
                    }

            ]
        } ];
    }

});

UPDATE: Here is the working code:

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

Thanks in advance


回答1:


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.

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.

Refer: here and here

Update: Working fiddle is 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());

});



回答2:


Your buildItems code is executed once, at the beginning. Afterwards, you never really add any more items. Which you would want to do using this function: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.AbstractContainer-method-add

If you want to add an item, you have to create a new one. You can't add the same item into a container twice. So you would have to create them on the fly: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-create

And for this, you should use some defined "blueprint", where you define that it is a fieldset, contains a textfield, and so on: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-define

A blueprint of an item should never contain an id. I would refer to all the items by using form.items[i], and omit the id entirely.

You still have one problem, though: Your items all contain a textfield by the same name. This won't work well with submit(). But that's another story entirely.



来源:https://stackoverflow.com/questions/26358553/extjs4-how-to-display-field-multiple-times

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!