TreePanel 、TabPanel及GridPanel之间联动

最新推荐文章于 2019-07-07 02:43:15 发布

sophiasy

最新推荐文章于 2019-07-07 02:43:15 发布

阅读量822

点赞数

分类专栏： JavaScript 文章标签： string function search server button border

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何在ExtJS中实现TreePanel与不同标签页下GridPanel的联动操作，包括通过ID定位并选择特定行的方法，以及TreePanel的刷新机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在之前已讲述TreePanel与GridPanel之间的联动，如果GridPanel在不同的标签中，又如何定位到标签中的GridPanel的某一行呢，这是本篇需要讲述的内容：以下做为一个例子：

三个标签，分别为：TabClientJobs、TabCorporate、TabFreelance

代码

   
   
    
     <ext:TreePanel ID="ClientJobTree" runat="server" Icon="Note" Border="false"
                                AutoScroll="true">
                                <Listeners>
                                    <Click Handler="selectGridPanelbyNodeID(node.id,#{TabPanelClientJob});" />
                                </Listeners>
</ext:TreePanel>

脚本代码：

代码

   
   
    
     function selectGridPanelbyNodeID(id, tabPanel) {
//获取类型（即标签）
            var type = Coolite.AjaxMethods.GetType(id, { success: function(result) {
                switch (result) {
                    case "0":
                        {
//切换标签
                            tabPanel.setActiveTab(Ext.getCmp("<%= TabClientJobs.ClientID %>"));
//获取GridPanel
                            var grid = Ext.getCmp("<%= GridPanelCustomer.ClientID %>");
//通过ID查找信息
                            var record = grid.store.getById(id);
//选中该行
                            grid.getSelectionModel().selectRow(grid.store.indexOf(record));
                            break;
                        }
                    case "1":
                        {
                            tabPanel.setActiveTab(Ext.getCmp("<%= TabCorporate.ClientID %>"));
                            var grid = Ext.getCmp("<%= GridPanelCorporate.ClientID %>");
                            var record = grid.store.getById(id);
                            grid.getSelectionModel().selectRow(grid.store.indexOf(record));
                            break;
                        }
                    case "2":
                        {
                            tabPanel.setActiveTab(Ext.getCmp("<%= TabFreelance.ClientID %>"));
                            var grid = Ext.getCmp("<%= GridPanelFreelance.ClientID %>");
                            var record = grid.store.getById(id);
                            grid.getSelectionModel().selectRow(grid.store.indexOf(record));
                            break;
                        }
                }
            }
            });
        }

posted @ 2010-07-30 11:42 琴韵之弦阅读(13) | 评论(0) | 编辑

TreePanel 操作之二：刷新TreePanel

TreePanel的刷新，以下做为一个例子：

当点击查询按钮时，TreePanel将重新刷新一次。

前台代码：

代码

   
   
    
     <ext:Button ID="ButtonQuery" runat="server" Text="Search" meta:resourcekey="ButtonQueryResource"
                                                                                        StyleSpec="padding-left:105px;">
                                                                                        <Listeners>
                                                                                            <Click Handler="Search(#{ClientJobTree});" />
                                                                                        </Listeners>
                                                                                    </ext:Button>

脚本代码：

代码

   
   
    
    function Search(tree) {
            Coolite.AjaxMethods.Query({
                success: function(result) {
                    var nodes = eval(result);
                    tree.root.ui.remove();
                    tree.initChildren(nodes);
                    tree.root.render();
                    tree.el.unmask();
                },
                failure: function(msg) {
                    tree.el.unmask();
                    Ext.Msg.alert('Failure', '未能加载数据');
                }
            });
        }

后台代码：

view source

print ?

`01`	`/// <summary>`

02 /// 绑定树

`03`	`/// </summary>`

`04`	`public` `coolite.Ext.Web.TreeNodeCollection TreeBind()`

