解决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(),
- 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 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);
- }
解决Ext JS 4.1版本Tree在刷新时选择第一行的问题相关推荐
- [Ext JS] 3.3 树(Tree)的定义和使用
树的构成 树面板:Ext.tree.Panel , 面板用来创建一个树的组件 树视图:Ext.tree.View , 对树的样式做一些配置 ,比如是否显示根节点(rootVisible), 视图不直接 ...
- Python读取Excel文件时缺少第一行的解决办法
python在读取Excel文件时默认会把第一行当做列名,所以导致会缺少一行.解决办法如下: 加入header=None
- Ext.js Tree
今天学习Ext.js 4.2版本的Tree组件,发现一个问题,就是model里面不能写类型,要不然就不发送请求,而且text是必须的字段,区分大小写. 转载于:https://www.cnblogs. ...
- 【翻译】Ext JS 6早期访问版本发布
早期访问版本是什么 如何参与 都包括什么 Sencha Ext JS 6 Sencha Pivot Grid Sencha Cmd 6 JetBrains IDE插件 反馈 原文:Announcing ...
- Ext JS 4倒计时:开发者预览版
作为Ext JS团队的代表,我很高兴地宣布第一个Ext JS 4开发者预览版 发布了.Ext JS 4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架.从生成HTML代码到类 ...
- Ext JS 4倒计时:动态加载和新的类系统
Today we're excited to release the first in a series of brand new features in Ext JS 4. Over the nex ...
- 【翻译】Ext JS最新技巧——2015-8-11
原文:Top Support Tips Seth Lemmons:使用棒极了的Awesome Font Ext JS 6附带了一个新的海卫一主题,可以使用Font Awesome字体作为背景图像的图标 ...
- ext get id js_【翻译】Ext JS最新技巧——2015-8-11
Seth Lemmons:使用棒极了的Awesome Font Ext JS 6附带了一个新的海卫一主题,可以使用Font Awesome字体作为背景图像的图标.不过,你知道如何通过"ico ...
- 【翻译】对于Ext JS 5,你准备好了吗?
原文:Are You Ready for Ext JS 5? Ext JS 5:准备升级 对于Ext JS 5加入Sencha的大家庭,我们感到非常高兴!作为一个主要版本,在Ext JS 5引入了一堆 ...
最新文章
- Oracle批量导出AWR报告
- Python语言学习:Python随机生成那些事之随机生成使用方法、案例应用之详细攻略
- Oracle 中 call 和 exec的区别
- python使用redis教程 敲黑板划重点
- [转载]关于webbrowser,innet,xmlhttp获取网页源码的比较!
- Django 组件- 中间件
- python自加1_python中有自增
- python数组_Python数组
- [LeetCode]168. Excel Sheet Column Title
- 基于etcd+confd通过nginx对docker服务混合注册发现详解
- h5页面 请在微信客户端打开链接_模拟微信接口时,提示“请在微信客户端打开链接”(转)...
- 2022-2027年中国OLED市场竞争态势及行业投资前景预测报告
- win10装linux双系统6,win10如何安装linux双系统
- 肌肤食品揭秘淘宝骗子经典伎俩
- python制作简单网页_怎么用python简单的制作一个网页
- WEP/WPA/WPA2/WPA3初识
- 5月Github上最热门的数据科学和机器学习项目TOP5
- 百度经纬度和google经纬度转换测试
- 硅谷最牛程序员,总是不经意间碾压众人
- 百度地图api实现轨迹运动效果