PDA

View Full Version : I Need to convert treecolumn to simple combox



jimmyt1001
30 Jul 2014, 9:44 AM
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>

AlsoI 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
}];
}
});

israelroldan
1 Aug 2014, 3:54 AM
Perhaps you could check Ext.ux.TreePicker (http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ux.TreePicker).

Here's an example: https://fiddle.sencha.com/#fiddle/8bh

jimmyt1001
1 Aug 2014, 8:16 AM
Did not think about this option. Thanks a lot!

jimmyt1001
1 Aug 2014, 8:36 AM
Perhaps you could check Ext.ux.TreePicker (http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ux.TreePicker).

Here's an example: https://fiddle.sencha.com/#fiddle/8bh

Any suggestions on how I can merge my code with Tree Picker

jimmyt1001
5 Aug 2014, 1:12 PM
Please help if you can.

I'm also using panels. I would just like to place my tree column data inside of a ComboBox. I was told that I may have to replace my tree column component with a ComboBox component but prefereably I would just like to display my expanded tree column within a ComboBox. Not sure if this is possible. I'm a bit new but I've been working on this for hours.:((

My Code is below

Ext.define('TV.view.configPanel.data.GroupingTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.groupingTreeNew',
title: 'Groupings',
// 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
}];
}
});

israelroldan
7 Aug 2014, 2:20 AM
The treepicker is just a tree that renders inside a combobox, it is exactly what you need.