05 {

`06`	`coolite.Ext.Web.TreeNodeCollection nodes =` `new` `Coolite.Ext.Web.TreeNodeCollection();`

`07`	`string` `projectID = Request.QueryString["ProjectID"].ToString();`

`08`	`string` `name = TextFieldName.Text.ToString();`

`09`	`string` `clientGroup = ComboBoxClientGroup.SelectedItem.Text.ToString();`

`10`	`string` `services = ComboBoxClientService.SelectedItem.Text.ToString();`

`11`	`Coolite.Ext.Web.TreeNode root =` `new` `Coolite.Ext.Web.TreeNode();`

`12`	`//通过ProjectID找到Name`

`13`	`PROJ_ProjectBase projectBase =` `this.logic.GetProjectBaseByProjectID(projectID);`

`14`	`root.Text = projectBase.project_name;`

`15`	`ClientJobTree.Root.Add(root);`

`16`	`List<PROJ_ClientJob> rootList =` `this.logic.GetClientJob(projectID, name, services, clientGroup);`

`17`	`foreach` `(PROJ_ClientJob item` `in` `rootList)`

18 {

`19`	`string` `clientID = item.clientJob_id;`

`20`	`string` `clientName = item.job_name;`

`21`	`Coolite.Ext.Web.TreeNode supernode =` `new` `Coolite.Ext.Web.TreeNode();`

`22`	`supernode.NodeID = clientID;`

`23`	`supernode.Text = clientName;`

`24`	`supernode.Icon = Icon.Folder;`

`25`	`supernode.Expanded =` `true;`

`26`	`root.Nodes.Add(supernode);`

`27`	`this.NodeBind(clientID, supernode);`

28 }

29

`30`	`return` `ClientJobTree.Root;`

31 }

32

`33`	`/// <summary>`

`34`	`/// 树节点的绑定`

`35`	`/// </summary>`

`36`	`/// <param name="parentNodeID">父节点号</param>`

`37`	`/// <param name="parentcode">父节点</param>`

`38`	`public` `void` `NodeBind(string` `parentNodeID, Coolite.Ext.Web.TreeNode parentcode)`

39 {

`40`	`string` `projectID = Request.QueryString["ProjectID"].ToString();`

`41`	`List<PROJ_WBS> wbsList =` `this.logic.GetProjectWbsByClientJobID(parentNodeID, projectID);`

`42`	`foreach` `(PROJ_WBS item` `in` `wbsList)`

43 {

`44`	`Coolite.Ext.Web.TreeNode node =` `new` `Coolite.Ext.Web.TreeNode();`

`45`	`string` `wbsID = item.wbs_id;`

`46`	`node.NodeID = item.wbs_id;`

`47`	`node.Text = item.wbs_name;`

`48`	`node.Icon = Icon.Folder;`

`49`	`//node.Expanded = false;`

`50`	`parentcode.Nodes.Add(node);`

`51`	`this.NodeBind(wbsID, node);`

52 }

53 }

54

55

`56`	`/// <summary>`

`57`	`/// 查询事件`

`58`	`/// </summary>`

`59`	`[AjaxMethod]`

`60`	`public` `string` `Query()`

61 {

`62`	`Coolite.Ext.Web.TreeNodeCollection nodes =` `this.TreeBind();`

`63`	`return` `nodes.ToJson();`

64 }

posted @ 2010-07-30 11:32 琴韵之弦阅读(17) | 评论(0) | 编辑

TreePanel 操作之一：加载树

加载树有两种方法，一是通过js，二是直接在后台绑定。

第一种方法：

view source

print ?

`1`	`<ext:TreePanel ID="ClientJobTree"` `runat="SERVER"` `Icon="Note"` `Border="false"` `AutoScroll="true">`

`2`	`<Listeners>`

`3`	`<Before Fn="LoadeNode"` `/>`

`4`	`</Listeners>`

`5`	`</ext:TreePanel>`

脚本代码：

代码

   
   
    
            function LoadeNode(node) {
            Coolite.AjaxMethods.NodesBind(node.id, {
                success: function(result) {
                    var data = eval("(" + result + ")");
                    node.loadNodes(data);
                },

                failure: function(errorMsg) {
                    Ext.Msg.alert('Failure', errorMsg);
                }
            });
        }

后台代码：

加载一级和二级菜单

