javascript - 需要将树形列转换为简单的组合框

Question

请耐心等待，因为我是 EXTJS 的新手。我有树柱。我需要将树列转换为组合框(下拉列表)。我只需要组合框作为一个简单的下拉菜单，类似于:

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

还有

我认为我的组合框需要存储。那么如何将treestore转换为store呢？

这是我正在使用的代码。

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

您不需要将树转换为商店，因为其中已经有一个商店:

store: Stores.GroupingTreeStore, // <= here

所以你可以在你的组合中使用它。它将是这样的:

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!

    // ...
});

但是，请注意，在我看来，像这样的组件之间共享存储实例(就像之前在代码中所做的那样)并不是一个好主意( here's why )。