Ext4 简单的treepanel
转载:http://blog.csdn.net/zyujie/article/details/8208499
最近在学习Ext4,记录一些有关Ext4实现控件的方法:
Ext4的treePanel和之前3x的版本有一些差别。使用的版本是ext-4.0.7-gpl
html部分:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>无标题文档</title>
- <link type="text/css" rel="stylesheet" href="css/index.css" />
- <link type="text/css" rel="stylesheet" href="resources/css/ext-all.css" />
- <script type="text/javascript" language="javascript" src="ext-all.js"></script>
- <script type="text/javascript" language="javascript" src="locale/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" language="javascript" src="js/index.js"></script>
- </head>
- <body>
- <div id="subMenu"></div>
- </body>
- </html>
js部分:
- Ext.onReady(function(){
- Ext.define('Task', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'id', type: 'string'},
- {name: 'text', type: 'string'}
- ],
- });
- var store = Ext.create('Ext.data.TreeStore',{
- model: 'Task',
- proxy: {
- type: 'ajax',
- url: 'treegrid.json' //必须要搭建个服务器才可以访问json,不然会报错。拒绝访问
- },
- reader: {
- type: 'json'
- },
- root: {
- text: 'root',
- id: '0',
- }
- });
- var menuTree = Ext.create('Ext.tree.Panel',{
- title: '用户管理',
- autoScroll:true,
- width: "100%",
- height: "100%",
- store: store,
- rootVisible: true,
- renderTo: 'subMenu',
- listeners : {
- 'itemclick' : function(view,record){
- if(record.data.leaf){
- alert(record.data.id);
- }else{
- if(record.data.expanded){
- view.collapse(record);
- }else{
- view.expand(record);
- }
- }
- }
- }
- });
- menuTree.store.load();
- });
json数据源:
- {
- id:'1',
- text:'treenode 1',
- expanded:true,
- children:[{
- id:'11',
- text:'treenode 11',
- leaf:true
- },{
- id:'12',
- text:'treenode 12',
- expanded:true,
- children:[{
- id:'121',
- text:'treenode 121',
- leaf:true
- },{
- id:'122',
- text:'treenode 122',
- leaf:true
- }]
- },{
- id:'13',
- text:'treenode 13',
- leaf:true
- }]
- }
一个简单的treepanel就出现了,至于一些拓展功能,如复选树,修改,编辑,拖动等功能,可以参照API来实现。
Ext4 简单的treepanel的更多相关文章
- 【ExtJS】一个简单的TreePanel
在ExtJS中,构造一个树形结构变得很简单. 需要用到的: Ext.tree.Panel TreePanel提供树形结构的UI表示的树状结构数据. 一个TreePanel必须绑定一个Ext.data. ...
- linux操作系统的目录以及用户权权限的管理
linux操作系统的目录以及对目录的操作 一: linux操作系统的目录结构 bin #可执行程序的安装目录 , 命令 boot #系统启动引导目录 dev #设备目录 etc #软件配置文件目录 ...
- linux大盘格式化分区
Linux 实例的磁盘管理 对于 Linux 系统上的大磁盘,也要采用 GPT 分区格式, 也可以不分区, 把磁盘当成一个整体设备使用. 在 Linux 上一般采用 XFS 或者 EXT4 来做大盘的 ...
- Ext4功能和文件系统的简单功能
Linux kernel 自 2.6.28 開始正式支持新的文件系统 Ext4. Ext4 是 Ext3 的改进版,改动了 Ext3 中部分重要的数据结构,而不只像 Ext3 对 Ext2 那样,不过 ...
- Extjs Ext.TreePanel
TreePanel 简单实例. <link rel="stylesheet" href="Js/ext-4.2/resources/css/ext-all-nept ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- ExtJs基础知识总结:Dom、IFrame和TreePanel、TabPanel(三)
概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFram ...
- ExtJs4之TreePanel
Tree介绍 树形结构,是程序开发,不可缺少的组件之一.ExtJs中的树,功能强大美观实用.功能齐全,拖拉,排序,异步加载等等. 在ExtJs4中Tree和Grid具有相同的父类,因此Grid具有的特 ...
- 编写简单的ramdisk(无请求队列)
最近在研究块设备驱动的编写,看了赵磊大牛的<写一个块设备驱动>,受益匪浅,虽然能看懂里面说的,但动手写写代码还是能加深理解的,下面实现的ramdisk写的很简单,如果有错误,欢迎大牛们指正 ...
随机推荐
- 模拟I2C从机
模拟I2C主机的比较多,但是从机相对主机而言要难很多,这个供大家借鉴. 这个从机程序支持主机对它的随机写和随机读,连续读和连续写没做,有兴趣的可以完善下,呵呵. //Microcontrol CODE ...
- js eval()函数 接收一个字符串,做为js代码来执行。 如: s='var d="kaka"'; 或者s=‘function (code){return code }’;
eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值, ...
- Java 利用SWFUpload多文件上传 session 为空失效,不能验证的问题 swfUpload多文件上传
Java 利用SWFUpload多文件上传 session 为空失效,不能验证的问题(转) 我们都知道普通的文件上传是通过表单进行文件上传的,还不能达到异步上传的目的.通过使用某些技术手段,比如jqu ...
- Channel Allocation(四色定理 dfs)
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 10897 Accepted: 5594 Description When ...
- POJ-2774-Long Long Message(后缀数组-最长公共子串)
题意: 给定两个字符串 A 和 B,求最长公共子串. 分析: 字符串的任何一个子串都是这个字符串的某个后缀的前缀. 求 A 和 B 的最长公共子串等价于求 A 的后缀和 B 的后缀的最长公共前缀的最大 ...
- Qt入门(10)——调试技术
命令行参数当你运行Qt程序时,你可以指定几个命令行参数来帮助你调试.-nograb 应用程序不再捕获鼠标或者键盘.当程序在Linux下运行在gdb调试器中时这个选项是默认的.-dograb 忽略任何隐 ...
- 【转】java中float与byte[]的互转 -- 不错
原文网址:http://tjmljw.iteye.com/blog/1767716 起因:想把一个float[]转换成内存数据,查了一下,下面两个方法可以将float转成byte[]. 方法一 imp ...
- 【转】Android实例剖析笔记(二)--用实例讲解Andriod的开发过程,以NotesList为实例介绍Android的菜单机制
原文网址:http://kb.cnblogs.com/page/78304/ 简介 android提供了三种菜单类型,分别为options menu,context menu,sub menu. op ...
- page-object使用(1)
创建你的page 你必须做的第一件事情是创建你的page,这是一些包含了PageObject模块的简单的ruby类,请不要创建你自己的initialize方法,因为已经有一个存在而且不能被覆盖.如果你 ...
- html5---webworker多线程
javascript本身就是一个单线程的语言,一开始它的出现是为了简单的网页设计,设计者并没有考虑到多线程的问题,要知道,线程的开销是非常昂贵的.但是随着web开发的潮流化,javascript不是仅 ...