代码

   
   
    
            /// <summary>
        /// 绑定树
        /// </summary>
        public void TreeBind()
        {
            string projectID = Request.QueryString["ProjectID"].ToString();
            string Name = TextFieldName.Text.ToString();
            string clientGroup = ExtComboBoxParameterGroup.SelectedItem.Text.ToString();
            string services = ExtComboBoxParameterServices.SelectedItem.Text.ToString();
            Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
            //通过ProjectID找到Name
            PROJ_ProjectBase projectBase = this.logic.GetProjectBaseByProjectID(projectID);
            root.Text = projectBase.project_name;
            ClientJobTree.Root.Add(root);
            List<PROJ_ClientJob> rootList = this.logic.GetClientJob(projectID, Name, services,clientGroup);
            foreach (PROJ_ClientJob item in rootList)
            {
                string clientID = item.clientJob_id;
                string clientName = item.job_name;
                AsyncTreeNode rootNode = new AsyncTreeNode();
                rootNode.NodeID = clientID;
                rootNode.Text = clientName;
                rootNode.Icon = Icon.Folder;
                rootNode.Expanded = true;
                root.Nodes.Add(rootNode);
            }
        }

绑定三级菜单

代码

   
   
    
            /// <summary>
        /// 树节点的绑定
        /// </summary>
        /// <param name="nodes">节点集合</param>
        /// <param name="parentNodeID">父节点号</param>
        public void NodeBind(Coolite.Ext.Web.TreeNodeCollection nodes, string parentNodeID)
        {
            string projectID = Request.QueryString["ProjectID"].ToString();
            List<PROJ_WBS> wbsList = this.logic.GetProjectWbsByClientJobID(parentNodeID, projectID);
            foreach (PROJ_WBS item in wbsList)
            {
                Coolite.Ext.Web.AsyncTreeNode treeNode = new Coolite.Ext.Web.AsyncTreeNode();
                treeNode.NodeID = item.wbs_id;
                treeNode.Text = item.wbs_name;
                treeNode.Icon = Icon.Folder;
                treeNode.Expanded = false;
                nodes.Add(treeNode);
            }
        }

        /// <summary>
        /// 绑定树节点
        /// </summary>
        /// <param name="nodeID"></param>
        /// <returns></returns>
        [AjaxMethod]
        public string NodesBind(string nodeID)
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = new Coolite.Ext.Web.TreeNodeCollection();
            this.NodeBind(nodes, nodeID);
            return nodes.ToJson();
        }

第二种方法：（直接在后台绑定，不需要<beforeLoad fn=”" />

代码

   
   
    
    /// <summary>
        /// 绑定树
        /// </summary>
        public Coolite.Ext.Web.TreeNodeCollection TreeBind()
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = new Coolite.Ext.Web.TreeNodeCollection();
            string projectID = Request.QueryString["ProjectID"].ToString();
            string name = TextFieldName.Text.ToString();
            string clientGroup = ComboBoxClientGroup.SelectedItem.Text.ToString();
            string services = ComboBoxClientService.SelectedItem.Text.ToString();
            Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
            //通过ProjectID找到Name
            PROJ_ProjectBase projectBase = this.logic.GetProjectBaseByProjectID(projectID);
            root.Text = projectBase.project_name;
            ClientJobTree.Root.Add(root);
            List<PROJ_ClientJob> rootList = this.logic.GetClientJob(projectID, name, services, clientGroup);
            foreach (PROJ_ClientJob item in rootList)
            {
                string clientID = item.clientJob_id;
                string clientName = item.job_name;
                Coolite.Ext.Web.TreeNode supernode = new Coolite.Ext.Web.TreeNode();
                supernode.NodeID = clientID;
                supernode.Text = clientName;
                supernode.Icon = Icon.Folder;
                supernode.Expanded = true;
                root.Nodes.Add(supernode);
                this.NodeBind(clientID, supernode);
            }

            return ClientJobTree.Root;
        }

        /// <summary>
        /// 树节点的绑定
        /// </summary>
        /// <param name="parentNodeID">父节点号</param>
        /// <param name="parentcode">父节点</param>
        public void NodeBind(string parentNodeID, Coolite.Ext.Web.TreeNode parentcode)
        {
            string projectID = Request.QueryString["ProjectID"].ToString();
            List<PROJ_WBS> wbsList = this.logic.GetProjectWbsByClientJobID(parentNodeID, projectID);
            foreach (PROJ_WBS item in wbsList)
            {
                Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode();
                string wbsID = item.wbs_id;
                node.NodeID = item.wbs_id;
                node.Text = item.wbs_name;
                node.Icon = Icon.Folder;
                //node.Expanded = false;
                parentcode.Nodes.Add(node);
                this.NodeBind(wbsID, node);
            }
        }