zoukankan      html  css  js  c++  java
  • 解决Ext JS 4.1版本Tree在刷新时选择第一行的问题

          在4.0.7版之前的版本都可通过select方法进行处理,但是4.1之后就不行了。经研究,问题出现在渲染过程上。下面通过一个例子测试一下。

          测试示例代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css")" />    
        <script type="text/javascript" src="extjs/bootstrap.js")"></script>
    </head>
    <body>
    <script>
    Ext.onReady(function() {
    	if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){				
    		Ext.BLANK_IMAGE_URL="./images/s.gif";
    	}
    	
    	Ext.create("Ext.data.TreeStore",{
            proxy: {
                type: 'ajax',
                url:"tree.js"
            },
            storeId:"TestStore"
        });
        
            Ext.widget("treepanel",{
                title: "Tree Test", rootVisible: false, store: "TestStore",
                renderTo:Ext.getBody(),
                400,height:600,
                viewConfig:{
    			    listeners:{
                        refresh:function(view){
                            view.getSelectionModel().select(0);
                        }
                    }
                }
    
            });
        
    });
    </script>
    
    </body>
    </html>
    

          加载的树节点代码(tree.js):

    [
      {
        "id": "all",
        "text": "All",
        "leaf": true
      },
      {
        "id": "ALFKI",
        "text": "Alfreds Futterkiste",
        "leaf": true
      },
      {
        "id": "ANATR",
        "text": "Ana Trujillo Emparedados y helados",
        "leaf": true
      },
      {
        "id": "ANTON",
        "text": "Antonio Moreno Taquería",
        "leaf": true
      },
      {
        "id": "AROUT",
        "text": "Around the Horn",
        "leaf": true
      },
      {
        "id": "BERGS",
        "text": "Berglunds snabbk?p",
        "leaf": true
      },
      {
        "id": "BLAUS",
        "text": "Blauer See Delikatessen",
        "leaf": true
      },
      {
        "id": "BLONP",
        "text": "Blondesddsl père et fils",
        "leaf": true
      },
      {
        "id": "BOLID",
        "text": "Bólido Comidas preparadas",
        "leaf": true
      },
      {
        "id": "BONAP",
        "text": "Bon app'",
        "leaf": true
      },
      {
        "id": "BOTTM",
        "text": "Bottom-Dollar Markets",
        "leaf": true
      },
      {
        "id": "BSBEV",
        "text": "B's Beverages",
        "leaf": true
      },
      {
        "id": "CACTU",
        "text": "Cactus Comidas para llevar",
        "leaf": true
      },
      {
        "id": "CENTC",
        "text": "Centro comercial Moctezuma",
        "leaf": true
      },
      {
        "id": "CHOPS",
        "text": "Chop-suey Chinese",
        "leaf": true
      },
      {
        "id": "COMMI",
        "text": "Comércio Mineiro",
        "leaf": true
      },
      {
        "id": "CONSH",
        "text": "Consolidated Holdings",
        "leaf": true
      },
      {
        "id": "WANDK",
        "text": "Die Wandernde Kuh",
        "leaf": true
      },
      {
        "id": "DRACD",
        "text": "Drachenblut Delikatessen",
        "leaf": true
      },
      {
        "id": "DUMON",
        "text": "Du monde entier",
        "leaf": true
      },
      {
        "id": "EASTC",
        "text": "Eastern Connection",
        "leaf": true
      },
      {
        "id": "ERNSH",
        "text": "Ernst Handel",
        "leaf": true
      },
      {
        "id": "FAMIA",
        "text": "Familia Arquibaldo",
        "leaf": true
      },
      {
        "id": "FISSA",
        "text": "FISSA Fabrica Inter. Salchichas S.A.",
        "leaf": true
      },
      {
        "id": "FOLIG",
        "text": "Folies gourmandes",
        "leaf": true
      },
      {
        "id": "FOLKO",
        "text": "Folk och f? HB",
        "leaf": true
      },
      {
        "id": "FRANR",
        "text": "France restauration",
        "leaf": true
      },
      {
        "id": "FRANS",
        "text": "Franchi S.p.A.",
        "leaf": true
      },
      {
        "id": "FRANK",
        "text": "Frankenversand",
        "leaf": true
      },
      {
        "id": "FURIB",
        "text": "Furia Bacalhau e Frutos do Mar",
        "leaf": true
      },
      {
        "id": "GALED",
        "text": "Galería del gastrónomo",
        "leaf": true
      },
      {
        "id": "GODOS",
        "text": "Godos Cocina Típica",
        "leaf": true
      },
      {
        "id": "GOURL",
        "text": "Gourmet Lanchonetes",
        "leaf": true
      },
      {
        "id": "GREAL",
        "text": "Great Lakes Food Market",
        "leaf": true
      },
      {
        "id": "GROSR",
        "text": "GROSELLA-Restaurante",
        "leaf": true
      },
      {
        "id": "HANAR",
        "text": "Hanari Carnes",
        "leaf": true
      },
      {
        "id": "HILAA",
        "text": "HILARION-Abastos",
        "leaf": true
      },
      {
        "id": "HUNGC",
        "text": "Hungry Coyote Import Store",
        "leaf": true
      },
      {
        "id": "HUNGO",
        "text": "Hungry Owl All-Night Grocers",
        "leaf": true
      },
      {
        "id": "ISLAT",
        "text": "Island Trading",
        "leaf": true
      },
      {
        "id": "KOENE",
        "text": "K?niglich Essen",
        "leaf": true
      },
      {
        "id": "LACOR",
        "text": "La corne d'abondance",
        "leaf": true
      },
      {
        "id": "LAMAI",
        "text": "La maison d'Asie",
        "leaf": true
      },
      {
        "id": "LAUGB",
        "text": "Laughing Bacchus Wine Cellars",
        "leaf": true
      },
      {
        "id": "LAZYK",
        "text": "Lazy K Kountry Store",
        "leaf": true
      },
      {
        "id": "LEHMS",
        "text": "Lehmanns Marktstand",
        "leaf": true
      },
      {
        "id": "LETSS",
        "text": "Let's Stop N Shop",
        "leaf": true
      },
      {
        "id": "LILAS",
        "text": "LILA-Supermercado",
        "leaf": true
      },
      {
        "id": "LINOD",
        "text": "LINO-Delicateses",
        "leaf": true
      },
      {
        "id": "LONEP",
        "text": "Lonesome Pine Restaurant",
        "leaf": true
      },
      {
        "id": "MAGAA",
        "text": "Magazzini Alimentari Riuniti",
        "leaf": true
      },
      {
        "id": "MAISD",
        "text": "Maison Dewey",
        "leaf": true
      },
      {
        "id": "MEREP",
        "text": "Mère Paillarde",
        "leaf": true
      },
      {
        "id": "MORGK",
        "text": "Morgenstern Gesundkost",
        "leaf": true
      },
      {
        "id": "NORTS",
        "text": "North/South",
        "leaf": true
      },
      {
        "id": "OCEAN",
        "text": "Océano Atlántico Ltda.",
        "leaf": true
      },
      {
        "id": "OLDWO",
        "text": "Old World Delicatessen",
        "leaf": true
      },
      {
        "id": "OTTIK",
        "text": "Ottilies K?seladen",
        "leaf": true
      },
      {
        "id": "PARIS",
        "text": "Paris spécialités",
        "leaf": true
      },
      {
        "id": "PERIC",
        "text": "Pericles Comidas clásicas",
        "leaf": true
      },
      {
        "id": "PICCO",
        "text": "Piccolo und mehr",
        "leaf": true
      },
      {
        "id": "PRINI",
        "text": "Princesa Isabel Vinhos",
        "leaf": true
      },
      {
        "id": "QUEDE",
        "text": "Que Delícia",
        "leaf": true
      },
      {
        "id": "QUEEN",
        "text": "Queen Cozinha",
        "leaf": true
      },
      {
        "id": "QUICK",
        "text": "QUICK-Stop",
        "leaf": true
      },
      {
        "id": "RANCH",
        "text": "Rancho grande",
        "leaf": true
      },
      {
        "id": "RATTC",
        "text": "Rattlesnake Canyon Grocery",
        "leaf": true
      },
      {
        "id": "REGGC",
        "text": "Reggiani Caseifici",
        "leaf": true
      },
      {
        "id": "RICAR",
        "text": "Ricardo Adocicados",
        "leaf": true
      },
      {
        "id": "RICSU",
        "text": "Richter Supermarkt",
        "leaf": true
      },
      {
        "id": "ROMEY",
        "text": "Romero y tomillo",
        "leaf": true
      },
      {
        "id": "SANTG",
        "text": "Santé Gourmet",
        "leaf": true
      },
      {
        "id": "SAVEA",
        "text": "Save-a-lot Markets",
        "leaf": true
      },
      {
        "id": "SEVES",
        "text": "Seven Seas Imports",
        "leaf": true
      },
      {
        "id": "SIMOB",
        "text": "Simons bistro",
        "leaf": true
      },
      {
        "id": "SPECD",
        "text": "Spécialités du monde",
        "leaf": true
      },
      {
        "id": "SPLIR",
        "text": "Split Rail Beer & Ale",
        "leaf": true
      },
      {
        "id": "SUPRD",
        "text": "Suprêmes délices",
        "leaf": true
      },
      {
        "id": "THEBI",
        "text": "The Big Cheese",
        "leaf": true
      },
      {
        "id": "THECR",
        "text": "The Cracker Box",
        "leaf": true
      },
      {
        "id": "TOMSP",
        "text": "Toms Spezialit?ten",
        "leaf": true
      },
      {
        "id": "TORTU",
        "text": "Tortuga Restaurante",
        "leaf": true
      },
      {
        "id": "TRADH",
        "text": "Tradi??o Hipermercados",
        "leaf": true
      },
      {
        "id": "TRAIH",
        "text": "Trail's Head Gourmet Provisioners",
        "leaf": true
      },
      {
        "id": "VAFFE",
        "text": "Vaffeljernet",
        "leaf": true
      },
      {
        "id": "VICTE",
        "text": "Victuailles en stock",
        "leaf": true
      },
      {
        "id": "VINET",
        "text": "Vins et alcools Chevalier",
        "leaf": true
      },
      {
        "id": "WARTH",
        "text": "Wartian Herkku",
        "leaf": true
      },
      {
        "id": "WELLI",
        "text": "Wellington Importadora",
        "leaf": true
      },
      {
        "id": "WHITC",
        "text": "White Clover Markets",
        "leaf": true
      },
      {
        "id": "WILMK",
        "text": "Wilman Kala",
        "leaf": true
      },
      {
        "id": "WOLZA",
        "text": "Wolski  Zajazd",
        "leaf": true
      }
    ]

          如果按以前习惯,使用“view.getSelectionModel().select(0);”,Firebug会提示以下错误:

    o is undefined
    return o.id;   ext-all-debug.js (第 43468 行)

          将“view.getSelectionModel().select(0);”修改为“console.log(view)”,Firebug提示以下:

    [试用版] Ext.tree.View [0] { id="treeview-1012"}  tree.html (第 32 行)
    [试用版] Ext.tree.View [1] { id="treeview-1012"}  tree.html (第 32 行)

          这里居然触发了两次refresh事件,问题就出现在第一次的触发上,修改代码为:

    console.log(view.node.firstChild)

          Firebug提示:

    null
    tree.html (第 33 行)
    [试用版] Ext.data.Store.ImplicitModel-TestStore { id="Ext.data.Store.ImplicitModel-TestStore-all", internalId="all"}
    tree.html (第 33 行)

          从这里就很明显看到了,第一触发refresh事件时,根节点的第一个节点为null,执行select方法肯定找不到选择节点。因而要正确进行选择,就必须判断firstChild是否存在,如果存在,才进行选择。因而,将代码修改为如下代码即可正确选择第一行了:

    var node=view.node.firstChild;
    if(node){
        view.getSelectionModel().select(node);
    }
    




  • 相关阅读:
    chromedriver安装与配置(ubuntu linux下)
    Ajax 通信技术--hidden Frame GET 请求 和 POST 请求
    photoshop去除图片上的水印
    redis和memcache的对比
    关于mongodb ,redis,memcache之间见不乱理还乱的关系和作用
    MYSQL中'TYPE=MyISAM'错误的解决方案
    http协议
    jQuery常用方法
    SQL Server中行列转换 Pivot UnPivot
    jQuery插件开发
  • 原文地址:https://www.cnblogs.com/muyuge/p/6333770.html
Copyright © 2011-2022 走看看