版本:extjs 2.3.0
需求:自定义可排序列选择。
例子:http://localhost/ext230/examples/dd/dnd_grid_to_grid.html
封装:暂无,给大家参考下。
效果如图1所示。
图1
c.html:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>test</title>
- <link rel="stylesheet" type="text/css" href="./js/extjs/resources/css/ext-all.css" />
- <script type="text/javascript" src="./js/extjs/ext-base.js"></script>
- <script type="text/javascript" src="./js/extjs/ext-all.js"></script>
- <script type="text/javascript" src="c.js"></script>
- </head>
- <body>
- <h1>Drag and Drop from Grid to Grid Example</h1>
- <p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>
- <p>Note that the js is not minified so it is readable. See <a href="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p>
- <div id="panel"></div>
- </body>
- </html>
c.js
- /*
- * Ext JS Library 2.3.0
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://extjs.com/license
- */
- Ext.onReady(function(){
- Ext.QuickTips.init();
- var myData = {
- 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" }
- ]
- };
- // 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: "列名称",
- //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 : 'secondGridDDGroup',
- store : firstGridStore,
- columns : cols,
- enableDragDrop : true,
- stripeRows : true,
- autoExpandColumn : 'name',
- //width : 325,
- height : 272,
- columnWidth:0.4,
- //region : 'west',
- title : '待选择列'
- });
- var secondGridStore = new Ext.data.JsonStore({
- fields : fields,
- root : 'records'
- });
- // create the destination Grid
- var secondGrid = new Ext.grid.GridPanel({
- ddGroup : 'firstGridDDGroup',
- store : secondGridStore,
- columns : cols,
- enableDragDrop : true,
- stripeRows : true,
- autoExpandColumn : 'name',
- height : 272,
- columnWidth:0.4,
- title : '已选择列'
- });
- var lrPanel = {
- columnWidth:0.1,
- height : 300,
- items : [
- new Ext.Button({
- text:"> ",
- style: 'margin: 70px 0px 0px 15px',
- handler : function() {
- if (firstGrid.getSelectionModel().hasSelection())
- {
- // 数据行数
- var total = secondGridStore.getCount();
- var records = firstGrid.getSelectionModel().getSelections();
- for (var i = 0; i < records.length; i++) {
- var record = records[i];
- firstGridStore.remove(record);
- secondGridStore.insert(total + i, record);
- }
- }
- }
- }),
- new Ext.Button({
- text:">>",
- style: 'margin: 15px 0px 0px 15px',
- handler : function() {
- // 数据行数
- var total = secondGridStore.getCount();
- var i = 0;
- while (firstGridStore.getCount() > 0)
- {
- var record = firstGridStore.getAt(0);
- firstGridStore.remove(record);
- secondGridStore.insert(total + i, record);
- i ++;
- }
- }
- }),
- new Ext.Button({
- text:" <",
- style: 'margin: 15px 0px 0px 15px',
- handler : function() {
- if (secondGrid.getSelectionModel().hasSelection())
- {
- // 数据行数
- var total = firstGridStore.getCount();
- var records = secondGrid.getSelectionModel().getSelections();
- for (var i = 0; i < records.length; i++) {
- var record = records[i];
- secondGridStore.remove(record);
- firstGridStore.insert(total + i, record);
- }
- }
- }
- }),
- new Ext.Button({
- text:"<<",
- style: 'margin: 15px 0px 0px 15px',
- handler : function() {
- // 数据行数
- var total = firstGridStore.getCount();
- var i = 0;
- while (secondGridStore.getCount() > 0)
- {
- var record = secondGridStore.getAt(0);
- secondGridStore.remove(record);
- firstGridStore.insert(total + i, record);
- i ++;
- }
- }
- })
- ]
- };
- var udPanel = {
- columnWidth:0.1,
- height : 300,
- items : [
- new Ext.Button({
- text:"向上",
- style: 'margin: 90px 0px 0px 10px',
- handler : function() {
- if (secondGrid.getSelectionModel().hasSelection())
- {
- var record = secondGrid.getSelectionModel().getSelected();
- //数据行数
- var total = secondGridStore.getCount();
- for(var i=0; i < total - 1; i++){
- var temp = secondGridStore.getAt(i);
- if (temp.get('name') == record.get('name'))
- {
- break;
- }
- var next = secondGridStore.getAt(i + 1);
- if (next.get('name') == record.get('name'))
- {
- secondGridStore.remove(next);
- secondGridStore.insert(i, next);
- }
- }
- }
- }
- }),
- new Ext.Button({
- text:"向下",
- style: 'margin: 15px 0px 0px 10px',
- handler : function() {
- if (secondGrid.getSelectionModel().hasSelection())
- {
- var record = secondGrid.getSelectionModel().getSelected();
- //数据行数
- var total = secondGridStore.getCount();
- for(var i=0; i < total - 1; i++){
- var next = secondGridStore.getAt(i);
- if (next.get('name') == record.get('name'))
- {
- secondGridStore.remove(next);
- secondGridStore.insert(i + 1, next);
- }
- }
- }
- }
- })
- ]
- };
- //Simple 'border layout' panel to house both grids
- var displayPanel = new Ext.Panel({
- width : 650,
- height : 300,
- //layout : 'border',
- layout : 'column',
- renderTo : 'panel',
- items : [
- firstGrid,
- lrPanel,
- secondGrid,
- udPanel
- ],
- bbar : [
- '->', // Fill
- {
- text : '确定',
- handler : function() {
- // 数据行数
- var total = secondGridStore.getCount();
- var results = "";
- if (total > 0)
- {
- for (var i = 0; i < total; i ++)
- {
- var record = secondGridStore.getAt(i);
- results += record.get("name") + ",";
- }
- results = results.substring(0, results.length - 1);
- }
- alert("选择的列名称:" + results);
- }
- },
- {
- text : '重置',
- handler : function() {
- //refresh source grid
- firstGridStore.loadData(myData);
- //purge destination grid
- secondGridStore.removeAll();
- }
- }
- ]
- });
- // used to add records to the destination stores
- var blankRecord = Ext.data.Record.create(fields);
- /****
- * Setup Drop Targets
- ***/
- // This will make sure we only drop to the view container
- var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
- var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
- ddGroup : 'firstGridDDGroup',
- copy : true,
- notifyDrop : function(ddSource, e, data){
- // Generic function to add records.
- function addRow(record, index, allItems) {
- // Search for duplicates
- var foundItem = firstGridStore.find('name', record.data.name);
- // if not found
- if (foundItem == -1) {
- firstGridStore.add(record);
- // Call a sort dynamically
- //firstGridStore.sort('name', 'ASC');
- //Remove Record from the source
- ddSource.grid.store.remove(record);
- }
- }
- // Loop through the selections
- Ext.each(ddSource.dragData.selections ,addRow);
- return(true);
- }
- });
- // This will make sure we only drop to the view container
- var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
- var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
- ddGroup : 'secondGridDDGroup',
- copy : false,
- notifyDrop : function(ddSource, e, data){
- // Generic function to add records.
- function addRow(record, index, allItems) {
- // Search for duplicates
- var foundItem = secondGridStore.find('name', record.data.name);
- // if not found
- if (foundItem == -1) {
- secondGridStore.add(record);
- // Call a sort dynamically
- //secondGridStore.sort('name', 'ASC');
- //Remove Record from the source
- ddSource.grid.store.remove(record);
- }
- }
- // Loop through the selections
- Ext.each(ddSource.dragData.selections ,addRow);
- return(true);
- }
- });
- });