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 ....

  • 相关阅读:
    用fnmatch函数进行字符通配
    activity和service之间的相互通信方法
    IGMP协议简介
    Android2.2快速入门
    Android开发之旅:HelloWorld项目的目录结构
    Android的五大基本组件
    Android Service 组件
    TCP交互数据流 成块数据流
    为什么要进行IP选路?
    embOS实时操作系统 任务通讯
  • 原文地址:https://www.cnblogs.com/hannover/p/1847017.html
Copyright © 2011-2022 走看看