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 SurenderBhyan1's Avatar
    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





    ---A ship in the harbor is safe, but that is not what the ships are made for...

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
  •