Results 1 to 6 of 6

Thread: Quick Question about Executive Dashboard

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default Quick Question about Executive Dashboard

    Hi all,

    I have been away from Ext for a while, since 4.2 I think. I changed positions and stopped doing a lot of development. I am looking to build a dashboard and wanted to demo one in Ext. I downloaded Ext 6 and love the executive dashboard. Most of it came back pretty quickly, but the one thing I have gotten stumped on is setting the values at the top.

    I see it is defined as a component, which I know I can set the data property. My information is coming from a store so I tried to make it a dataview which did not work. I am looking for suggestions or best practices to set the data.

    Do I just write the code in the store success function to load the data?

    It is great to be playing with Ext again.

    Thanks everyone

    Mike

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    A dataview would be appropriate:

    Code:
    xtype: 'dataview',
    cls: 'kpi-tiles',
    height: 100,
    
    itemSelector: '.item',
    tpl: [
        '<div class="kpi-meta">',
            '<tpl for=".">',
                '<span class="item">',
                    '<div>{statistic}</div> {description}',
                '</span>',
            '</tpl>',
        '</div>'
    ],
    
    store: {
        fields: ['statistic', 'description'],
        data: [{
            description: 'Campaigns',
            statistic: 10
        },{
            description: 'Opportunities',
            statistic: '20,560'
        },{
            description: 'Closed Won',
            statistic: '10,000'
        },{
            description: 'Total Sales',
            statistic: '$90,200'
        },{
            description: 'Goals Met',
            statistic: '71%'
        }]
    }

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default Quick Question About Executive Dashboard

    I think what I have is like what you provided. But I get nothing in that area, it is just blank. Here is the code I have been testing with:

    Code:
    {
            //xtype: 'component',
            xtype: 'dataview',
            cls: 'kpi-tiles',
            height: 100,
    
    
            tpl: [
                '<div class="kpi-meta">',
                    '<tpl for=".">',
                        '<span>',
                            '<div>{statistic}</div> {description}',
                        '</span>',
                    '</tpl>',
                '</div>'
            ],
            itemSelector: '.item',
            store: [{
                data: [{
                    description: 'Devices',
                    statistic: '89,720'
                },{
                    description: 'Desktops',
                    statistic: '80,560'
                },{
                    description: 'Servers',
                    statistic: '9,160'
                },{
                    description: 'Non Complaint',
                    statistic: '9,200'
                },{
                    description: 'Compliant',
                    statistic: '71%'
                }],
                fields: ['description', 'statistic']
            }]
    
    
        }
    Do you see what I am doing wrong?

  4. #4
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    Code:
    store: [{

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Location
    Frederick, MD
    Posts
    108

    Default

    Sorry, I don't follow what you saying.

  6. #6
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    In the code I posted, store is an object literal. In the code you posted, it's an array of objects.

    The definition should be:

    Code:
    store: {
        fields: [] // ....
    }
    Not:
    Code:
    store: [{
        fields: [] // ... 
    }]

Similar Threads

  1. Running executive dashboard example
    By samir_ware in forum Ext 5: Q&A
    Replies: 2
    Last Post: 11 Jan 2018, 8:02 AM
  2. Executive Dashboard source code?
    By ZyBeR in forum Ext: Q&A
    Replies: 4
    Last Post: 23 Apr 2017, 7:46 AM
  3. Executive Dashboard
    By txtran in forum Sencha GXT Q&A
    Replies: 9
    Last Post: 17 Dec 2015, 9:57 AM
  4. Executive Dashboard example and lazy loading
    By Misiu in forum Ext 5: Q&A
    Replies: 4
    Last Post: 15 Dec 2014, 8:39 AM
  5. [CLOSED] Executive Dashboard not working in Android
    By Evolic in forum Ext 5: Bugs
    Replies: 3
    Last Post: 11 Aug 2014, 10:26 PM

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
  •