版本:extjs 2.3.0
需求:自定义可排序列选择。
例子:http://localhost/ext230/examples/dd/dnd_grid_to_grid.html
封装:暂无,给大家参考下。
效果如图1所示。
图1
c.html:
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
- <title>test</title>
- <linkrel="stylesheet"type="text/css"href="./js/extjs/resources/css/ext-all.css"/>
- <scripttype="text/javascript"src="./js/extjs/ext-base.js"></script>
- <scripttype="text/javascript"src="./js/extjs/ext-all.js"></script>
- <scripttype="text/javascript"src="c.js"></script>
- </head>
- <body>
- <h1>DragandDropfromGridtoGridExample</h1>
- <p>ThisexampleshowshowtosetuptwowaydraganddropfromoneGridPaneltoanother.</p>
- <p>Notethatthejsisnotminifiedsoitisreadable.See<ahref="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p>
- <divid="panel"></div>
- </body>
- </html>
c.js
- /*
- *ExtJSLibrary2.3.0
- *Copyright(c)2006-2009,ExtJS,LLC.
- *licensing@extjs.com
- *
- *http://extjs.com/license
- */
- Ext.onReady(function(){
- Ext.QuickTips.init();
- varmyData={
- records:[
- {name:"名称0",column1:"0",column2:"0"},
- {name:"名称1",column1:"1",column2:"1"},
- {name:"名称2",column1:"2",column2:"2"},
- {name:"名称3",column1:"3",column2:"3"},
- {name:"名称4",column1:"4",column2:"4"},
- {name:"名称5",column1:"5",column2:"5"},
- {name:"名称6",column1:"6",column2:"6"},
- {name:"名称7",column1:"7",column2:"7"},
- {name:"名称8",column1:"8",column2:"8"},
- {name:"名称9",column1:"9",column2:"9"},
- {name:"名称10",column1:"9",column2:"9"},
- {name:"名称11",column1:"9",column2:"9"},
- {name:"名称12",column1:"9",column2:"9"},
- {name:"名称13",column1:"9",column2:"9"},
- {name:"名称14",column1:"9",column2:"9"},
- {name:"名称15",column1:"9",column2:"9"},
- {name:"名称16",column1:"9",column2:"9"},
- {name:"名称17",column1:"9",column2:"9"},
- {name:"名称18",column1:"9",column2:"9"},
- {name:"名称19",column1:"9",column2:"9"}
- ]
- };
- //Genericfieldsarraytouseinbothstoredefs.
- varfields=[
- {name:'name',mapping:'name'},
- {name:'column1',mapping:'column1'},
- {name:'column2',mapping:'column2'}
- ];
- //createthedatastore
- varfirstGridStore=newExt.data.JsonStore({
- fields:fields,
- data:myData,
- root:'records'
- });
- //ColumnModelshortcutarray
- varcols=[
- {id:'name',header:"列名称",
- //width:160,
- sortable:true,
- dataIndex:'name'
- }//,
- //{header:"column1",width:50,sortable:true,dataIndex:'column1'},
- //{header:"column2",width:50,sortable:true,dataIndex:'column2'}
- ];
- //declarethesourceGrid
- varfirstGrid=newExt.grid.GridPanel({
- ddGroup:'secondGridDDGroup',
- store:firstGridStore,
- columns:cols,
- enableDragDrop:true,
- stripeRows:true,
- autoExpandColumn:'name',
- //width:325,
- height:272,
- columnWidth:0.4,
- //region:'west',
- title:'待选择列'
- });
- varsecondGridStore=newExt.data.JsonStore({
- fields:fields,
- root:'records'
- });
- //createthedestinationGrid
- varsecondGrid=newExt.grid.GridPanel({
- ddGroup:'firstGridDDGroup',
- store:secondGridStore,
- columns:cols,
- enableDragDrop:true,
- stripeRows:true,
- autoExpandColumn:'name',
- height:272,
- columnWidth:0.4,
- title:'已选择列'
- });
- varlrPanel={
- columnWidth:0.1,
- height:300,
- items:[
- newExt.Button({
- text:">",
- style:'margin:70px0px0px15px',
- handler:function(){
- if(firstGrid.getSelectionModel().hasSelection())
- {
- //数据行数
- vartotal=secondGridStore.getCount();
- varrecords=firstGrid.getSelectionModel().getSelections();
- for(vari=0;i<records.length;i++){
- varrecord=records[i];
- firstGridStore.remove(record);
- secondGridStore.insert(total+i,record);
- }
- }
- }
- }),
- newExt.Button({
- text:">>",
- style:'margin:15px0px0px15px',
- handler:function(){
- //数据行数
- vartotal=secondGridStore.getCount();
- vari=0;
- while(firstGridStore.getCount()>0)
- {
- varrecord=firstGridStore.getAt(0);
- firstGridStore.remove(record);
- secondGridStore.insert(total+i,record);
- i++;
- }
- }
- }),
- newExt.Button({
- text:"<",
- style:'margin:15px0px0px15px',
- handler:function(){
- if(secondGrid.getSelectionModel().hasSelection())
- {
- //数据行数
- vartotal=firstGridStore.getCount();
- varrecords=secondGrid.getSelectionModel().getSelections();
- for(vari=0;i<records.length;i++){
- varrecord=records[i];
- secondGridStore.remove(record);
- firstGridStore.insert(total+i,record);
- }
- }
- }
- }),
- newExt.Button({
- text:"<<",
- style:'margin:15px0px0px15px',
- handler:function(){
- //数据行数
- vartotal=firstGridStore.getCount();
- vari=0;
- while(secondGridStore.getCount()>0)
- {
- varrecord=secondGridStore.getAt(0);
- secondGridStore.remove(record);
- firstGridStore.insert(total+i,record);
- i++;
- }
- }
- })
- ]
- };
- varudPanel={
- columnWidth:0.1,
- height:300,
- items:[
- newExt.Button({
- text:"向上",
- style:'margin:90px0px0px10px',
- handler:function(){
- if(secondGrid.getSelectionModel().hasSelection())
- {
- varrecord=secondGrid.getSelectionModel().getSelected();
- //数据行数
- vartotal=secondGridStore.getCount();
- for(vari=0;i<total-1;i++){
- vartemp=secondGridStore.getAt(i);
- if(temp.get('name')==record.get('name'))
- {
- break;
- }
- varnext=secondGridStore.getAt(i+1);
- if(next.get('name')==record.get('name'))
- {
- secondGridStore.remove(next);
- secondGridStore.insert(i,next);
- }
- }
- }
- }
- }),
- newExt.Button({
- text:"向下",
- style:'margin:15px0px0px10px',
- handler:function(){
- if(secondGrid.getSelectionModel().hasSelection())
- {
- varrecord=secondGrid.getSelectionModel().getSelected();
- //数据行数
- vartotal=secondGridStore.getCount();
- for(vari=0;i<total-1;i++){
- varnext=secondGridStore.getAt(i);
- if(next.get('name')==record.get('name'))
- {
- secondGridStore.remove(next);
- secondGridStore.insert(i+1,next);
- }
- }
- }
- }
- })
- ]
- };
- //Simple'borderlayout'paneltohousebothgrids
- vardisplayPanel=newExt.Panel({
- width:650,
- height:300,
- //layout:'border',
- layout:'column',
- renderTo:'panel',
- items:[
- firstGrid,
- lrPanel,
- secondGrid,
- udPanel
- ],
- bbar:[
- '->',//Fill
- {
- text:'确定',
- handler:function(){
- //数据行数
- vartotal=secondGridStore.getCount();
- varresults="";
- if(total>0)
- {
- for(vari=0;i<total;i++)
- {
- varrecord=secondGridStore.getAt(i);
- results+=record.get("name")+",";
- }
- results=results.substring(0,results.length-1);
- }
- alert("选择的列名称:"+results);
- }
- },
- {
- text:'重置',
- handler:function(){
- //refreshsourcegrid
- firstGridStore.loadData(myData);
- //purgedestinationgrid
- secondGridStore.removeAll();
- }
- }
- ]
- });
- //usedtoaddrecordstothedestinationstores
- varblankRecord=Ext.data.Record.create(fields);
- /****
- *SetupDropTargets
- ***/
- //Thiswillmakesureweonlydroptotheviewcontainer
- varfirstGridDropTargetEl=firstGrid.getView().el.dom.childNodes[0].childNodes[1];
- varfirstGridDropTarget=newExt.dd.DropTarget(firstGridDropTargetEl,{
- ddGroup:'firstGridDDGroup',
- copy:true,
- notifyDrop:function(ddSource,e,data){
- //Genericfunctiontoaddrecords.
- functionaddRow(record,index,allItems){
- //Searchforduplicates
- varfoundItem=firstGridStore.find('name',record.data.name);
- //ifnotfound
- if(foundItem==-1){
- firstGridStore.add(record);
- //Callasortdynamically
- //firstGridStore.sort('name','ASC');
- //RemoveRecordfromthesource
- ddSource.grid.store.remove(record);
- }
- }
- //Loopthroughtheselections
- Ext.each(ddSource.dragData.selections,addRow);
- return(true);
- }
- });
- //Thiswillmakesureweonlydroptotheviewcontainer
- varsecondGridDropTargetEl=secondGrid.getView().el.dom.childNodes[0].childNodes[1]
- vardestGridDropTarget=newExt.dd.DropTarget(secondGridDropTargetEl,{
- ddGroup:'secondGridDDGroup',
- copy:false,
- notifyDrop:function(ddSource,e,data){
- //Genericfunctiontoaddrecords.
- functionaddRow(record,index,allItems){
- //Searchforduplicates
- varfoundItem=secondGridStore.find('name',record.data.name);
- //ifnotfound
- if(foundItem==-1){
- secondGridStore.add(record);
- //Callasortdynamically
- //secondGridStore.sort('name','ASC');
- //RemoveRecordfromthesource
- ddSource.grid.store.remove(record);
- }
- }
- //Loopthroughtheselections
- Ext.each(ddSource.dragData.selections,addRow);
- return(true);
- }
- });
- });