Implementing a ComboTree extension

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Implementing a ComboTree extension

    Hi guys,

    as i`ve already posted here I need a ComboTree component for my application.

    I am now trying to implement the extension on myself within the Ext.UX project.

    I`ve compiled my customized extension library successfully and the control is showing up in my application.
    However, when i expand a node within the tree popup the assigned TreeLoader event is never raised server-side.

    A request to the server is made, but it fails with an error message ("control ext-gen1000 not found").

    Here is my code:

    ComboTree.js
    Ext.namespace('Ext.ux');
    
    /**
    *
    * @class ComboTree
    * @extends Ext.form.ComboBox
    */
    Ext.ux.ComboTree = Ext.extend(Ext.form.ComboBox, {
        extStore: null,
        tree: null,
        treeId: 0,
        setValue: function(v) {
            var text = v;
            if (this.valueField) {
                var r = this.findExtRecord(this.valueField, v);
                if (r) {
                    text = r.data[this.displayField];
                } else if (this.valueNotFoundText !== undefined) {
                    text = this.valueNotFoundText;
                }
            }
            Ext.ux.ComboTree.superclass.setValue.call(this, text);
            this.lastSelectionText = text;
            if (this.hiddenField) {
                this.hiddenField.value = v;
            }
            this.value = v;
        },
        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 + '">
    
    </tpl>',
                selectedClass: '',
                onSelect: Ext.emptyFn,
                valueField: 'id'
            });
            
            var treeConfig = {
                border: false,
                rootVisible: true,
                loader: this.loader // loader is assigned here
            };
            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);
            Ext.ux.ComboTree.superclass.initComponent.apply(this,
            arguments);
        },
        findExtRecord: function(prop, value) {
            var record;
            if (this.extStore != null) {
                if (this.extStore.getCount() > 0) {
                    this.extStore.each(function(r) {
                        if (r.data[prop] == value) {
                            record = r;
                            return false;
                        }
                    });
                }
            }
            return record;
        },
        onClick: function(node) {
            if (node.attributes.parameter == 9) {
                // 
            } else {
                // 
                this.setValue(node.text);
                this.hiddenField.value = node.id;
                this.collapse();
            }
        },
        onExpand: function() {
            this.tree.render(this.treeId);
        }
    });
    
    
    Ext.reg("combotree", Ext.ux.ComboTree);
    ComboTree.cs
    [assembly: WebResource("Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", "text/javascript")]
    
    namespace Coolite.Ext.UX
    {
        [Designer(typeof(EmptyDesigner))]
        [DefaultProperty("")]
        [Xtype("combotree")]
        [InstanceOf(ClassName = "Ext.ux.ComboTree")]
       
    [ClientScript(Type = typeof(ComboTree), WebResource =
    "Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", FilePath
    = "ux/extensions/combotree/combotree.js")]
        [ToolboxData("<{0}:ComboTree runat=\"server\" Title=\"Combo tree\" Height=\"300\"></{0}:ComboTree>")]
        [Description("Combobox with tree functionality")]
        public class ComboTree : ComboBox
        {
            private TreeLoaderCollection treeLoader;
    
            [ClientConfig("loader>Primary")]
            [Category("Config Options")]
            [NotifyParentProperty(true)]
            [DefaultValue(null)]
            [PersistenceMode(PersistenceMode.InnerProperty)]
            [Description("The root node for the tree.")]
            public virtual TreeLoaderCollection Loader
            {
                get
                {
                    if (this.treeLoader == null)
                    {
                        this.treeLoader = new TreeLoaderCollection();
                    }
    
                    return this.treeLoader;
                }
            }
        }
    }
    Usage:
            <ux:ComboTree ID="_ct" runat="server">
                <Loader>
                    <ext:PageTreeLoader OnNodeLoad="LoadTreeNodeEntries">
                    </ext:PageTreeLoader>
                </Loader>
            </ux:ComboTree>
    I`m
    trying to figure out whats the correct way to implement extensions by
    the GMap extension, but i`m not sure if the code above is the right one
    for my extension.

    Can you pelase help me ?

    Thx,
    Peter
    Last edited by geoffrey.mcgill; Feb 21, 2011 at 7:53 PM.

Similar Threads

  1. [CLOSED] Implementing ExtJS Grid DataDrop plugin
    By Moltas in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Aug 23, 2013, 3:02 PM
  2. Replies: 0
    Last Post: Oct 06, 2011, 1:38 PM
  3. Replies: 5
    Last Post: Jun 29, 2010, 7:23 AM
  4. ComboTree In PanelGrid
    By mrlayeghi in forum 1.x Help
    Replies: 0
    Last Post: Jan 24, 2010, 4:40 AM
  5. Implementing hot Keys for ToolbarButton
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 1
    Last Post: Sep 05, 2009, 4:20 PM

Posting Permissions