1. #1
    Sencha User 2b3pro's Avatar
    Join Date
    Jan 2011
    Location
    Tokyo
    Posts
    21
    Answers
    3
    Vote Rating
    0
    2b3pro is on a distinguished road

      0  

    Default Answered: Can't get LIST to display inline data from STORE

    Answered: Can't get LIST to display inline data from STORE


    WORKS: When I do this, the LIST is populated and is displayed:

    app.js
    Code:
        models: ["Link"],
        stores: ['Links'],
    views/Links.js
    Code:
    Ext.define('Main.view.Links', {
        extend : 'Ext.dataview.List',
        xtype : 'linkscard',
        fullscreen : true,
        config : {
            title : 'Go to…',
            iconCls : 'action',
            styleHtmlContent : true,
            itemTpl : ['<h1>{title}</h1> - {description}'],
            data: [
                {id: 0, url: '', title: 'CNN', description: 'News from around the world' },
                {id: 1, url: '', title: 'Yahoo', description: 'Search engine' },
                {id: 2, url: '', title: 'MSA', despcription: 'Mustard Seed Academy' },
                {id: 3, url: '', title: 'Google', description: 'Another big search engine' }
             ],
            items : [{
                docked : 'top',
                xtype : 'titlebar',
                title : 'Go To…',
                items : [{
                    iconCls : 'refresh',
                    iconMask : true,
                    align : 'left'
                }]
            }]
        }
    });


    NOT WORKING: However, when I do the following, it doesn't populate. The only thing displayed is one empty template item.

    views/Links.js
    Code:
    Ext.define('Main.view.Links', {
        extend : 'Ext.dataview.List',
        xtype : 'linkscard',
        fullscreen : true,
        config : {
            title : 'Go to…',
            iconCls : 'action',
            styleHtmlContent : true,
            storeId: 'LinkStore',
            store: ['Main.store.Links'],
            itemTpl : ['<h1>{title}</h1> - {description}'],
            items : [{
                docked : 'top',
                xtype : 'titlebar',
                title : 'Go To…',
                items : [{
                    iconCls : 'refresh',
                    iconMask : true,
                    align : 'left'
                }]
            }]
        }
    });
    store/Links.js
    Code:
    Ext.define('Main.store.Links', {
        extend: 'Ext.data.Store',
        alias: 'store.Links',
        config: {
            model: 'Main.model.Link',
            storeId: 'LinkStore',
            data: [
                {id: 0, url: '', title: 'CNN', description: 'News from around the world' },
                {id: 1, url: '', title: 'Yahoo', description: 'Search engine' },
                {id: 2, url: '', title: 'MSA', despcription: 'Mustard Seed Academy' },
                {id: 3, url: '', title: 'Google', description: 'Another big search engine' }
             ]
        }
    });
    model/Link.js
    Code:
    Ext.define('Main.model.Link', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'id',             type: 'int'},
                {name: 'url',         type: 'string'},
                {name: 'title',         type: 'string'},
                {name: 'description',     type: 'string'}
            ]
        }
    });
    Can someone tell me what I'm doing wrong?
    Also, what is the need for "alias"? If I don't include it, then even the empty template item is not displayed.
    Ultimately, what I want to do is to get in-line data working before I move to grabbing external JSON data.
    Thank you ahead!

  2. Your Main.view.Links view should be referring to your store like below.

    Code:
    Ext.define('Main.view.Links', {
        extend : 'Ext.dataview.List',
        xtype : 'linkscard',
        fullscreen : true,
        config : {
            title : 'Go to…',
            iconCls : 'action',
            styleHtmlContent : true,
            store: 'LinkStore',
            itemTpl : ['<h1>{title}</h1> - {description}'],
            items : [{
                docked : 'top',
                xtype : 'titlebar',
                title : 'Go To…',
                items : [{
                    iconCls : 'refresh',
                    iconMask : true,
                    align : 'left'
                }]
            }]
        }
    });

  3. #2
    Sencha Premium Member
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    34
    Answers
    10
    Vote Rating
    8
    Johnny Major will become famous soon enough

      0  

    Default


    Your Main.view.Links view should be referring to your store like below.

    Code:
    Ext.define('Main.view.Links', {
        extend : 'Ext.dataview.List',
        xtype : 'linkscard',
        fullscreen : true,
        config : {
            title : 'Go to…',
            iconCls : 'action',
            styleHtmlContent : true,
            store: 'LinkStore',
            itemTpl : ['<h1>{title}</h1> - {description}'],
            items : [{
                docked : 'top',
                xtype : 'titlebar',
                title : 'Go To…',
                items : [{
                    iconCls : 'refresh',
                    iconMask : true,
                    align : 'left'
                }]
            }]
        }
    });

  4. #3
    Sencha User 2b3pro's Avatar
    Join Date
    Jan 2011
    Location
    Tokyo
    Posts
    21
    Answers
    3
    Vote Rating
    0
    2b3pro is on a distinguished road

      0  

    Default Thank you!!

    Thank you!!


    Thank you, Johnny Major! You're awesome.

    For future reference, what is the difference between "store" vs. "storeId" vs. "using the defined "Main.view.Links"?

  5. #4
    Sencha Premium Member
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    34
    Answers
    10
    Vote Rating
    8
    Johnny Major will become famous soon enough

      0  

    Default


    No problem.

    storeId is not a valid config on a Ext.dataview.List. The storeId config is valid on your Ext.data.Store. When referencing your store in a List use the store config. Hope that helps.

  6. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    cgijoe is on a distinguished road

      0  

    Default Same Issue but don't see a difference.

    Same Issue but don't see a difference.


    I have a store and a List View and I created a select. The Select works fine but with the same definition the List does not populate.

    Code for Select:
    {
    xtype: 'selectfield',
    label: 'Field',
    displayField: 'empName',
    store: 'empSkillResultStore',
    valueField: 'empId'
    },

    Code for List
    {
    xtype: 'list',
    itemTpl: [
    '<div>List Item {empName}</div>'
    ],
    store: 'empSkillResultStore'
    }

    Code for Store

    Ext.define('skillsTracker.store.empSkillResultStore', {
    extend: 'Ext.data.Store',


    requires: [
    'skillsTracker.model.empSkillResult',
    'Ext.data.proxy.JsonP',
    'Ext.data.reader.Json'
    ],


    config: {
    autoSync: true,
    model: 'skillsTracker.model.empSkillResult',
    params: {
    qry: 'this'
    },
    storeId: 'empSkillResultStore',
    proxy: {
    type: 'jsonp',
    url: 'http://localhost/sencha/arch/services/genericJSONInbound.php',
    reader: {
    type: 'json',
    rootProperty: 'resultSet'
    }
    }
    }
    });

Thread Participants: 2

Tags for this Thread