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

  • 相关阅读:
    自然二进制与格雷码的转换
    状态机小结
    FSM的几种策略
    跨越鸿沟:同步世界中的异步信号
    边沿检测技术
    门控时钟和时钟使能
    ALTERA器件中复位电路实现之-异步复位同步化
    同步复位
    Altera USB Blaster 仿真器(EPM240仿制版
    五、裸机烧写
  • 原文地址:https://www.cnblogs.com/hannover/p/1847017.html
Copyright © 2011-2022 走看看