Extjs drag-drop

by wales

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/3.4.1-1/resources/css/ext-all.css">
<body>
<div id="panel"></div>
</body>

JavaScript

/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * [email protected]
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    var myData = {
		records : [
			{ name : "目錄1"},
			{ name : "目錄2"},
			{ name : "目錄3"},
			{ name : "目錄4"},
			{ name : "目錄5"},
			{ name : "目錄6"},
			{ name : "目錄7"},
			{ name : "目錄8"},
			{ name : "目錄9"}
		]
	};


	// Generic fields array to use in both store defs.
	var fields = [
		{name: 'name', mapping : 'name'}
    ];

    // 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'},
	];

	// declare the source Grid
    var firstGrid = new Ext.grid.GridPanel({
	ddGroup          : 'secondGridDDGroup',
        store            : firstGridStore,
        columns          : cols,
	enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'name',
        title            : 'Source'
    });

    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',
        title            : 'Destination'
    });


	//Simple 'border layout' panel to house both grids
	var displayPanel = new Ext.Panel({
		width        : 650,
		height       : 300,
		layout       : 'hbox',
		renderTo     : 'panel',
		defaults     : { flex : 1 }, //auto stretch
		layoutConfig : { align : 'stretch' },
		items        : [
			firstGrid,
			secondGrid
		],
		bbar    : [
			'->', // Fill
			{
				text    : '清除重選',
				handler : function() {
					//refresh source...