解决Ext JS 4.1版本Tree在刷新时选择第一行的问题

来源：互联网发布：网络寻衅滋事罪编辑：程序博客网时间：2024/06/07 17:54

在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(),            width: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 undefinedreturn 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提示：

nulltree.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);}