Question

请耐心等待我，因为我是EXTJS的新手。我有treecolum。我需要将treecolumn转换为组合框（下拉列表）。我只需要将组合框作为一个简单的下拉列表，类似于：

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

另外

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

以下是我正在使用的代码。

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）。

需要将treecolumn转换为简单的组合框

1 个答案: