PDA

View Full Version : [2.x] ComboBox Tree



xiexueze
23 Feb 2008, 12:22 AM
Hi all:

here I have two examples about the comboBox, the first with a tree, the second with a panel, exactly with what you want

First example:



var comboxWithTree = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
shadow:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<tpl for="."><div style="height:200px"><div id="tree1"></div></div></tpl>',
selectedClass:'',
onSelect:Ext.emptyFn
});
var tree1 = new Ext.tree.TreePanel({
loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
border:false,
root:new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'})
});
tree1.on('click',function(node){
comboxWithTree.setValue(node.text);
comboxWithTree.collapse();
});
comboxWithTree.on('expand',function(){
tree1.render('tree1');
});
comboxWithTree.render('comboxWithTree');


second example:


var comboxWithPanel = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<div style="height:200px"><div id="panel"></div></div>',
selectedClass:'',
onSelect:Ext.emptyFn
});
comboxWithPanel.render('comboxWithPanel');
var tree2 = new Ext.tree.TreePanel({
loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),
border:false,
autoScroll:true,
root:new Ext.tree.AsyncTreeNode({text: 'root',id:'0'})
});
var border = new Ext.Panel({
title:'title',
layout:'fit',
border:false,
height :200,
tbar:[{text:'ok1'},'-',new Ext.form.TextField({id: 'bb',width:60}),{text:'search1'}],
bbar:[{text:'ok2'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'search2'}],
items: tree2
});
comboxWithPanel.on('expand',function(){
border.render('panel');
});

jsakalos
23 Feb 2008, 1:25 AM
Any demo? Or a screenshot at least? Otherwise I don't know if it is "exactly what I want" ;)

xiexueze
23 Feb 2008, 3:57 AM
here are the pictures of the two examples ;)

jsakalos
23 Feb 2008, 4:06 AM
Thanks for pictures. Interesting. I have no immediate use for it but it's good to know that this extension exists and that we can use it when the situation comes.

Thank you for your work.

Pagebaker
25 Feb 2008, 1:09 PM
Nice I'll need something like this in the near future, looks like it still needs some finetuning, but nice work!

infinit
12 Mar 2008, 8:10 AM
Great, but how to set the params to submit ? e.g. I need to submit the selected category_id and category_name; and when loading data, the comboboxtree can be populated with the existing data?

Appreicate for your help.

wasp
13 Mar 2008, 6:21 AM
I need the same - sending the id, not the name and prefilling it with data.

For the first - my dirty solution was hidden field, for the second - i still haven't found solution yet.

6epcepk
6 May 2008, 12:03 AM
Thanks for ux!
But how I can modify .bmp ux files?
Thx.

galdaka
6 May 2008, 5:32 AM
Go Advanced => Manage attachments

But... Is posible live demo? If you don

6epcepk
6 May 2008, 11:27 AM
galdaka,
And what I must see there?
(If your answer for me.)

57258815
18 May 2008, 11:13 AM

mystix
19 May 2008, 12:06 AM
[QUOTE=57258815;169624]

yubo1007
11 Jun 2008, 12:27 AM
最近项目使用了EXT

Thomas_K
13 Jun 2008, 1:03 AM
thx for this example, very usefull!

woog
22 Jun 2008, 4:03 AM
请问楼主兄弟,你能不能 给个具体的 在线的实例给看看。怎么觉得你的comboxtree的tree的限制比较大。你能不能把你的东西做一个演示show一下。非常感谢,a fans of ext。

marcing
31 Aug 2008, 10:08 AM
Thanks for this great idea! I find it very useful.

Here is the code which works for me on Ext 2.2 with id/value combo:



var flatCategoriesStore = new Ext.data.Store
({
// load using HTTP
proxy: new Ext.data.HttpProxy
({
url: 'categories/flat',
method: 'GET'
}),
reader: new Ext.data.JsonReader
({
root: 'items',
totalProperty: 'count',
id: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
})
});

var comboAlias = new Ext.form.ComboBox
({
store: flatCategoriesStore,
displayField: 'name',
valueField: 'id',
hiddenName: 'alias',
fieldLabel: Lang.Alias,
allowBlank: true,
editable: false,
shadow: false,
anchor: '100%',
mode: 'local',
triggerAction: 'all',
maxHeight: 200,
emptyText: Lang.None,
tpl: '<tpl for="."><div><div id="treeAddAlias"></div></div></tpl>',
selectedClass: '',
onSelect: Ext.emptyFn,
renderer:
function(data)
{
record = flatCategoriesStore.getById(data);

if(record)
{
return record.data.name;
}
else
{
return data;
}
},
tooltipText: Lang.AliasTip,
listeners:
{
render: CMS.setFormFieldTooltip
}
});

