Implementing a ComboTree extension

Page 2 of 4 FirstFirst 1234 LastLast
  1. #11

    updated ComboTree for Ext.Net 1.2

    The latest attached files is for Coolite and I updated ComboTree for Ext.Net 1.2. You can get it in the attached files.
    But When I test it in a page, I got a js error. My codes are belows.
    pages:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="pages_Default" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Assembly="Ext.Net.UX" Namespace="Ext.Net.UX" TagPrefix="ux" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ux:ComboTree ID="ComboTree1" runat="server" Height="300" Title="Combo tree">
            <Tree>
                <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" AutoHeight="true" Border="false">
                    <Loader>
                        <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                        </ext:PageTreeLoader>
                    </Loader>
                    <Root>
                        <ext:AsyncTreeNode NodeID="0" Text="Root" />
                    </Root>
                </ext:TreePanel>
            </Tree>
        </ux:ComboTree>
        </form>
    </body>
    </html>
    page code behiend
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    public partial class pages_Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        protected void NodeLoad(object sender, NodeLoadEventArgs e)
        {
            if (!string.IsNullOrEmpty(e.NodeID))
            {
                for (int i = 1; i < 6; i++)
                {
                    AsyncTreeNode asyncNode = new AsyncTreeNode();
                    asyncNode.Text = e.NodeID + i;
                    asyncNode.NodeID = e.NodeID + i;
                    e.Nodes.Add(asyncNode);
                }
                for (int i = 6; i < 11; i++)
                {
                    Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();
                    treeNode.Text = e.NodeID + i;
                    treeNode.NodeID = e.NodeID + i;
                    treeNode.Leaf = true; e.Nodes.Add(treeNode); 
                }
            }
        } 
    }
    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 + '"></div></div></tpl>',
                    selectedClass: '',
                    onSelect: Ext.emptyFn,
                    valueField: 'id'
                });
                
                this.tree = new Ext.tree.TreePanel(this.tree);
                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
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    using System.Web.UI;
    using Ext.Net;
    
    [assembly: WebResource("Ext.Net.UX.Extensions.ComboTree.resources.ComboTree.js", "text/javascript")]
    
    namespace Ext.Net.UX
    {
        [Designer(typeof(EmptyDesigner))]
        [DefaultProperty("")]
        [ToolboxBitmap(typeof(UX.ComboTree), "Extensions.ComboTree.ComboTree.bmp")]
        [ToolboxData("<{0}:ComboTree runat=\"server\" Title=\"Combo tree\" Height=\"300\"></{0}:ComboTree>")]
        [Description("Combobox with tree functionality")]
        public class ComboTree : ComboBox
        {
            protected override List<ResourceItem> Resources
            {
                get
                {
                    List<ResourceItem> baseList = base.Resources;
                    baseList.Capacity += 1;
    
                    baseList.Add(new ClientScriptItem(typeof(ComboTree), "Ext.Net.UX.Extensions.ComboTree.resources.ComboTree.js", "ux/extensions/combotree/combotree.js"));
    
                    return baseList;
                }
            }
    
            public override string XType
            {
                get
                {
                    return "combotree";
                }
            }
    
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.ComboTree";
                }
            }
    
            private ItemsCollection<TreePanel> tree;
    
            [ConfigOption("tree", typeof(ItemCollectionJsonConverter))]
            [Category("Config Options")]
            [NotifyParentProperty(true)]
            [DefaultValue(null)]
            [PersistenceMode(PersistenceMode.InnerProperty)]
            public virtual ItemsCollection<TreePanel> Tree
            {
                get
                {
                    if (this.tree == null)
                    {
                        this.tree = new ItemsCollection<TreePanel>();
                    }
    
                    return this.tree;
                }
            }
    
            protected override void OnLoad(EventArgs e)
            {
                this.Controls.Add(Tree[0]);
    
                if (!this.LazyItems.Contains(Tree[0]))
                {
                    this.LazyItems.Add(Tree[0]);
                }
    
                base.OnLoad(e);
            }
        }
    }
    The error:
    Missing ';'
    	<script type="text/javascript">
    	//<![CDATA[
    		Ext.net.ResourceMgr.init({id:"ResourceManager1",BLANK_IMAGE_URL:"/UserCenter/extjs/resources/images/default/s-gif/ext.axd",aspForm:"form1",theme:"blue",appName:"UserCenter"});Ext.onReady(function(){Ext.QuickTips.init();new Ext.ux.ComboTree({id:"ComboTree1",renderTo:"ComboTree1_Container",height:300,displayField:"text",hiddenName:"ComboTree1_Value",mode:"local",queryDelay:10,title:"Combo tree",triggerAction:"all",valueField:"value",store:new Ext.data.SimpleStore({fields:["text","value"],data :[]}),submitValue:true});{id:"TreePanel1",xtype:"nettreepanel",autoHeight:true,border:false,title:"Tree",loader:new Ext.net.PageTreeLoader({}),nodes:[{id:"0",text:"Root",nodeType:"async"}]}});
    	//]]>
    	</script>
    Last edited by easypower; Nov 04, 2011 at 8:27 AM.
  2. #12
    In Ext.Net 1.x please use DropDownField.
    http://examples1.ext.net/#/Form/DropDownField/Overview/
  3. #13
    Thank you very much.
    I got it. DropDownField will fit for me.
    But I also want to know where is the error of my code? Maybe it is another bug in Ext.Net 1.2?
    Because I think there will be many no-business UserControl and business one in a big Web Applications.
    Could you help me to find out where is the error?
    By the way, I can not upload the attached both .zip and .rar file in the thread.
  4. #14
    I guess you didn't override the ConfigOptions property, isn't that so?

    Here is the minimized working code.

    ComboTree.cs

    using System;
    using System.ComponentModel;
    using System.Collections.Generic;
    using Ext.Net;
    
    namespace Work
    {
        public class ComboTree : ComboBox
        {
            protected override List<ResourceItem> Resources
            {
                get
                {
                    List<ResourceItem> baseList = base.Resources;
                    baseList.Capacity += 1;
    
                    baseList.Add(new ClientScriptItem(typeof(ComboTree), "Work.resources.js.ComboTree.js", "ux/extensions/combotree/combotree.js"));
    
                    return baseList;
                }
            }
    
            public override string XType
            {
                get
                {
                    return "combotree";
                }
            }
    
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.ComboTree";
                }
            }
    
            ItemsCollection<TreePanel> tree;
    
            [DefaultValue(null)]
            public virtual ItemsCollection<TreePanel> Tree
            {
                get
                {
                    if (this.tree == null)
                    {
                        this.tree = new ItemsCollection<TreePanel>();
                    }
    
                    return this.tree;
                }
            }
    
            protected override void OnLoad(EventArgs e)
            {
                this.Controls.Add(Tree[0]);
    
                if (!this.LazyItems.Contains(Tree[0]))
                {
                    this.LazyItems.Add(Tree[0]);
                }
    
                base.OnLoad(e);
            }
    
            public override ConfigOptionsCollection ConfigOptions
            {
                get
                {
                    ConfigOptionsCollection config = base.ConfigOptions;
                    config.Add("tree", new ConfigOption("tree", new SerializationOptions("tree", typeof(ItemCollectionJsonConverter)), null, this.tree));
                    return config;
                }
            }
        }
    }
    As well you should use the Ext.net.TreePanel class instead of Ext.tree.TreePanel.

    The Ext.tree.TreePanel class is our extended version of Ext.tree.TreePanel.
  5. #15
    I am sorry, I do not know it is need that ConfigOptions function must be override.
    But I follow your code and there is also a js error "missing object"
    error js code is
    store:new Ext.data.SimpleStore({fields:["text","value"],data :[]}),
    submitValue:true,
    tree:{id:"TreePanel1",...}
    tree is not like store??
    Here is my code:
    ComboTree.cs
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Drawing;
    using System.Web.UI;
    
    [assembly: WebResource("Ext.Net.UX.Extensions.ComboTree.resources.ComboTree.js", "text/javascript")]
    
    namespace Ext.Net.UX
    {
        [Designer(typeof(EmptyDesigner))]
        [DefaultProperty("")]
        [ToolboxBitmap(typeof(UX.ComboTree), "Extensions.ComboTree.ComboTree.bmp")]
        [ToolboxData("<{0}:ComboTree runat=\"server\" Title=\"Combo tree\" Height=\"300\"></{0}:ComboTree>")]
        [Description("Combobox with tree functionality")]
        public class ComboTree : ComboBox
        {
            protected override List<ResourceItem> Resources
            {
                get
                {
                    List<ResourceItem> baseList = base.Resources;
                    baseList.Capacity += 1;
    
                    baseList.Add(new ClientScriptItem(typeof(ComboTree), "Ext.Net.UX.Extensions.ComboTree.resources.ComboTree.js", "ux/extensions/combotree/combotree.js"));
    
                    return baseList;
                }
            }
    
            public override string XType
            {
                get
                {
                    return "combotree";
                }
            }
    
            public override string InstanceOf
            {
                get
                {
                    return "Ext.ux.ComboTree";
                }
            }
    
            private ItemsCollection<TreePanel> tree;
    
            [ConfigOption("tree", typeof(ItemCollectionJsonConverter))]
            [Category("Config Options")]
            [NotifyParentProperty(true)]
            [DefaultValue(null)]
            [PersistenceMode(PersistenceMode.InnerProperty)]
            public virtual ItemsCollection<TreePanel> Tree
            {
                get
                {
                    if (this.tree == null)
                    {
                        this.tree = new ItemsCollection<TreePanel>();
                    }
    
                    return this.tree;
                }
            }
    
            protected override void OnLoad(EventArgs e)
            {
                this.Controls.Add(Tree[0]);
    
                if (!this.LazyItems.Contains(Tree[0]))
                {
                    this.LazyItems.Add(Tree[0]);
                }
    
                base.OnLoad(e);
            }
    
            public override ConfigOptionsCollection ConfigOptions
            {
                get
                {
                    ConfigOptionsCollection config = base.ConfigOptions;
                    config.Add("tree", new ConfigOption("tree", new SerializationOptions("tree", typeof(ItemCollectionJsonConverter)), null, this.tree));
                    return config;
                }
            } 
        }
    }
    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 + '"></div></div></tpl>',
                selectedClass: '',
                onSelect: Ext.emptyFn,
                valueField: 'id'
            });
    
            tree = new Ext.net.TreePanel(this.tree);
            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);
  6. #16
    Quote Originally Posted by easypower View Post
    But I follow your code and there is also a js error "missing object"
    error js code is
    store:new Ext.data.SimpleStore({fields:["text","value"],data :[]}),
    submitValue:true,
    tree:{id:"TreePanel1",...}
    tree is not like store??
    Please try the page under FireFox with FireBug or Chrome with Developer Tools - it will more helpful message about a JS error.

    And, I'm afraid, I don't understand this question:
    tree is not like store??
    Please clarify.

    As well, is the ComboTree.js loaded correctly?
  7. #17
    in the source file of the page, there are some js codes like bellows.
    but the store define is not the same like tree's

    store:new Ext.data.SimpleStore({fields:["text","value"],data :[]}),

    tree:{id:"TreePanel1",...}

    I guess the right js may be "tree:new Ext.net.TreePanle({id:"TreePanel1",...})"
  8. #18
    Well, a tree is rendered as a lazy item, because you add into a LazyItems collection. And the ItemsCollection class can work with lazy items only.

    Generally speaking, a lazy item is an item's config to pass into its constructor.

    And this happens in the script, see the .initComponent().
    tree = new Ext.net.TreePanel(this.tree);
  9. #19
    and then what can I need do to resolve the question?
  10. #20
    What is the question?
Page 2 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. [CLOSED] Implementing ExtJS Grid DataDrop plugin
    By Moltas in forum 1.x 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