- 浏览: 119539 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (135)
- java (135)
- [转]c# 画圆角矩形 (1)
- 设计模式生活实例 (1)
- .nET2.0小技巧 (1)
- 从另一个角度看敏捷实践(一)--IPM:承诺的仪式 (1)
- javascript字符串转json对象 (1)
- 使用BeanUtils时,Date类型值为空的解决方法 (1)
- Lenovo V460+Ubuntu 11.10 无线网问题 (1)
- Lucene 索引和搜索过程核心类详解 (1)
- Android短信编解码方式 (1)
- 股神巴菲特十大致富秘籍 (1)
- Map遍历的三种方法 (1)
- Android中用Toast.cancel()方法优化toast内容的显示 (1)
- ViewFlipper “Receiver not registered” Error (1)
- javax.xml.transform.TransformerFactoryConfigurationError (1)
- JNI调用的注意事项 (1)
- JUnit单元测试感悟 (1)
- 用C#写定时关机的程序 (1)
- ASP.NET开发工具Web Matrix介绍 (1)
- MapXtreme2004代码 MapControl控件中显示地图文件 (1)
- 《使用 Microsoft .NET 的企业解决方案模式》读书笔记3 (1)
- 微创短信开发平台 (1)
- 谈谈Q+平台的技术实现 (1)
- 手机防盗软件实现(源码) (1)
- 虚析构函数(总结 帖子) (1)
- c语言中去除const修饰 (1)
- ORA-01012: not logged on 解决办法 (1)
- paypal提现如何省钱 (1)
- 数独suduku (1)
- MyISAM InnoDB 区别 (1)
- 随 笔 (1)
- Android上的log,日志相关 (1)
- 百度质量部实习居然通过了~ (1)
最新评论
-
野狐禅:
ext.get('imagebrowse') is null
ExtJs上传图片预览功能 -
zhuyl_wind:
不切实际,呵呵
[]5年内买车买房-理财篇 -
in南京:
关键你那两千块钱就够交一个多月的房租!换个城市你那六百也远远不 ...
[]5年内买车买房-理财篇 -
javac_xinyun:
呵呵,看完了,确实不错,貌似第一年的房租每月算进去 ,人际关系 ...
[]5年内买车买房-理财篇 -
dishikun:
貌似很不错,就是没把房租算进去!
[]5年内买车买房-理财篇
原文地址在这里,英语不太好,还是没看太明白。。点这里
代码如下:
dnd_tree_to_grid.js
html
multisel-data.json
[img]/upload/attachment/76551/fcab7c8b-f880-3110-bb88-70311486197d.jpg" alt="[/img]
代码如下:
dnd_tree_to_grid.js
ext.onready(function(){ var mydata = { records : [ { name : "rec 0", column1 : "0", column2 : "0" }, { name : "rec 1", column1 : "1", column2 : "1" }, { name : "rec 2", column1 : "2", column2 : "2" }, { name : "rec 3", column1 : "3", column2 : "3" }, { name : "rec 4", column1 : "4", column2 : "4" }, { name : "rec 5", column1 : "5", column2 : "5" }, { name : "rec 6", column1 : "6", column2 : "6" }, { name : "rec 7", column1 : "7", column2 : "7" }, { name : "rec 8", column1 : "8", column2 : "8" }, { name : "rec 9", column1 : "9", column2 : "9" } ] }; // generic fields array to use in both store defs. var fields = [ {name: 'name', mapping : 'name'}, {name: 'column1', mapping : 'column1'}, {name: 'column2', mapping : 'column2'} ]; // create the data store var firstgridstore = new ext.data.jsonstore({ fields : fields, data : mydata, root : 'records' }); // column model shortcut array var cols = [ { id : 'name', header: "record name", width: 160, sortable: true, dataindex: 'name'}, {header: "column1", width: 50, sortable: true, dataindex: 'column1'}, {header: "column2", width: 50, sortable: true, dataindex: 'column2'} ]; // declare the source grid var firstgrid = new ext.grid.gridpanel({ ddgroup : 'secondtreeddgroup', store : firstgridstore, columns : cols, //enabledragdrop : false, striperows : true, istarget : true, autoexpandcolumn : 'name', width : 325, region : 'west', title : 'first grid' }); var root = new ext.tree.asynctreenode({ text: 'main menu', draggable:false, id:'source' }); var firsttree = new ext.tree.treepanel({ autoscroll:true, animate:true, enabledd:true, ddgroup: 'secondtreeddgroup', containerscroll: true, region : 'center', root: root, loader: new ext.tree.treeloader({ dataurl:'multisel-data.json' }) }); var blankrecord = ext.data.record.create(fields); //simple 'border layout' panel to house both grids var displaypanel = new ext.panel({ width : 650, height : 300, layout : 'border', renderto : 'panel', items : [ firstgrid, firsttree ] }); var secondgriddroptargetel = firstgrid.getview().el.dom.childnodes[0].childnodes[1] var destgriddroptarget = new ext.dd.droptarget(secondgriddroptargetel, { ddgroup : 'secondtreeddgroup', copy : false, notifydrop : function(ddsource, e, data){ var record = new blankrecord({ name : ddsource.dragdata.node.attributes.text, column1 : ddsource.dragdata.node.attributes.id, column2 : ddsource.dragdata.node.attributes.cls }); firstgridstore.add(record); return(true); } }); });
html
<html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>multiselect &amp; itemselector</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all-debug.js"></script> <script type="text/javascript" src="dnd_tree_to_grid.js"></script></head><body></body><div id="panel"></div> <div id="contactspanel"></div></html>
multisel-data.json
[{ text:'multiselection example', id:'0', cls:'master-text', iconcls:'text-folder', children:[{ text:'abstract rendering in treenodeui', leaf:true, iconcls:'text' },{ text:'create treenodeui with column knowledge', leaf:true, iconcls:'text' },{ text:'create treepanel to render and lock headers', leaf:true, iconcls:'text' },{ text:'add css to make it look fly', leaf:true, iconcls:'text' },{ text:'test and make sure it works', leaf:true, iconcls:'text' }]}]
[img]/upload/attachment/76551/fcab7c8b-f880-3110-bb88-70311486197d.jpg" alt="[/img]
发表评论
-
百度质量部实习居然通过了~
2012-02-08 12:23 992[size=small;]? ? ?本来打算在软工所苦 ... -
Android上的log,日志相关
2012-02-07 14:18 1535摘自:http://blog.csdn.net/met ... -
随 笔
2012-02-04 13:39 600金风玉露一相逢,便胜却人间无数。英文版: chemis ... -
MyISAM InnoDB 区别
2012-02-02 16:59 737<h1 id="artibody ... -
数独suduku
2012-01-31 14:38 916sudu sudu sudu sudu sudu su ... -
paypal提现如何省钱
2011-12-28 16:58 1224据PayPal中文注册得知,如今很多收样品费的外贸商户 ... -
ORA-01012: not logged on 解决办法
2011-12-28 13:08 3512<span style="font-f ... -
c语言中去除const修饰
2011-12-21 10:54 1435[size=16px;]<span style= ... -
虚析构函数(总结 帖子)
2011-12-21 09:54 706<span style="" ... -
手机防盗软件实现(源码)
2011-12-20 12:54 938<a href="http://blo ... -
谈谈Q+平台的技术实现
2011-12-20 09:49 963这篇文章是我个人 ... -
微创短信开发平台
2011-12-19 11:39 772在网上闲逛,发现了一个站点,微创短信开发平台(http ... -
《使用 Microsoft .NET 的企业解决方案模式》读书笔记3
2011-12-19 10:24 783第3章 Web表示模式 没有一个设计策略能够适合所有情 ... -
MapXtreme2004代码 MapControl控件中显示地图文件
2011-12-15 14:29 912::<?xml:namespace prefix ... -
ASP.NET开发工具Web Matrix介绍
2011-12-15 13:39 970<p class="MsoPlain ... -
用C#写定时关机的程序
2011-12-15 11:14 705</span></font>& ... -
JUnit单元测试感悟
2011-12-14 11:29 864<p class="MsoNorma ... -
JNI调用的注意事项
2011-12-14 09:34 755JNI的简单教程网上很多,看看就能够明白,照着操作也基 ... -
javax.xml.transform.TransformerFactoryConfigurationError
2011-12-13 13:34 854<span style="" ... -
ViewFlipper “Receiver not registered” Error
2011-12-12 10:59 1127偶尔出现这个错误: <span> < ...
相关推荐
在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...
首先,EXTJS的Tree组件和Grid组件提供了内置的拖放(Drag and Drop,简称D&D)支持。Tree组件通常用于展示层级结构的数据,而Grid组件则常用于展示表格数据。将Tree中的节点拖放到Grid中,可以实现数据的转移或关联...
8. **拖放功能(Drag and Drop)** - 可以启用拖放功能,允许用户重新排列节点,使用`ddGroup`,`enableDragDrop`等配置项。 - 实现拖放需要扩展`Ext.dd.DragSource`和`Ext.dd.DropTarget`。 9. **自定义节点模板...
10. **拖放排序(Drag-and-Drop Sorting)** ExtJS Grid支持拖放功能,用户可以调整列顺序,或者将数据行拖动到不同的组或位置。 11. **组合列(Grouping Columns)** 数据可以按需分组,显示折叠/展开的层次结构...
9. **Drag & Drop**:框架支持拖放操作,可轻松实现组件间的交互。 10. **主题支持**:ExtJS 3.1.0提供多套皮肤,可以改变应用的整体外观。 总的来说,ExtJS 3.1.0为开发者提供了一套完整的工具集,用于创建功能...
11. **拖放(Drag & Drop)**:内置的拖放API使得元素间拖放操作变得简单易用。 12. **AJAX请求(Ajax Request)**:通过Ext.Ajax对象,可以发送XMLHttpRequest请求,处理JSON、XML等多种数据格式。 13. **数据包...
1. DND(Drag and Drop):支持元素拖放操作,可以创建复杂的拖放交互。 2. 动画(Animations):通过Ext.fx API实现平滑的动画效果。 3. 工具提示(Tooltips)和提示框(Tips):提供信息提示功能。 4. 国际化...
此外,文档可能还会讨论Ajax请求、数据绑定、布局管理(Layouts)以及拖放(Drag & Drop)功能。布局管理器允许开发者轻松地组织和调整组件的大小和位置,而拖放功能则增强了应用的交互性。 对于高级话题,如树形...
4. **可拖放(Drag and Drop)**:增强了拖放功能,使得在界面上移动和排列组件变得更加简单。 5. **动画(Animations)**:EXTJS 4.0 加强了动画效果,允许开发者创建平滑的过渡和动画,提升用户体验。 6. **新组件...
- **Drag Source** 和 **Drop Target**:定义可拖动和接收拖动的元素,实现元素间的拖放操作。 8. **Ajax和数据通信** - **Ajax请求(Ext.Ajax)**:封装了XMLHttpRequest对象,提供异步发送和接收数据的API。 -...
7. **Drag and Drop**:EXTJS支持拖放操作,使得用户可以轻松地在组件之间移动元素,增强了交互性。 8. **Widgets and UI Components**:EXTJS提供了大量的预定义组件,如按钮、工具栏、菜单、提示框、进度条等,...
10. **拖放(Drag & Drop)**:EXTJS支持组件间的拖放操作,增强用户体验,实现更直观的交互。 本电子教材会详细介绍EXTJS的这些核心特性和使用方法,帮助开发者快速掌握EXTJS框架。对于初学者来说,学习EXTJS不仅...
实现拖拽功能,我们需要使用ExtJS提供的DD(Drag and Drop)API。DD API包括几个关键类,如DragSource、DropTarget、DDProxy等,它们协同工作以实现拖放行为。在树和表格之间进行拖拽,我们需要配置这两个组件以支持...
7. **Drag & Drop**:支持拖放操作,使得用户可以更直观地与界面交互。 8. **Window and Dialogs**:可以创建弹出窗口和对话框,用于显示独立的交互内容。 9. **Viewport**:EXTJS的视口组件可以根据浏览器窗口大小...
10. **Drag and Drop**: 支持拖放操作,便于构建具有交互性的应用,如文件管理器等。 EXTJS的前台开发部分通常涉及以下步骤: 1. **项目初始化**: 使用EXTJS的命令行工具(Sencha CMD)生成项目结构,包括基本的...
8. **拖放与小部件(Drag and Drop with Widgets)** - 拖放是一种直观的交互方式,允许用户通过鼠标将对象从一个位置移动到另一个位置。小部件是指可以被拖放的组件。 #### 四、面向对象编程与复合组件 **部分内容...
拖放(Drag and Drop)是一种直观的用户交互方式,ExtJS的小部件(Widget)提供了实现这一功能的机制,允许用户通过拖动对象来完成各种操作,如重新排序列表项或移动组件位置。 ### 4. 构建可配置的复合组件 书中还...
7. **拖放(Drag & Drop)功能**:EXTJS 3实现了标准的HTML5拖放API,可以轻松创建可拖放的组件,增强了用户交互体验。 8. **树形(Tree)组件**:EXTJS 3的树形组件允许展示和操作层次结构的数据,支持节点的展开...
- **Drag & Drop**: 支持元素的拖放操作,可应用于列表、树等组件。 - **ToolTips**: 提示框组件,用于显示鼠标悬停时的额外信息。 - **Ajax Grid**: 支持从服务器动态加载数据的网格组件。 - **Charts**: 图表...
例如,可能会有展示如何创建一个基本的网格(Grid)来显示和编辑数据,如何实现拖放操作(Drag and Drop),如何使用图表(Charts)进行数据可视化,或是如何自定义组件(Component)来满足特定需求。通过这些实例,...