zoukankan      html  css  js  c++  java
  • Drag and Drop Grid (ExtJS 2)

    Sebagai lanjutan dari tutorial Extjs sebelumnya, sekarang saya mencoba untuk menulis untuk tutorial selanjutnya yakni bagaimana membuat Drag and Drop Grid dengan Extjs. Pastikan anda sudah memiliki / mendowload Library ExtJS versi 2.2.1. Berikut langkah-langkahnya :

    >> buat file dengan nama drag_grid.html ketik kode berikut :

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Contoh Drag and Drop antar Grid</title>

    <link rel="stylesheet" type="text/css" href="ext-2.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-2.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.2.1/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-2.2.1/examples/shared/code-display.js"></script>
    <link rel="stylesheet" type="text/css" href="ext-2.2.1/examples/shared/examples.css" />
    <script type="text/javascript" src="drag_grid.js"></script>

    </head>
    <body>
    <div id="panel"></div>
    </body>
    </html>

    >> buat file dengan nama drag_grid.js ketik kode berikut :

    Ext.onReady(function(){

      

        var dataKu = {

            records : [

                { name : "Data 1", column1 : "Isi Kolom 1", column2 : "0" },

                { name : "Data 2", column1 : "1", column2 : "Isi Kolom 2" },

                { name : "Data 3", column1 : "Isi Kolom 1", column2 : "2" },

                { name : "Data 4", column1 : "3", column2 : "Isi Kolom 2" },

                { name : "Data 5", column1 : "Isi Kolom 1", column2 : "4" },

                { name : "Data 6", column1 : "5", column2 : "Isi Kolom 2" },

                { name : "Data 7", column1 : "Isi Kolom 1", column2 : "6" },

                { name : "Data 8", column1 : "7", column2 : "Isi Kolom 2" },

                { name : "Data 9", column1 : "Isi Kolom 1", column2 : "8" },

                { name : "Data 10", column1 : "9", column2 : "Isi Kolom 2" }

            ]

        };

     
        // 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 isiGridPertama = new Ext.data.JsonStore({

            fields : fields,

            data   : dataKu,

            root   : 'records'

        });

         
     
        // Column Model shortcut array

        var cols = [

            { id : 'name', header: "Nama Data", 100, sortable: true, dataIndex: 'name'},

            {header: "Kolom 1", 70, sortable: true, dataIndex: 'column1'},

            {header: "Kolom 2", 70, sortable: true, dataIndex: 'column2'}

        ];

        

        // declare the source Grid

        var gridPertama = new Ext.grid.GridPanel({

            ddGroup          : 'gridKeduaDDGroup',

            store            : isiGridPertama,

            columns          : cols,

            enableDragDrop   : true,

            stripeRows       : true,

            autoExpandColumn : 'name',

            width            : 350,

            region           : 'west',

            title            : 'Grid Pertama'

        });

     
        var isiGridKedua = new Ext.data.JsonStore({

            fields : fields,

            root   : 'records'

        });

         
        // create the destination Grid

        var gridKedua = new Ext.grid.GridPanel({

            ddGroup          : 'gridPertamaDDGroup',

            store            : isiGridKedua,

            columns          : cols,

            enableDragDrop   : true,

            stripeRows       : true,

            autoExpandColumn : 'name',

            width            : 350,

            region           : 'center',

            title            : 'Grid Kedua'

        });

     
         
        //Simple 'border layout' panel to house both grids

        var displayPanel = new Ext.Panel({

            width    : 700,

            height   : 300,

            layout   : 'border',

            renderTo : 'panel',

            items    : [

                gridPertama,

                gridKedua

            ],

            bbar    : [

                '->', // Fill

                {

                    text    : 'Reset Kedua Grid',

                    handler : function() {

                        //refresh source grid

                        isiGridPertama.loadData(dataKu);

                         
                        //purge destination grid

                        isiGridKedua.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 gridPertamaDropTargetEl =  gridPertama.getView().el.dom.childNodes[0].childNodes[1];

        var gridPertamaDropTarget = new Ext.dd.DropTarget(gridPertamaDropTargetEl, {

            ddGroup    : 'gridPertamaDDGroup',

            copy       : true,

            notifyDrop : function(ddSource, e, data){

                 
                // Generic function to add records.

                function addRow(record, index, allItems) {

                     
                    // Search for duplicates

                    var foundItem = isiGridPertama.find('name', record.data.name);

                    // if not found

                    if (foundItem  == -1) {

                        isiGridPertama.add(record);

                         
                        // Call a sort dynamically

                        isiGridPertama.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 gridKeduaDropTargetEl = gridKedua.getView().el.dom.childNodes[0].childNodes[1]

         
        var destGridDropTarget = new Ext.dd.DropTarget(gridKeduaDropTargetEl, {

            ddGroup    : 'gridKeduaDDGroup',

            copy       : false,

            notifyDrop : function(ddSource, e, data){

                 
                // Generic function to add records.

                function addRow(record, index, allItems) {

                     
                    // Search for duplicates

                    var foundItem = isiGridKedua.find('name', record.data.name);

                    // if not found

                    if (foundItem  == -1) {

                        isiGridKedua.add(record);

                        // Call a sort dynamically

                        isiGridKedua.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);

            }

        }); 

    });

    Eksekusi / buka file drag_grid.html di dalam browser, jika benar maka akan ditampilkan berikut ini :

    Coba drag and drop data yang ada di Grid Pertama ke Grid Kedua atau sebaliknya. Berhasil bukan?

    Selamat Mencoba ....

  • 相关阅读:
    2.WindowsServer2012R2装完的一些友好化设置
    架构畅想:如果以你所会去进行架构,会到哪一步?
    如何导出已有的谷歌插件,又如何把导出的插件安装到360浏览器中,又如何对插件小修小改?
    SQL:指定名称查不到数据的衍伸~空格 换行符 回车符的批量处理
    SVN:服务器资源删掉,本地添加时和删掉的名字同名出现One or more files are in a conflicted state.
    我为NET狂-----大前端专帖
    逆天通用水印扩展篇~新增剪贴板系列的功能和手动配置,卸除原基础不常用的功能
    万恶的剪贴板==》为存储而生
    转帖:DotNet 资源大全中文版
    在不动用sp_configure的情况下,如何 =》去掉列的自增长,并保留原数据
  • 原文地址:https://www.cnblogs.com/hannover/p/1847017.html
Copyright © 2011-2022 走看看