原文地址在这里,英语不太好,还是没看太明白。。[url=http://extjs.com/forum/showthread.php?t=42762&page=2]点这里[/url]
代码如下:
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 & 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]