How to create a combobox of possible values

657 views Asked by At

Is there a way to dynamically populate a combobox with the attributes a certain property of an artifact can take on?

e.g.

I have a custom field set up on User Stories. I want to be able to populate a combobox with all the possible values for this custom field without hard-coding it in.

1

There are 1 answers

0
nickm On BEST ANSWER

In the code below the combobox is automatically populated with the allowed values of the custom field of dropdown type:

 Ext.define('CustomApp', {
                extend: 'Rally.app.App',
                componentCls: 'app',

                items: [
                    {
                        xtype: 'container',
                        itemId: 'kbFilter'
                    },
                    {
                        xtype: 'container',
                        itemId: 'grid',
                        width: 800
                    }
                ],

                launch: function() {
                    this.down('#kbFilter').add({
                        xtype: 'checkbox',
                        cls: 'filter',
                        boxLabel: 'Filter table by custom field',
                        id: 'kbCheckbox',
                        scope: this,
                        handler: this._onSettingsChange
                    });

                    this.down('#kbFilter').add({
                        xtype: 'rallyattributecombobox',
                        cls: 'filter',
                        model: 'Defect',
                        field: 'MyKB',                                    
                        listeners: {
                            ready: this._onKBComboBoxLoad,
                            select: this._onKBComboBoxSelect,
                            scope: this
                        }
                    });
                },


                _onKBComboBoxLoad: function(comboBox) {
                    this.kbComboBox = comboBox;

                    Rally.data.ModelFactory.getModel({
                        type: 'Defect',
                        success: this._onModelRetrieved,
                        scope: this
                    });
                },

                _getFilter: function() {
                    var filter = [];

                    if (Ext.getCmp('kbCheckbox').getValue()) {
                        filter.push({
                            property: 'MyKB',                                 
                            operator: '=',
                            value: this.kbComboBox.getValue()
                        });
                    }
                    return filter;
                },

                _onKBComboBoxSelect: function() {
                    if (Ext.getCmp('kbCheckbox').getValue()) {
                        this._onSettingsChange();
                    }
                },
                _onSettingsChange: function() {
                    this.grid.filter(this._getFilter(), true, true);
                },

                _onModelRetrieved: function(model) {
                    this.grid = this.down('#grid').add({
                        xtype: 'rallygrid',
                        model: model,
                        columnCfgs: [
                            'FormattedID',
                            'Name',
                            'MyKB'                 
                        ],
                        storeConfig: {
                            context: this.context.getDataContext(),
                            filters: this._getFilter()
                        },
                        showPagingToolbar: false
                    });
                }
            });

In this example I have a dropdown field with Name: myKB and Display Name: My KB. In the WS API the name shows with prepended c_, as in c_myKB. However, if I use c_myKB this error comes up:

Uncaught Rally.ui.combobox.FieldValueComboBox._populateStore(): field config must be specified when creating a Rally.ui.combobox.FieldValueComboBox

Use the display name of the field, without spaces. Here is a screenshot showing this app in action: enter image description here