Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    92
    Vote Rating
    73
    bobmanc is just really nice bobmanc is just really nice bobmanc is just really nice bobmanc is just really nice

      1  

    Default Want to be able to drag over a grid row not before or after

    I am using two grids where one is the dragable and the other the dropable. This works fine but I was wondering if there was a way to alter the way it looks. When I drag a row over my dropable row the dropable row is highlighted but there is also a line with arrows on either side implying the user can drop the row between, after or before the selected row which I don't allow. They can only drop on top of a row.

    Any way to hide the arrows and line?

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    There isn't a specific config out of the box to do this. The case we were anticipating is that people were dragging records between two places and order mattered (not the case where users were associating a particular record with another record). This would be a good feature request for Ext JS.

    Take a look at src/grid/ViewDropZone.js

    You can do this by overriding the CSS rules .x-grid-drop-indicator-left and .x-grid-drop-indicator-right. Or you could override the indicatorHtml. If you needed to get more specific like highlighting a particular row would probably take more work in src/view/DropZone.js
    Aaron Conran
    @aconran

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    92
    Vote Rating
    73
    bobmanc is just really nice bobmanc is just really nice bobmanc is just really nice bobmanc is just really nice

      1  

    Default

    Thanks. This did the trick where empty.png is a 1x1 transparent image.

    .x-grid-drop-indicator .x-grid-drop-indicator-left {
    background-image: url(../images/empty.png);
    }
    .x-grid-drop-indicator .x-grid-drop-indicator-right {
    background-image: url(../images/empty.png);
    }
    .x-grid-drop-indicator {
    background-color: transparent;
    }

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    92
    Vote Rating
    73
    bobmanc is just really nice bobmanc is just really nice bobmanc is just really nice bobmanc is just really nice

      0  

    Default

    It would be good to have this built in as a config. Since the drag and drop part is a plugin the only way I can style it (without globally styling them as above) is to do this

    #component-1617.x-grid-drop-indicator{
    }

    Which is not ideal.

Thread Participants: 1