- 浏览: 152741 次
- 性别:
- 来自: 北京
最新评论
-
科小新:
99999999999999999
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒 -
ldl_xz:
http://www.9958.pw/post/css_pos ...
兼容ie6、ie7、ff的css顶端固定位置定位 -
snnosnno:
有浏览器差异吖
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒 -
lian819:
感谢无私分享了, 必须赞一个啊
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒 -
Sweetme:
放进项目就行了,成功了。谢谢哦怒赞
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒
文章内不再提供示例,需要查看者请从SVN下载,地址:
http://exttools.googlecode.com/svn/trunk/
效果图:
示例js:
http://exttools.googlecode.com/svn/trunk/
效果图:
/** * 扩展了Panel类,其布局设为accordion,所在区域为west;该组件初始化后会根据配置的url和root向后台发 * 起请求并解析返回的json串,根据parentcode为空的结点生成TreePanel,子节点通过parentcode属性添加为 * 对应结点的子节点,注意此处每个节点的code必须小于父节点并接大于下方的其它结点; * * 1.1更新: * 1.不再需要leaf属性,程序内部判断; * 2.store用完后即销毁,不再可用; * 3.修改了结点点击的触发事件,仅注册一次以减少内存占用,该方法传递给监听函数一个Ext.tree.TreeNode对象, * 可通过node.attributes属性获取结点属性; * 4.添加了一个findNodeById方法,该方法通过id字符串返回对应Ext.tree.TreeNode对象; * * @author chemzqm@gmail.com * @version 1.1 * @since 2010-5-9 * */ Ext.namespace("QM.ui"); QM.ui.AccordinTreePanel = Ext.extend(Ext.Panel, { /** * @cfg(url) 发送请求的地址 */ /** * @cfg(root) json数组的根字符串 */ margins: '5 0 5 5', split: true, width: 210, initComponent: function(){ Ext.apply(this, { layout: 'accordion', region: 'west' }) QM.ui.AccordinTreePanel.superclass.initComponent.call(this); this.addEvents( /** * @event itemclick 树结点被点击时触发 参数:node 当前结点对象,record 当前结点对应record对象 */ 'click', /** * @event afterload 菜单项加载完毕后触发 */ 'afterload'); if (!this.store) { this.store = new Ext.data.JsonStore({ url: this.url, root: this.root, fields: ['code', 'name', 'parentcode', 'iconCls', 'href'] }); } this.store.load({ callback: this.loadTrees, scope: this }); }, loadTrees: function(records, o, s){ var pnodes,trees = [],tree; this.store.sort('code'); for (var i = 0; i < records.length; i++) { var record = records[i]; if (!record.get('parentcode')) { tree = this.creatTreeConfig(record); trees.push(tree); pnodes = []; pnodes.push(tree.root); } else { var next_record = records[i + 1]; var isLeaf = !next_record || next_record.get('parentcode') != record.get('code'); this.addTreeNode(pnodes, record, isLeaf); } } Ext.each(trees,function(tree){ this.add(tree); },this); this.fireEvent('afterload', this); this.mon(this.el, 'click', this.onClick, this); this.doLayout(); this.store.destroy(); }, findNodeById:function(id){ var node,trees = this.findByType('treepanel',true); Ext.each(trees,function(tree){ node = tree.getNodeById(id); return !node;//找到的话返回false }); return node; }, onClick: function(e, t, o){ if(Ext.fly(t).hasClass('x-tree-ec-icon')){//点击伸展按钮时无视 return; } var el,id,node; if (el = e.getTarget('.x-tree-node-el', 3,true)) { e.stopEvent(); id = el.getAttributeNS('ext','tree-node-id'); node = this.findNodeById(id); this.fireEvent('click',node); } }, creatTreeConfig: function(record){ var config = { xtype: 'treepanel', autoScroll: true, rootVisible: false, title: record.get('name'), iconCls: record.get('iconCls'), root: { nodeType: 'async', expanded: true, id: record.get('code'), children: [] } }; return config; }, addTreeNode: function(pnodes, record, isLeaf){ var len = pnodes.length; for (var i = len - 1; i >= 0; i--) { if (pnodes[i].id != record.get('parentcode')) { pnodes.pop(); } else { var parent = pnodes[i].children; var node = { text: record.get('name'), id: record.get('code'), iconCls: record.get('iconCls'), href: record.get('href'), leaf: isLeaf }; if (!isLeaf) { node.children = []; pnodes.push(node); } parent.push(node); return; } } } }); Ext.reg('accTree', QM.ui.AccordinTreePanel);
示例js:
new Ext.Viewport({ layout: 'border', items: [{ xtype: 'accTree', title : '菜单', root : 'menus',//必须要配 url: 'menu.json',//必须要配 listeners:{ 'click':function(node){ alert(node.attributes.href); } } }, { region: 'center', html: 'center' }] }); });
评论
3 楼
zhihaokesion
2011-12-08
alert(node.attributes.href) href 属性显示未定义,博主能否解释一下。
2 楼
天空之城
2011-01-04
thanks,请问其他的模块如何加载?
1 楼
magicyz
2010-08-23
看了你的东西,感觉应该有用,就是,文章写得太不仔细,没有多大参考价值!
发表评论
-
[翻译]Ex4t教程:Ext4起步
2012-02-23 21:58 01.1 浏览器 Ext JS 4 supports a ... -
[Ext入门]如何学习Ext
2010-05-29 19:26 2710国内使用Ext的可谓不少,但是多数也只限与使用其中示例,真能把 ... -
[Ext重写]必填项的label后面加星号
2010-05-20 15:49 3200Ext.form.TextField.override({ ... -
[Ext重写]限制树的深度
2010-05-19 00:51 1879以前做政府项目的时候经常涉及行政区划的树,这个树有的时候要显示 ... -
[Ext源码]Ext的核心方法
2010-05-07 01:17 1539Ext.extend方法: extend : functi ... -
[Ext插件]QM.plugin.MutilTreeFilter:为树添加过滤、展开、收缩功能
2010-05-01 19:48 3576先来看看Ext的官方API的左上角 本插件基于Ext3.0 ... -
[Ext入门]图文详解Ext常见开发工具的安装使用
2010-04-27 21:28 4715俗话说,工欲善其事,必先利其器。缺乏好的工具想要用好Ext这么 ... -
[Ext扩展]动态分页大小、动态grid高度、本地数据分页三合一
2010-04-27 02:53 6330Ext.ux.plugins.PageComboResizer ... -
[Ext扩展]两个来自Ext官方论坛的时间控件扩展,可选择时分秒
2010-04-26 22:55 21701为方便大家使用,我把控件所需的js、css、gif文件都提取出 ... -
[Ext扩展]QM.ui.TreeCombo:多功能下拉树列表,内含文档与示例
2010-04-26 20:12 5944有句老话叫不重复造轮 ... -
[Ext扩展]QM.ux.TreeFilter:树节点智能过滤,添加中文模糊匹配功能
2010-04-26 18:24 5719Ext自带一个Ext.tree.TreeFilter类,可以实 ... -
[组件用法]Ext.state.Manager对组件状态进行管理
2010-04-20 01:44 4884Ext.state.Manager存在的意义:简单说就是在客户 ... -
[Ext插件]PinyinFilter:使用拼音首字母对数据进行过滤
2010-04-19 00:37 3952这个插件的目的在于提高用户对于数据的选择效率。经常录入数据的人 ... -
[Ext扩展]MenuToolbar:根据json串生成多级菜单
2010-04-14 20:16 3736注意:html文件的Ext库引用请自行解决,效果图: ... -
[Ext扩展]JsonTreeLoader:一次加载所有树节点更新1.1版本
2010-04-14 19:58 4688仿照官网例子:XmlTreeLoader做的,下面有实例 注意 ... -
[组件用法]Ext.History用法要点
2010-04-14 01:11 2556在我的单页面试了下这个类的用法,发现这个类还是比较特殊的。 说 ... -
拒绝iframe嵌套,ajax方式轻松实现单页面
2010-04-13 00:00 6207以前单位做的项目都是上面一排菜单按钮,每点击一次按钮下面工作区 ... -
[Ext源码解读]事件的注册、添加与触发是如何实现的
2010-04-11 01:49 2141Ext提供了一套强大的事件处理机制,每个组件都有许多事件,用户 ... -
为Ext.Msg添加一个ghost提示的方法
2010-04-05 19:43 2039总觉得的老用alert的方式打断用户操作是非常不好的做法,调用 ... -
Ext.TreeNodeCascade让所有Ext的树支持级联选中
2010-04-05 04:15 6025运用了单例模式,使用的话直接让页面文件引用即可。该程序不直接关 ...
相关推荐
Ext 根据数据库返回json动态生成grid列表实例 完整代码
java后台生成JSON数据和EXT互传数据,全靠它实现。
在大家开发的系统中,如果程序用ExtJS做表现层,那么就需要使ExtJS开发的界面和后台Java代码中生成的数据交互,一般来说,可以选 择XML格式和Json格式的数据进行交互,但是XML格式的数据操作相对繁琐,因此,大部分...
Ext是目前最流行的JS UI库,但是其最新版2.x的中文资料少,或者过于简单,这里给出1.1版本的全中文资料,缺点是该资料是翻译的源代码的注释,所以看起来有点麻烦,但是目前这是中文话最全的资料了
ext1.1文档,html格式的,全部文挡,官方的
Ext.net1.1 支持IE9,新版的Coolite
Ext界面生成器Ext界面生成器Ext界面生成器Ext界面生成器
ext树 无限级 json 数据格式 动态加载
NULL 博文链接:https://syzdcs.iteye.com/blog/1239775
树型表结构,查询一次就可以构建出一个JSON的数据结构树,适用于EXT树
EXT界面生成器 作者网站:http://tof2k.com/ext/formbuilder/ 汉化者网站:www.17ext.com EXT界面生成器 EXT界面生成器 EXT界面生成器
ext-grid+json简单应用,可以直接套用... 可以跑的工程.sql脚本...
Ext 通过界面生成代码 生成器 Ext 通过界面生成代码 生成器
Ext动态树的生成,后台是JSP Ext动态树的生成,后台是JSP
ext-3.4.1.1
ext前后台交互实例,主要以json形式传递数据。
ext1.1 官方帮助文档!(英文)
EXT实例+JSON
ext api chm 英文文档
ext EXT json struts 完整无错源码 ext ext 学习ext的来 ext ext