var treeAlias = new Ext.tree.TreePanel
({
loader: new Ext.tree.TreeLoader({dataUrl: 'categories/combo'}),
root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
lines: false,
autoScroll: true,
border: false,
height: 200,
enableDD: false,
useArrows: true,
listeners:
{
click: function(node)
{
comboAlias.setValue(node.attributes.cid);
comboAlias.collapse();
}
}
});

comboAlias.on('expand', function()
{
treeAlias.render('treeAddAlias');
});

flatCategoriesStore.on('load', function()
{
comboAlias.setValue(category.attributes.alias);
});

flatCategoriesStore.load();


http://img98.imageshack.us/img98/7978/combofe5.png

galdaka
1 Sep 2008, 4:31 AM
Thanks for this great idea! I find it very useful.

Here is the code which works for me on Ext 2.2 with id/value combo:



var flatCategoriesStore = new Ext.data.Store
({
// load using HTTP
proxy: new Ext.data.HttpProxy
({
url: 'categories/flat',
method: 'GET'
}),
reader: new Ext.data.JsonReader
({
root: 'items',
totalProperty: 'count',
id: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
})
});

var comboAlias = new Ext.form.ComboBox
({
store: flatCategoriesStore,
displayField: 'name',
valueField: 'id',
hiddenName: 'alias',
fieldLabel: Lang.Alias,
allowBlank: true,
editable: false,
shadow: false,
anchor: '100%',
mode: 'local',
triggerAction: 'all',
maxHeight: 200,
emptyText: Lang.None,
tpl: '<tpl for="."><div><div id="treeAddAlias"></div></div></tpl>',
selectedClass: '',
onSelect: Ext.emptyFn,
renderer:
function(data)
{
record = flatCategoriesStore.getById(data);

if(record)
{
return record.data.name;
}
else
{
return data;
}
},
tooltipText: Lang.AliasTip,
listeners:
{
render: CMS.setFormFieldTooltip
}
});

var treeAlias = new Ext.tree.TreePanel
({
loader: new Ext.tree.TreeLoader({dataUrl: 'categories/combo'}),
root: new Ext.tree.AsyncTreeNode(),
rootVisible: false,
lines: false,
autoScroll: true,
border: false,
height: 200,
enableDD: false,
useArrows: true,
listeners:
{
click: function(node)
{
comboAlias.setValue(node.attributes.cid);
comboAlias.collapse();
}
}
});

comboAlias.on('expand', function()
{
treeAlias.render('treeAddAlias');
});

flatCategoriesStore.on('load', function()
{
comboAlias.setValue(category.attributes.alias);
});

flatCategoriesStore.load();


http://img98.imageshack.us/img98/7978/combofe5.png


Sorry, but... Where is the code of combobox tree?

Greetings,

WebArchitect
9 Sep 2008, 4:30 AM
Just a quick hack on this one...

tree1.on('click',function(node){
comboxWithTree.valueNotFoundText = node.text;
comboxWithTree.setValue(node.id);
comboxWithTree.collapse();
});

So now we can see the selected text and the selected id is submitted to the server.

galdaka
9 Sep 2008, 4:40 AM
Just a quick hack on this one...

tree1.on('click',function(node){
comboxWithTree.valueNotFoundText = node.text;
comboxWithTree.setValue(node.id);
comboxWithTree.collapse();
});

So now we can see the selected text and the selected id is submitted to the server.

Where is the code of this component?

WebArchitect
9 Sep 2008, 4:51 AM
It's just a small modification on the initial code posted here... It's not so difficult to figure it out.

galdaka
9 Sep 2008, 7:50 AM
It's just a small modification on the initial code posted here... It's not so difficult to figure it out.

Where is the code that is posted here? I dont view initial code, only two photos in first post!!

Greetings,

maarten
6 Nov 2008, 12:14 AM
Just a quick hack on this one...

tree1.on('click',function(node){
comboxWithTree.valueNotFoundText = node.text;
comboxWithTree.setValue(node.id);
comboxWithTree.collapse();
});

So now we can see the selected text and the selected id is submitted to the server.

Took me a while to get this working in ext 2.2. Apparently the valueNotFoundText is set only if the valueField is set as well.

The first example will then become:



var comboxWithTree = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
shadow:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<tpl for="."><div style="height:200px"><div id="tree1"></div></div></tpl>',
selectedClass:'',
onSelect:Ext.emptyFn,
valueField: 'id'
});
var tree1 = new Ext.tree.TreePanel({
loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
border:false,
root:new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'})
});
tree1.on('click',function(node){
comboxWithTree.valueNotFoundText = node.text;
comboxWithTree.setValue(node.id);
comboxWithTree.collapse();
});
comboxWithTree.on('expand',function(){
tree1.render('tree1');
});
comboxWithTree.render('comboxWithTree');

