Results 1 to 2 of 2

Thread: Prevent move columns from normal grid into locked grid

  1. #1

    Default Prevent move columns from normal grid into locked grid

    Hi,

    I have a simple checkbox grid panel where the first column is locked while all others are not.
    i want to allow the user to reorder columns in the normal grid but prevent from moving column into the locked grid area.

    this is the code i have so far:
    Code:
     var sm = Ext.create('Ext.selection.CheckboxModel', {
                mode: 'SIMPLE',
                checkOnly: true
            });
    
    
            var columnTooltip = Ext.create('Ext.grid.feature.ColumnToolTip', {});
    
    
            _grid = Ext.create('Ext.grid.Panel', {
     id: 'gridID',
                columns: [
              {            xtype: 'actioncolumn',
                header: 'Fixings',
                height: 20,
                width: 50,
                draggable: false,
                hideable: false,
                sortable: false,
                resizable: false,
                menuDisabled: true,
                locked: true,
                items: [{
                    icon: '../Images/Common/ico_details_up.gif',  // Use a URL in the icon config
                    tooltip: 'Show fixing details',
                    handler: function (grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex);
                        me.showFixingDetails(rec.raw, me);
                    }
                }]},
                {
                    header: 'Trade ID',
                    dataIndex: 'TradeID',
                    renderer: myRenderer
                },
                {
                    header: 'Ticket #',
                    dataIndex: 'OptionID',
                    align: 'left',
                    renderer: myRenderer
                }],
                selModel: sm,
                store: store,
                height: me.elements.roundedCornerContainer.getHeight().el.getHeight() - 2,
                width: me.elements.roundedCornerContainer.getWidth().el.getWidth() - 2,
                frame: false,
                collapsible: false,
                features: [columnTooltip],
                viewConfig: {
                    stripeRows: true,
                    listeners: {
                        viewready: function () {
                            $(Ext.query('TABLE', this.getEl().dom)).addClass('Main_Report');
                        },
                        itemdblclick: function (view, record) {
                            me.setPopUpWindowDetails(record.raw);
                        }
                    }
                },
                renderTo: 'reportGridContainer'
            });

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Answers
    7

    Default

    Hi meir-rivkin,

    here is the fix


    Keep maximum of 3 columns in locked grid and don't allow after that.

    we need to override header DropZone as per requrement

    Code:
    
     Ext.define('Override.grid.header.DropZone', {            override: 'Ext.grid.header.DropZone',
    
    
                onNodeOver: function (node, dragZone, e, data) {
                    var me = this,
                        from = data.header,
                        doPosition,
                        to,
                        fromPanel,
                        toPanel;
    
    
                    if (data.header.el.dom === node) {
                        doPosition = false;
                    } else {
                        data.isLock = data.isUnlock = false;
                        to = me.getLocation(e, node).header;
    
    
                        //Surender: WE NEED TO return invalid class according to match
                        if (to.up('tablepanel').query('gridcolumn').length == 3 && to.ownerCt.itemId == "lockedHeaderCt" && from.ownerCt.itemId == "normalHeaderCt") {
                            return this.dropNotAllowed;
                        }
    
    
                        // Dragging within the same container - always valid
                        doPosition = (from.ownerCt === to.ownerCt);
    
    
                        // If from different containers, and they are not sealed, then continue checking
                        if (!doPosition && (!from.ownerCt.sealed && !to.ownerCt.sealed)) {
    
    
                            doPosition = true;
                            fromPanel = from.up('tablepanel');
                            toPanel = to.up('tablepanel');
    
    
                            // If it's a lock operation, check that it's allowable.
                            data.isLock = toPanel.isLocked && !fromPanel.isLocked;
                            data.isUnlock = !toPanel.isLocked && fromPanel.isLocked;
                            if ((data.isUnlock && from.lockable === false) || (data.isLock && !from.isLockable())) {
                                doPosition = false;
                            }
                        }
                    }
    
    
                    if (doPosition) {
                        me.positionIndicator(data, node, e);
                    } else {
                        me.valid = false;
                    }
                    return me.valid ? me.dropAllowed : me.dropNotAllowed;
                }
            })


    here is the simple fiddle where you can test this

    https://fiddle.sencha.com/#view/editor&fiddle/2jri






Similar Threads

  1. Locked grid hides normal grid header
    By mankz in forum Ext 6.2 Early Access
    Replies: 0
    Last Post: 7 Sep 2016, 3:04 AM
  2. Replies: 2
    Last Post: 26 Nov 2014, 9:53 AM
  3. Replies: 2
    Last Post: 25 Mar 2013, 6:41 AM
  4. Replies: 1
    Last Post: 27 Jul 2012, 1:39 PM
  5. Replies: 1
    Last Post: 31 May 2011, 7:34 AM

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
  •