Need to convert treecolumn to simple combobox

Question

Please bear with me because I am new to EXTJS. I have treecolum. I need to convert the treecolumn into a combobox (dropdown list). I just need the combobox to act as a simple drop down similar to:

<select>
<option>...</option>
<option>...</option>
</select> 

Also

I assume my combobox needs store. So how can I convert treestore to store?

Here is the code that I am using.

Ext.define('TV.view.configPanel.data.GroupingTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.groupingTreeNew',

    title: '2Groupings',

    // Properties
    hideHeaders: true,
    rootVisible: false,
    enableDrop: false,
    scroll: false,
    folderSort: false,
    enableColumnHide: false,
    enableColumnMove: false,
    enableColumnResize: false,
    maintainFlex: true,
    multiSelect: true,
    autoScroll: true,
    forcefit: true,
    cls: 'GridRowWithHandSymbol',

    plugins: [pToolsTips],

    // Custom property
    loaded: false,

    viewConfig: {
    markDirty: false,
    copy: true,
    allowCopy: true,
    plugins: {
        ptype: 'customtreeviewdragdrop',
        dragGroup: 'groupingsddgroup',
        dropGroup: 'groupingsgridddgroup',
        isTarget: false,
        enableDrop: false
    },
    style: { overflow: 'auto' }
},

// Store
store: Stores.GroupingTreeStore,

initComponent: function (cfg) {
    Ext.applyIf(this.config, cfg || {});
    this.columns = this.buildColumns();
    this.callParent(arguments);
},

tbar: [{
    xtype: 'datatabTreeviewTrigger',
    flex: TV.constants.Constant.Flex.OnePart
}, {
    xtype: 'image',
    src: 'Resources/truview/themes/images/search-icon.png',
    padding: 0
}],

buildColumns: function () {
    return [
        {
            xtype: 'treecolumn',
            dataIndex: TV.constants.Constant.DataTabFields.GroupingsTreeColumnName,
            flex: TV.constants.Constant.Flex.OnePart
        }];
    }
});

Answer 1

You don't need to convert the tree to a store, since there's already a store in it:

store: Stores.GroupingTreeStore, // <= here

So you can probably just use it in your combo. It will be something like this:

Ext.define('My.Combo', {
    extend: 'Ext.form.field.Combo'

    ,store: Stores.GroupingTreeStore // the same

    // Then you also require a displayField, and probably a
    // valueField for the combo to work
    ,displayField: '...'
    ,valueField: '...'

    // To mimic the behaviour of a raw HTML select...
    ,editable: false

    // Plus you've got a whole lot of options to customize
    // it to your tastes!

    // ...
});

Take care, however, sharing store instances between components like this (and like was previously done in your code) is not a good idea in my opinion (here's why).