- 浏览: 147907 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hk_581:
这个有java实现吗
SSDP协议 -
堕落星辰:
太谢谢了! 找了好久 就你这个例子能显示
Extjs TreeGrid加载数据报未组织好 -
lizhuang:
毫秒数算起来应该比这个好
Java 返回两个时间段的小时数和分钟数 -
love_nana:
这个方法是有问题的吧,2012-05-16 12:30 ~~~ ...
Java 返回两个时间段的小时数和分钟数 -
猫小小质:
找了好几天 就你这个例子能运行起来,爱死你了
Extjs TreeGrid加载数据报未组织好
上一节中有写bug没有解决,这一节中将解决掉它,第一次写可能不够详细,有问题qq邮寄给我:380837242@qq.com,
先上代码:
<!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" /> <link type="text/css" rel="stylesheet" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <link type="text/css" rel="stylesheet" href="../shared/examples.css" /> <script type="text/javascript" src="../shared/examples.js"></script> <title>index</title> </head> <body> <script type="text/javascript"> var tab = new Ext.TabPanel({ id:'centerPage', region:'center', deferredRender:false, activeTab:0, title:"中央面板", resizeTabs:true, // turn on tab resizing minTabWidth: 115, tabWidth:135, enableTabScroll:true }); Ext.onReady(function(){ new Ext.Viewport({ enableTabScroll:true, layout:"border", items:[ { id:'topPage', region:"north", //html: '<h1 class="x-panel-header">Page Title</h1>', //autoHeight: true, //border: false, //split: true, //margins: '0 0 0 0', collapsible: true, collapseMode: 'mini', height:50, title:"顶部面板" },{ id:'bottomPage', region:"south", collapsible: true, html: 'Information goes here', collapseMode: 'mini', //split: true, height: 50, title:"底部面板" },tab,{ id:'leftPage', region:"west", collapsible: true, collapseMode: 'mini', //split: true, width:200, title:"左边面板", layout: 'accordion', bodyStyle: { 'background-color': '#eee' }, // defaults: { // border: false // }, items: [ {title: 'Item 1',border:false,html: '<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>'}, {title: 'Item 2',border:false,html: '<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'}, {title: 'Item 3',border:false,html: '<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'} ] },{ id:'rightPage', region:"east", width:100, collapsible: true, collapseMode: 'mini', //split: true, title:"右边面板" } ] }); var root2=new Ext.tree.TreeNode({ id:"root2", text:"树的根" }); var c1=new Ext.tree.TreeNode({ id:'c1', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'源码网', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.codefans.net"></iframe>' }); } tab.setActiveTab(n); } } }); var c2=new Ext.tree.TreeNode({ id:'c2', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'博客园', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.cnblogs.com/"></iframe>' }); } tab.setActiveTab(n); } } }); var c3=new Ext.tree.TreeNode({ id:'c3', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'JavaEye', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.iteye.com"></iframe>' }); } tab.setActiveTab(n); } } }); var c4=new Ext.tree.TreeNode({ id:'c4', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'网易', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.163.com"></iframe>' }); } tab.setActiveTab(n); } } }); var c5=new Ext.tree.TreeNode({ id:'c5', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'新浪', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.sina.com.cn"></iframe>' }); } tab.setActiveTab(n); } } }); var c6=new Ext.tree.TreeNode({ id:'c6', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'百度', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>' }); } tab.setActiveTab(n); } } }); var c7=new Ext.tree.TreeNode({ id:'c7', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'AddTable', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ title: 'New Tab ' + (++index), iconCls: 'tabs', html: 'Tab Body ' + (index) + '<br/><br/>' + Ext.example.bogusMarkup, closable:true }); } tab.setActiveTab(n); } } }); var c8=new Ext.tree.TreeNode({ id:'c8', icon:'../../resources/images/yourtheme/menu/group-checked.gif', text:'upload', listeners:{ 'click':function(node, event) { event.stopEvent(); var n = tab.getComponent(node.id); if (!n) { //判断是否已经打开该面板 n = tab.add({ 'id':node.id, 'title':node.text, closable:true, //通过html载入目标页 html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="upload.html"></iframe>' }); } tab.setActiveTab(n); } } }); //c1.appendChild(c2); // c1.appendChild(c22); root2.appendChild(c1); root2.appendChild(c2); root2.appendChild(c3); root2.appendChild(c4); root2.appendChild(c5); root2.appendChild(c6); root2.appendChild(c7); root2.appendChild(c8); //root2.appendChild(c3) var tree2=new Ext.tree.TreePanel({ renderTo:"tree1", root:root2, //对应 根节点 animate:true, enableDD:false, border:false, rootVisible:false, lines:false, containerScroll: true }); var index = 0; while(index < 7){ addTab(); } function addTab(){ tab.add({ title: 'New Tab ' + (++index), iconCls: 'tabs', html: 'Tab Body ' + (index) + '<br/><br/>' + Ext.example.bogusMarkup, closable:true }).show(); } new Ext.Button({ text: 'Add Tab', width:198, handler: addTab //iconCls:'new-tab' }).render(document.body, 'tree2'); /*dialog = new Ext.ux.UploadDialog.Dialog({ url: 'upload-dialog-request.php', reset_on_hide: false, allow_close_on_upload: true, upload_autostart: true }); dialog.show('tree3');*/ function getDes(){ alert(123); } new Ext.Button({ text: 'upload', width:198, handler: getDes //iconCls:'new-tab' }).render(document.body, 'tree3'); }); </script> </body> </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>Firefox3,IE6,IE7,IE8上传图片预览</title> <style type="text/css"> #preview_wrapper{ display:inline-block; width:150px; height:150px; background-color:#CCC; } #preview_fake{ /* 该对象用于在IE下显示预览图片 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); visibility:hidden; } #preview{ /* 该对象用于在FF下显示预览图片 */ width:150px; height:150px; } </style> <script type="text/javascript"> function onUploadImgChange(sender){ if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ alert('图片格式无效!'); return false; } var objPreview = document.getElementById( 'preview' ); var objPreviewFake = document.getElementById( 'preview_fake' ); var objPreviewSizeFake = document.getElementById( 'preview_size_fake' ); if( sender.files && sender.files[0] ){ objPreview.style.display = 'block'; objPreview.style.width = 'auto'; objPreview.style.height = 'auto'; // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 objPreview.src = sender.files[0].getAsDataURL(); }else if( objPreviewFake.filters ){ // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决 // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 sender.select(); var imgSrc = document.selection.createRange().text; objPreviewFake.filters.item( 'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; objPreviewSizeFake.filters.item( 'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; autoSizePreview( objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); objPreview.style.display = 'none'; } } function onPreviewLoad(sender){ autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); } function autoSizePreview( objPre, originalWidth, originalHeight ){ var zoomParam = clacImgZoomParam( 150, 150, originalWidth, originalHeight ); objPre.style.width = zoomParam.width + 'px'; objPre.style.height = zoomParam.height + 'px'; objPre.style.marginTop = zoomParam.top + 'px'; objPre.style.marginLeft = zoomParam.left + 'px'; } function clacImgZoomParam( maxWidth, maxHeight, width, height ){ var param = { width:width, height:height, top:0, left:0 }; if( width>maxWidth || height>maxHeight ){ rateWidth = width / maxWidth; rateHeight = height / maxHeight; if( rateWidth > rateHeight ){ param.width = maxWidth; param.height = height / rateWidth; }else{ param.width = width / rateHeight; param.height = maxHeight; } } param.left = (maxWidth - param.width) / 2; param.top = (maxHeight - param.height) / 2; return param; } </script> </head> <body> <input id="upload_img" type="file" onchange="onUploadImgChange(this)"/> <div id="preview_wrapper"> <div id="preview_fake"> <img id="preview" onload="onPreviewLoad(this)"/> </div> </div> <br/> <br/> <img id="preview_size_fake"/> </body> </html>
发表评论
-
ExtJs Tree操作
2011-11-08 12:19 1210{ ... -
Extjs TreeGrid加载数据报未组织好
2011-11-04 17:55 3444想要实现 TreeGrid的效果,打开官方例子却看不到效果,怎 ... -
extjs
2011-10-28 09:36 1154弹出yes和no的对话框窗口并判断是yes还是no,进行分别处 ... -
Ext 学习之简单学习快乐开发 文件上传
2011-03-25 13:45 1467先引用js和css <link type=" ... -
Ext 学习之旅 简单学习快乐学习之菜单栏联动到页面中
2011-03-09 18:09 1335直接把上一篇中的centerPage选项换成tab var ... -
ext中的菜单基本应用 转载
2011-03-09 15:37 1378简单菜单应用 菜单包括很多种,比如下拉菜单、分组菜单 ... -
Ext 学习之旅 简单学习快乐学习之页面布局
2011-03-08 16:26 1052<!DOCTYPE html PUBLIC " ...
相关推荐
Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载Ext-tree加载
10. **优化与性能**:最后,学习EXT应用的性能优化技巧,如延迟加载、分页和内存管理,可以提升用户体验。 通过这20篇详细的学习笔记,初学者可以系统地学习EXT的核心概念和技术,逐步掌握EXT开发的全过程。实践是...
7. **加载和异步操作**:EXT Tree支持懒加载,即只有在需要时才从服务器请求子节点数据,这通过`loader`配置实现。异步加载减少了初始页面加载的时间。 8. **扩展和插件**:EXT Tree有丰富的扩展和插件,如`...
### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...
在本文中,我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载,并实现多选和单选功能。Ext JS是一种强大的JavaScript库,用于构建富客户端应用,而Tree Panel则是展示层次结构数据的一种组件。在后台...
EXT JS是一个强大的JavaScript UI框架,提供了一系列的可复用组件,EXT Tree就是其中之一,它可以帮助开发者构建功能丰富的树形视图,常用于文件系统、组织结构、导航菜单等场景。 EXT Tree的核心特性包括: 1. **...
7. **博客链接**:提供的博客链接 "https://zhengkaifl.iteye.com/blog/841338" 可能包含了作者关于 EXT Tree 的详细讲解和示例代码,建议查阅以获取更全面的学习资料。 总结来说,EXT Tree 是 EXTJS 中用于构建树...
EXT JS Tree组件提供了丰富的功能,包括拖放操作、节点的展开与折叠、异步加载数据以及自定义图标和样式。它支持JSON和XML格式的数据源,并可以通过Ajax请求动态加载子节点,优化了大数据量时的性能。开发者还可以...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
总的来说,“DWR方式动态加载EXT TreePanel”是一种结合了EXT JS强大的前端组件能力和DWR高效通信机制的技术方案,它使得动态展示和操作层次数据变得更加便捷和高效。在实际项目中,根据具体需求,我们可以灵活调整...
总的来说,这些资源提供了学习和实践 Ext Tree 的基础。通过查看和运行这些示例,我们可以了解到如何初始化 Ext Tree,如何配置加载数据的方式,如何处理用户交互,以及如何自定义节点的行为。对于开发人员来说,...
在EXT JS框架中,"ext grid tree 应用"是一个常见的功能组合,它结合了Grid面板和Tree面板的优势,用于展示复杂的数据结构。Grid通常用于显示二维表格数据,而Tree则用于展示层次化的数据。在这个例子中,开发者通过...
Ext4.1 demo布局加左侧菜单动态加载 demo
5. **数据加载和通信** Grid组件可以通过不同的数据代理(如`MemoryProxy`、`HttpProxy`)来获取数据。`HttpProxy`常用于从服务器获取数据,`JsonReader`用于解析JSON响应: ```javascript var store = new Ext....
这个工具类的核心功能是获取JSON格式的数据,并将其动态加载到Ext.tree中。 首先,我们需要了解Ext.tree的基本概念。Ext.tree是ExtJS库中的一个组件,它提供了一个可交互的树形视图,允许用户展开、折叠节点以及...
《gwtext学习三部曲》是一份专为GWT初学者设计的教程资源,它涵盖了gwtext和GWT Ext的相关知识。gwtext是Google Web Toolkit (GWT) 的一个扩展库,提供了丰富的用户界面组件和样式,使得在GWT平台上构建复杂的Web...
本篇将深入探讨如何在`Ext JS`中实现Tree组件的不同节点拥有不同的右键菜单,这对于提供定制化的用户体验是非常有用的。 `Ext JS`的Tree组件是一个可扩展的树形结构,用于展示层级数据。在默认情况下,Tree的所有...
异步加载树型是 ExtJS Tree 的一个重要特性,允许只在需要时动态加载子节点,从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现,只有当用户展开一个节点时,才会向服务器请求该节点的子节点数据...
4. 数据加载和异步更新:使用EXT的Ajax请求和SSH2的后台接口进行数据交互,实现实时加载和更新树节点。 5. 考虑权限和安全:根据用户角色和权限控制树节点的可见性和可操作性。 至于“oa_ext”和“oa_ext tree”,...
在这个场景中,"JSP EXT 遍历 TREE"涉及到的是如何在JSP页面上使用EXT框架来遍历和操作TREE组件。 首先,EXT-all.css和ext-all.js是EXT框架的核心文件。前者包含了EXT所有组件的样式,确保界面的美观和一致性;后者...