Results 1 to 2 of 2

Thread: Rowexpander Toggle in Specific Cell in Row

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2014
    Posts
    25
    Answers
    4

    Default Answered: Rowexpander Toggle in Specific Cell in Row

    I am having problems getting the rowexpander plugin to work properly. Currently it just shows the expanded text but there is no way to collapse the extra text. I am not sure if I am just missing some obvious step that most people know already.

    Once I got the plugin working I then wanted to get rid of the extra column it brings in and move that toggle ability to another existing column. For our application we have a column for notes which can be long. So in my notes column I want to be able to click in there and expand to show the note for that row.

    All of my code pertaining to the plugin:

    Code:
    requires:['Ext.ux.RowExpander'],
    Code:
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl : [
            '<p>Fake Note</p>'
        ]
    }],
    Extra Info if helpful:
    I am using templatecolumn for the grid,
    also applying css to the grid cells and the grid headers


    Thank you for the help in advance


    Update:
    I tried using a grid and data from an example and I tried getting rid of all our CSS. But it still acts the same. All the rows start off expanded and there is now way to collapse them. No + or - button in the column either. Just a blank column.

    Update:
    Basically what I want is the rowbody feature but a specific row's extra info to be toggleable (hide/show) from a grid click event. I have tried doing this with the rowbody feature but have been unsuccessful so far. If anyone knows how to hide/show certain rows in the rowbody feature that would probably do the job I am looking for.
    Last edited by Soringpenguin; 6 Oct 2014 at 10:15 AM. Reason: Update

  2. Well I eventually figured out a solution. So I went ahead and just used the rowbody feature. I toggled the extra row by getting the dom element for that extra row and adding to the cls 'display:none' property to hide the <tr> element. Then removed it when i wanted to show it.

    I used the tr argument you get back from a cellclick event. Then used Ext.get(tr.id) to retrieve the element. Then I used element.next() to get the extra row. Now you can add and remove cls.

    There is one weird thing I found. The first time I call Ext.fly(tr.id) I don't get anything good returned. But the second time it works great. I'm not sure if its a timing thing. But if anyone knows why I don't get the element on the first time. I would be interested to know why. Thank you.

  3. #2
    Sencha Premium Member
    Join Date
    Aug 2014
    Posts
    25
    Answers
    4

    Default

    Well I eventually figured out a solution. So I went ahead and just used the rowbody feature. I toggled the extra row by getting the dom element for that extra row and adding to the cls 'display:none' property to hide the <tr> element. Then removed it when i wanted to show it.

    I used the tr argument you get back from a cellclick event. Then used Ext.get(tr.id) to retrieve the element. Then I used element.next() to get the extra row. Now you can add and remove cls.

    There is one weird thing I found. The first time I call Ext.fly(tr.id) I don't get anything good returned. But the second time it works great. I'm not sure if its a timing thing. But if anyone knows why I don't get the element on the first time. I would be interested to know why. Thank you.

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
  •