Need to convert treecolumn to simple combobox
-
21-12-2019 - |
Frage
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
}];
}
});
Lösung
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).
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow