在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); }