Create Multiple Comboboxes dynamically in ExtJS 3.0

主宰稳场 提交于 2020-01-07 05:40:13

问题


i am trying to create a comboBox on a form inside a for loop but i am unable to do so, can someone help?

i found this code on stackoverflow however this doesn't seem to work on my version of EXTJS which is 3.3

stackoverflow code:
for (var i=0; i < 8; i++) {
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Combobox '+i,
    store: ['Option1','Option2'], //better to use a dynamic store
    renderTo: Ext.getBody()
});
};

My Code:

var questionStore2 = null;

example.SurveyFieldDefaultWindow = Ext.extend(Ext.Window, {

    id: 'survey-field-win',
    title: 'Custom Survvey',
    modal: true,
    closable: true,
    width: 500,
    height: 600,
    frame: true,
    bodyStyle: 'padding: 5px',
    forceFit: true,
    constrainHeader: true,
    layout: 'fit',
    initComponent: function() {
        this.canEdit = this.checkEditPermissions();
        questionStore2 = questionStore;

        var data = questionStore2.data.items



        for (var i = 0; i < data.length; i++) {
            Ext.apply(
                this, {
                    items: [{
                        xtype: 'tabpanel',
                        id: 'survey-field-form-tabpanel',
                        layoutOnTabChange: true,
                        activeTab: 0,
                        items: [{
                            title: 'Questions',
                            layout: 'fit',

                            items: [{
                                xtype: 'form',
                                id: 'survey-field-form',
                                border: false,
                                bodyStyle: 'padding: 5px;',
                                frame: true,
                                defaultType: 'textfield',
                                items: [{
                                    xtype: 'combo',
                                    fieldLabel: data[i].data.name,
                                    hiddenName: 'fieldTypeName',
                                    id: "fieldTypeName",
                                    store: data[i].data.selectOptions.list,
                                    valueField: 'id',
                                    displayField: 'name',
                                    typeAhead: true,
                                    allowBlank: false,
                                    mode: 'local',
                                    selectOnFocus: true,
                                    triggerAction: 'all',
                                    emptyText: 'Survey Field Type',

                                    disabled: this.existingField,
                                    width: 190,
                                    listeners: {
                                        'select': function(combo, newValue, oldValue) {

                                            var iComboValue = combo.getValue();
                                            if (newValue.data.name == "111111111111111") {
                                                newLabel = questionStore2.data.items[0].data.name;
                                                if (!Ext.getCmp('fieldTypeName').rendered) {
                                                    Ext.getCmp('fieldTypeName').fieldLabel = newLabel;
                                                } else {
                                                    Ext.getCmp('fieldTypeName').label.update(newLabel);
                                                }
                                            }
                                        }
                                    }
                                }]
                            }]
                        }]
                    }],
                    buttons: [{
                        id: 'add-button',
                        text: 'Default-Save',
                        disabled: !Ext.getCmp('survey-field-win').canEdit,
                        handler: function() {
                            alert("testing");
                        },
                        scope: this
                    }, {
                        text: 'Default-Cancel',
                        handler: function() {
                            alert("testing-close");
                        },
                        scope: this
                    }]

                }
            );
            example.SurveyFieldDefaultWindow.superclass.initComponent.apply(this, arguments);
        }

    },
    checkEditPermissions: function() {
        return Security.hasAccess("Surveys", Security.UPDATE_ACCESS);
    }

});
Ext.reg('exxample.SurveyFieldDefaultWindow', example.SurveyFieldDefaultWindow);

the contents of the questionStore2.data.items object

questionStore2.data.items [sbdata: Objectid: 2720json: Objectstore: Ext.data.Store.Ext.extend.constructor__proto__: F, sb, sb]

when i run this code, i get the only 1 combobox with the last element name and option list.

P.S: i am complete noob.

来源:https://stackoverflow.com/questions/35599816/create-multiple-comboboxes-dynamically-in-extjs-3-0

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