1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Calgary
    Posts
    34
    Answers
    1
    Vote Rating
    0
    drathnow is an unknown quantity at this point

      0  

    Default Unanswered: Expanding/collapsing table or panel

    Unanswered: Expanding/collapsing table or panel


    Could someone suggest how I might go about creating a page that will allow a user to expand/collapse parts of a it to reveal or hide more information. I'm looking for something like what is used on the Google's Play Store or Apple's App Store where there is a link that allows you to expand and collapse part of an app's description.

    Screenshot_2012-10-04-15-03-44.png

    and then once expanded:

    Screenshot_2012-10-04-15-04-00.png

    My page is simpler, it contains a table, generated with an XTemplate, that contains a number of rows. Only a certain number of rows need to be displayed at first but I would like to provide a "more" link to allow more information to be revealed to the user.

    Thanks,
    Dave.
    Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Location
    Calgary
    Posts
    34
    Answers
    1
    Vote Rating
    0
    drathnow is an unknown quantity at this point

      0  

    Default


    One thing I forgot to mention, I'm currently using a XTemplate inside a container to display data. Here is the code (sorry it's a bit 'verbose'):

    Code:
                    {
                        title: 'Results',
                        xtype: 'container',
                        id: 'resultsContainer',
                        scrollable: true,
                        tpl: Ext.create('Ext.XTemplate',
                                '<div id="results-tbl">',
                                '<table>',
                                '<tr><th>Flow Rate: </th><td class="value">{[this.formatNumber(values.FlowRate)]}</td><td class="unit"></td></tr>',
                                '<tr><th>Specific Gravity: </th><td class="value">{[this.formatNumber(values.SpecificGravity)]}</td><td class="unit"></td></tr>',
                                '<tpl if="CoefficientOfDischarge != -1">',
                                    '<tr><th>Coefficient Of Discharge: </th><td class="value">{[this.formatNumber(values.CoefficientOfDischarge)]}</td><td class="unit"></td></tr>',
                                '</tpl>',
                                '<tr><th>Expansion Factor: </th><td class="value">{[this.formatNumber(values.ExpansionFactor)]}</td><td class="unit"></td></tr>',
                                '<tr><th>Comp. Factor (Flow Cond.): </th><td class="value">{[this.formatNumber(values.CompressibilityFactorAtFlowingConditions)]}</td><td class="unit"></td></t>',
                                '<tr><th>Comp. Factor (Base Cond.): </th><td class="value">{[this.formatNumber(values.CompressibilityFactorAtBaseConditions)]}</td><td class="unit"></td></tr>',
                                '<tr><th>Velocity Of Approach Factor: </th><td class="value">{[this.formatNumber(values.VelocityOfApproachFactor)]}</td><td class="unit"></td></tr>',
                                '<tr><th>Super Compressibility Factor: </th><td class="value">{[this.formatNumber(values.SuperCompressibilityFactor)]}</td><td class="unit"></td></tr>',
                                '</table>',
                                '<tpl if="Status &gt; 0">',
                                    '<div id="warn">Warning: {StatusMessage}<div>',
                                '</tpl>',
                                '</div>',
                                {
                                    formatNumber: function(value, precision) {
                                        return (precision == undefined) 
                                                    ? value.format("0.0000")
                                                            : value.format(precision);
                                    },
                                })
                    }

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    38
    Answers
    1
    Vote Rating
    3
    panbayi is on a distinguished road

      0  

    Default


    Have you got the solution ? I'm looking for the answer too,so if you have the solution please tell me. Thanks !!

Thread Participants: 1