galdaka
6 Nov 2008, 12:22 AM
There is no code in first post. Only two images.

Thanks in advance,

skaue
6 Nov 2008, 1:15 PM
There is no code in first post. Only two images.

Thanks in advance,

@galdaka:

Seems to me that this isn't an extension or plugin, just an idea of using the builtin mechanisms in ExtJs. The code is simply the code written in the first post (and not the attached zips containing the images). Get it? ;)

timo.nuros
17 Jan 2009, 11:37 AM
I wrapped the whole thing together into a custom class:



Ext.ns("Netwatch24");

Netwatch24.TreeComboBox = Ext.extend(Ext.form.ComboBox, {
tree: null,
treeId: 0,
initComponent: function(){
this.treeId = Ext.id();
this.focusLinkId = Ext.id();

Ext.apply(this, {
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
shadow:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '<tpl for="."><div style="height:200px"><div id="'+this.treeId+'"></div><a href="#" class="x-grid3-focus" id="'+this.focusLinkId+'" tabIndex="-1"/></div></tpl>',
selectedClass:'',
onSelect:Ext.emptyFn,
valueField: 'id'
});

var treeConfig = {
border:false
};

Ext.apply(treeConfig, this.treeConfig);

if (!treeConfig.root) {
treeConfig.root = new Ext.tree.AsyncTreeNode({text: 'treeRoot',id:'0'});
}

this.tree = new Ext.tree.TreePanel(treeConfig);

this.on('expand', this.onExpand);
this.tree.on('click', this.onClick, this);

Netwatch24.TreeComboBox.superclass.initComponent.call(this);

},
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.isExpanded()){
this.collapse();
}else {
this.onFocus({});
if(this.triggerAction == 'all') {
this.doQuery(this.allQuery, true);
} else {
this.doQuery(this.getRawValue());
}
}
},
onFocus : function () {
Netwatch24.TreeComboBox.superclass.onFocus.call(this);
Ext.get(this.focusLinkId).focus();
},
onClick: function (node) {
this.valueNotFoundText = node.text;
this.setValue(node.id);
this.collapse();
},
onExpand: function(){
this.tree.render(this.treeId);
this.tree.focus();
}
});

Ext.reg("netwatch24.treecombobox", Netwatch24.TreeComboBox);


Feel free to adjust the namespace to your needs. Maybe someone likes to add some minor detail work (documentation, more generic implementation).

Regards,
Timo

festr
3 Jul 2009, 2:10 PM
This extension is not supposed to load state of the tree like classic combo when loading data to a form? I'll need this and thinikg about ways how to achieve that. Anyone solved this?

shahdollie
8 Sep 2010, 3:27 PM
hi everyone

Thanks for this wonderful idea..........it really helped alot....

But I have a small problem ...... when + or arrow on tree is clicked, the combobox collapses

I think it is because of onTriggerClick event of combobox...so is there any way to stop this????????

I just want to suspend/cancel onTriggerClick event of combobox when i expand it and resume/allow when i collapse it....

For reference follow is the code for onTriggerClick event of combobox

<div id="method-Ext.form.ComboBox-onTriggerClick"></div>
/**
* @method onTriggerClick
* @hide
*/
// private
// Implements the default empty TriggerField.onTriggerClick function
onTriggerClick : function(){
if(this.readOnly || this.disabled){
return;
}
if(this.isExpanded()){
this.collapse(); //THIS MAKES COMBOBOX TO COLLAPSE
this.el.focus();
}else {
this.onFocus({});
if(this.triggerAction == 'all') {
this.doQuery(this.allQuery, true);
} else {
this.doQuery(this.getRawValue());
}
this.el.focus();
}
}

Please help me....Thanks

Regards

codeworx
20 Oct 2010, 5:48 AM
see thread http://www.sencha.com/forum/showthread.php?109259-Stop-combobox-from-collapsing-when-in-tree-within-combobox-is-clicked&p=527651&posted=1#post527651 for a possible but dirty solution

sencha123456
22 Nov 2011, 5:26 PM
Thank you for sharing information, I'm so need this information!

harman
22 Feb 2012, 7:09 AM
Hi,

Really a useful work for all in need.
But can anyone suggest an Equvivalent in ExtJS 4?
I need a combo that on expanding shows a Tree structure.

I would really appreciate the help.

Thanks in advance.

misadecastro
21 Jun 2012, 12:03 PM
Very good!

labafian
9 Oct 2013, 1:27 AM
i can't download,
file not found on server
plese fix this
tnx