Results 1 to 4 of 4

Thread: grid panel Drag and drop error

  1. #1

    Default grid panel Drag and drop error

    Hi,
    I'm using this Example of drag and drop
    http://ext4all.com/post/extjs-4-grid-drag-and-drop-rows-reordering

    but when i start to drag, i get this error :
    Uncaught TypeError: undefined is not a functionext-debug.js:12010

    here is my code:

    PHP Code:
    Ext.require([
        
    'Ext.grid.*',
        
    'Ext.data.*',
        
    'Ext.dd.*'
    ]);


    Ext.application({
        
    name'Admin',
        
    appFolder'app',


        
    launch: function() {


            
    Ext.create('Ext.data.Store', {
                
    storeId:'simpsonsStore',
                
    fields:['name'],
                
    data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
                
    proxy: {
                    
    type'memory',
                    
    reader'array'
                
    }
            });


            
    Ext.create('Ext.grid.Panel', {
                
    store'simpsonsStore',
                
    columns: [
                    {
    header'Name',  dataIndex'name'flextrue}
                ],
                
    viewConfig: {
                    
    plugins: {
                        
    ptype'gridviewdragdrop',
                        
    dragText'Drag and drop to reorganize'
                    
    }
                },
                
    height200,
                
    width400,
                
    renderToExt.getBody()
            });
        }
    }); 
    thank you !

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    What Ext JS 4.x.x version are you using? I just tried your code with 4.2.0 and I do not get any errors.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User mmcarlosalberto's Avatar
    Join Date
    Jun 2011
    Location
    Venezuela
    Posts
    2

    Default Issue 4.2.1

    I'm having Uncaught TypeError: Cannot read property 'init' of null on PluginManager in ExtJS 4.2.1

    Code:
    Ext.define('Marketing.view.process.DeliveryGrid',{
        
        extend : 'Ext.grid.Panel',
        alias : 'widget.deliverygrid',
        loadMask: true,
        viewConfig : {
                plugins: [{
                    ptype: 'gridviewdragdrop',
                    dragText: 'Reorganizar despacho'
                }],
                listeners:{
                    drop:function(){
                        var map = Ext.getCmp('executionmap');        
                        var records = this.getStore().data.items;
    
    
                        var grid = Ext.ComponentQuery.query('deliverygrid')[0];
                        grid.getView().refresh(false);
                        grid.columns[0].doSort();
                        
                        var tripId = grid.up('window').tripId;
                        
                        var clients = [];
                        
                        map.clearDeliveryClient();
                        
                        Ext.Array.each(records, function(record, index, recordsItSelf) {
                            console.info(record.data.codClie);
                            var orden = index+1;
                            Ext.Ajax.request({
                                url:'/marketing/visit/orden.do',
                                params:{
                                    codClie : record.data.codClie,
                                    tripId : tripId,
                                    orden : orden
                                }
                            });
                            var latitude = record.get('latitude');
                            var longitude = record.get('longitude');
                            var icon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+orden+'|FF776B|000000';
                            
                            viewHistorial = function(codClie) {
                                var win = Ext.create('Marketing.view.process.CustomerHistoryWindow');
                                win.show();
                                Ext.getStore('HistoricalSales').load({
                                    params : {
                                        codClie : codClie
                                    }
                                });
                            
                                Ext.getStore('SoldProducts').load({
                                    params : {
                                        codClie : codClie
                                    }           
                                });                         
                            };
                           
                            
                            var contentTplClient = new Ext.XTemplate(
                                    '<div class=\"infowindow-image\">'+
                                    '<table class="table">'+
                                    '<tr>'+
                                    '<td>Raz&oacute;n Comercial: <b><i>{nombreCliente}</i></b></td>'+
                                    '<td>&nbspRIF: <b><i>{codClie}</i></b></td>'+
                                    '</tr>'+
                                    '<tr>'+
                                    '<td> Peso:<b><i>{peso}KG</i></b></td>'+
                                    '</tr>'+
                                    '<a href="#" onclick="{viewHistorial(&quot;{codClie}&quot;)}">Ver Historial</a>'+ 
                                    '<table>'
                            );
                                                
                            if(latitude!=0){
                                
                                clients.push({
                                    lat: latitude,
                                    lng: longitude,
                                    marker: {
                                        icon: icon,
                                        map: map.gmap,
                                        animation: google.maps.Animation.DROP,
                                        title : 'Click para ver mas detalles',
                                        infoWindow: {
                                            content: contentTplClient.apply(Ext.apply({br:'</br>'},record.data))
                                        }
                                     }
                                });
                                
                            }
                        });
                        map.addDeliveryClientMarkers(clients);
                    }
                }
         },
    
    
         features: [{
            ftype: 'summary'
         }],
        
         organizeDeliveries : function(){            
            var map = Ext.getCmp('executionmap');        
            var records = this.getStore().data.items;
            var date = Ext.getCmp('delivery-date').getValue();
            
            var clients = [];
            
            map.clearDeliveryClient();
            
            var grid = Ext.ComponentQuery.query('deliverygrid')[0];
            grid.getView().refresh(false);
            grid.columns[0].doSort();
            
            Ext.Array.each(records, function(record, index, recordsItSelf) {
                console.info(record.data.codClie);
                var orden = index+1;
                Ext.Ajax.request({
                    url:'/marketing/delivery/orden.do',
                    params:{
                        codClie : record.data.codClie,
                        date : date,
                        orden : orden
                    }
                });
                var latitude = record.get('latitude');
                var longitude = record.get('longitude');
                var icon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+orden+'|FF776B|000000';
                
                viewHistorial = function(codClie) {
                    var win = Ext.create('Marketing.view.process.CustomerHistoryWindow');
                    win.show();
                    Ext.getStore('HistoricalSales').load({
                        params : {
                            codClie : codClie
                        }
                    });
                
                    Ext.getStore('SoldProducts').load({
                        params : {
                            codClie : codClie
                        }            
                    });                            
                };
               
                
                var contentTplClient = new Ext.XTemplate(
                        '<div class=\"infowindow-image\">'+
                        '<table class="table">'+
                        '<tr>'+
                           '<td>Raz&oacute;n Comercial: <b><i>{nombreCliente}</i></b></td>'+
                           '<td>&nbspRIF: <b><i>{codClie}</i></b></td>'+
                        '</tr>'+
                        '<tr>'+
                           '<td> Peso:<b><i>{peso}KG</i></b></td>'+
                        '</tr>'+
                        '<a href="#" onclick="{viewHistorial(&quot;{codClie}&quot;)}">Ver Historial</a>'+ 
                        '<table>'
                );
                                      
                if(latitude!=0){
                    
                    clients.push({
                        lat: latitude,
                        lng: longitude,
                        marker: {
                                icon: icon,
                            map: map.gmap,
                            animation: google.maps.Animation.DROP,
                            title : 'Click para ver mas detalles',
                            infoWindow: {
                                content: contentTplClient.apply(Ext.apply({br:'</br>'},record.data))
                            }
                         }
                    });
                    
                }
            });
            map.addDeliveryClientMarkers(clients);
        },
        
        initComponent : function(){
    
    
            this.store = 'TripDeliveries';
            
            this.columns = [{xtype: 'rownumberer'},{
                width : 30,
                dataIndex : 'latitude',
                renderer : function(value){
                    if(value!=0){
                        return '<img src="resources/images/icons/transmit.png">';
                    }else{
                        return '';
                    }
                }
            },{
                text: 'Nombre',
                flex: 3,
                dataIndex: 'nombreCliente'
            },{
                text: 'Restricciones',
                dataIndex: 'restrictions'
            },{
                text: 'Peso',
                dataIndex: 'peso',
                renderer: Ext.util.Format.numberRenderer('0.00'),
                width: 100,
                summaryType : 'sum'
            },{
                xtype: 'actioncolumn',
                width:30,
                sortable: false,
                items: [{
                    icon: 'resources/images/information.png',
                    tooltip: 'Ver detalles de factura'             
                }]
               }];
            
            this.tbar = [{
                text : 'Cerrar Planificaci&oacute;n',
                iconCls : 'accept',
                id : 'delivery-save'
            },{
                text : 'Generar Planificaci&oacute;n de Despacho',
                iconCls : 'pdf-report',
                id : 'delivery-dispatchOrder'
            },{
                text : 'Generar Orden de Carga',
                iconCls : 'pdf-report',
                id : 'delivery-loadOrder'
            }];
                    
            this.callParent(arguments);
    
    
        }
    
    
    });
    if i comment this code

    Code:
    viewConfig : {            plugins: [{
                    ptype: 'gridviewdragdrop',
                    dragText: 'Reorganizar despacho'
    }]


    work without dragndrop.

  4. #4

    Default Add Plugin to your Requires list

    I got this same problem until I added 'Ext.grid.plugin.DragDrop' to my Application's requires array.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •