[2.x] ComboBox Tree

[57258815]

[mystix]

[QUOTE=57258815;169624]

[yubo1007]

最近项目使用了EXT

[Thomas_K]

thx for this example, very usefull!

[woog]

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

[marcing]

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();

[galdaka]

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();

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

Greetings,

[WebArchitect]

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]

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]

It's just a small modification on the initial code posted here... It's not so difficult to figure it out.