Extjs4 Treegrid 使用心得分享(经验篇)

  次阅读 作者:智能小宝 来源:互联网 2016-03-02 15:26 我要评论(0)

最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来。像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料基本靠遍历,还是人工的。

使用treegrid,需要在调用页面的head中加载以下几个文件:

复制代码 代码如下:

<link rel="stylesheet" type="text/css" href="css/ext-all.css">

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="treegrid.js"></script>

然后在页面的body中写上一个div

复制代码 代码如下:

<div id="tree-example"></div>

以上官方就这么写的,BUT,蛋疼的是,JS里没有改,不改就没法运行成功。把treegrid.js中的renderto,改成我们的div的ID就行了。

记得把json数据文件和css文件等拷贝到调用目录下。

完成的treegrid.js代码为:

复制代码 代码如下:

/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

GNU General Public License Usage

Thisfile may be used under the terms of the GNU General Public Licenseversion 3.0 as published by the Free Software Foundation and appearingin the file LICENSE included in the packaging of this file. Pleasereview the following information to ensure the GNU General PublicLicense version 3.0 requirements will be met:http://www.gnu.org/copyleft/gpl.html.

If you are unsure whichlicense is appropriate for your use, please contact the sales departmentat http://www.sencha.com/contact.

*/

Ext.require([

'Ext.data.*',

'Ext.grid.*',

'Ext.tree.*'

]);

Ext.onReady(function() {

//we want to setup a model and store instead of using dataUrl

Ext.define('Task', {

extend: 'Ext.data.Model',

fields: [

{name: 'task', type: 'string'},

{name: 'user', type: 'string'},

{name: 'duration', type: 'string'}

]

});

var store = Ext.create('Ext.data.TreeStore', {

model: 'Task',

proxy: {

type: 'ajax',

//the store will get the content from the .json file

url: 'treegrid.json'

},

folderSort: true

});

//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel

var tree = Ext.create('Ext.tree.Panel', {

title: 'Core Team Projects',

width: 500,

height: 300,

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...