1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    29
    Vote Rating
    0
    shibbywowdude is on a distinguished road

      0  

    Default Unanswered: Get selected row and change it's class

    Unanswered: Get selected row and change it's class


    I have done this in ExtJS3x before without any issue, but I can't seem to figure it out in ExtJS4.

    I simply want to get the selected row index and then change that row's text color to grey.

    I built a CSS class called 'greyOut' but can't figure out how to set it to a specific row that is currently selected.

    I believe I used to do this like this:
    Code:
    Ext.fly(contentOptionGrid.getView().getSelectedRow()).addCls('greyOut');
    Also if anyone knows how to disable that row from being draggable that would be awesome as well. I am trying to let the user know that they have already dragged that item and cannot drag it again.

    Thanks!

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I'm not convinced that's the correct approach. You could change the CSS classes but it makes things unnecessarily complicated.

    To change the text color for the selected row just do this:

    Code:
    .x-grid-row-selected {
        color: gray;
    }
    For reference, the method to get the row element from a record is getNode().

    http://docs.sencha.com/ext-js/4-0/#!...method-getNode

    For the drag/drop question I imagine you'd want to take a look at overriding onBeforeDrag():

    http://docs.sencha.com/ext-js/4-0/#!...d-onBeforeDrag

    Please post separate questions in separate threads, not only are you more likely to get an answer that way but it avoids problems when you try to mark the thread as Answered.

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Posts
    29
    Vote Rating
    0
    shibbywowdude is on a distinguished road

      0  

    Default


    Sorry for the multiple questions.

    Alright, so I understand maybe don't add another class to the mix. How do I go about updating that grid row with that CSS change?

    If I have the name of the grid and the index of the row I want to change how do I go about doing that? No matter what I do I can't get it to change the class or just css.

    Thanks

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    If I have the name of the grid and the index of the row I want to change how do I go about doing that? No matter what I do I can't get it to change the class or just css.
    I think you've misunderstood me. My point is that you shouldn't do it that way.

    By default ExtJS will add the class x-grid-row-selected to the TR element of a selected row. You then just need to specify suitable CSS to make the text gray, which is what the example I gave you does.

    If you want this change to only apply to a single grid (more than likely) then you should add a cls config to the grid and then add that CSS class to the front of the selector.

    Does that make sense?

  5. #5
    Sencha User
    Join Date
    Feb 2010
    Posts
    29
    Vote Rating
    0
    shibbywowdude is on a distinguished road

      0  

    Default


    I see what you mean now. You want me to actually go in and change the css on extjs. The only problem I see with that solution is when I deselect that row it will then be back to normal. I want it to stay gray until that item is dragged back over to the grid. At some point I will figure out how to disable drag on the grayed out items so the user knows that it has been used.

    I may still be wayyy off, haha let me know.

Thread Participants: 1