[CLOSED] Expanding Content options

  1. #1

    [CLOSED] Expanding Content options

    Click image for larger version. 

Name:	ss.png 
Views:	79 
Size:	19.8 KB 
ID:	3151

    In the ExtJS API documentation provided by Sencha, they have a very attractive expanding row widget used to display methods, events, etc. The row or panel is rendered at a specific height, and can be expanded to show all contents by clicking the sidebar containing the arrow icon.

    I have had experience using the GridView's RowExpander plugin, but the result is less polished than what Sencha is doing here. I'm not clear on exactly how they are blending ext, javascript, and css to achieve this effect, but wondered if anyone could give me some idea of how to approach recreating this functionality in my own application. Is this a listview with template? A custom class I might be able to "borrow" and reuse? Or something else entirely?

    Thanks!
    Last edited by Daniil; Sep 14, 2011 at 7:18 PM. Reason: [CLOSED]
  2. #2
    What difference with ExtJS API widget and RowExpander?
  3. #3
    The row expander appends a tree-style plus "+" icon. It looks straight out of 1995, instead of the modern elegant style of the API widget. Perhaps it's a styling issue only? If I can apply a style to the rowexpander widget to make it look like that, then that is all I need.
  4. #4
    Add the following rules to the page
    <style type="text/css">
            .x-grid3-row-collapsed .x-grid3-row-expander{
                background: transparent url(http://dev.sencha.com/deploy/ext-3.4.0/docs/resources/member-collapsed.gif) no-repeat;  
            }
            
            .x-grid3-row-expanded .x-grid3-row-expander{
                background: transparent url(http://dev.sencha.com/deploy/ext-3.4.0/docs/resources/member-expanded.gif) no-repeat 4px 2px;
                background-position: 4px 2px !important;
            }
            
        </style>
  5. #5
    Thank you - I will be trying this out sometime tomorrow.

Similar Threads

  1. [CLOSED] Expanding Tree Nodes in Behind Code
    By taylorjp2000 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 11, 2012, 6:00 PM
  2. [CLOSED] Preventing grid rows from expanding
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 26, 2012, 1:36 PM
  3. [CLOSED] Expanding FormPanel
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Sep 22, 2011, 4:15 PM
  4. [CLOSED] Expanding / Collapsing all groups of a gridpanel
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 17, 2010, 7:43 PM
  5. [CLOSED] Wrong Portlet's content after expanding
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 21, 2009, 12:18 PM

Posting Permissions