原文地址在这里,英语不太好,还是没看太明白。。点这里
代码如下:
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 & 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'
}]
}]
- 大小: 44.5 KB
分享到:
相关推荐
ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局
学习extjs资料,tree合成grid,很不错的视频文件,值得收藏
NULL 博文链接:https://zah5897.iteye.com/blog/813809
extjs drag and drop example
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
学习extjs资料,tree合成grid,很不错的视频文件,值得收藏
学习extjs资料,tree合成grid,很不错的视频文件,值得收藏
ExtJs4 Checkbox tree
Extjs的tree Extjs的tree Extjs的tree Extjs的tree Extjs的tree
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
NULL 博文链接:https://lingyibin.iteye.com/blog/804906
extjs4 ComboBox 点击下拉框 出现grid效果 这里只实现了点击下拉框显示gird,点击其他地方grid自动消失
这是一个简单的在extjs下的grid转化到Excel,里面代码简单易懂,在包里面还集成了复杂的js转化函数,不过本人没有用它来进行转化! 注:在用EXTJS的导出Excel技术中,一定要注意分页的问题
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
Extjs (Tree+Tab+Grid)通用后台模板,全静态数据,下载即可看效果。可以完全套用。
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJs Tree