0

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.

Improve this question
2
  • I do not see any combobox dynamic generation in your code. you have 1 combo in your form and it is in your json. you are not generating it dynamically. when you want to generate them? from which source? Commented Feb 25, 2016 at 7:41
  • yes, you are right i realized that now and used the getCmp to add a xtype to the form panel. Commented Feb 25, 2016 at 10:46
Related questions
3
ExtJs two or more grids on same page
1
Create Multiple Comboboxes dynamically in ExtJS
4
Cascading ComboBoxes in ExtJS EditorGridPanel
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.