1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    VE
    Posts
    9
    Vote Rating
    0
    lg_sp is on a distinguished road

      0  

    Default List Component does not show data from my Store! Im new at sencha touch HELP

    List Component does not show data from my Store! Im new at sencha touch HELP


    Hi, Im getting started with sencha touch 2.0 and everything was cool till I wanted to show data in a List Component. This what I got at code;

    /test/app/model/item.js
    Code:
    Ext.define('Test.model.Item', {
        extend : 'Ext.data.Model',
        config : {
            idProperty: 'id',
            fields: [
            {
                name: 'id', 
                type: 'string'
            },
            {
                name : 'icon',
                type: 'string'
            },
            {
                name: 'title', 
                type: 'string'
            },
            {
                name: 'description', 
                type: 'string'
            }
            ],
            validations: [
            {
                type: 'presence', 
                field: 'id'
            },
            {
                type: 'presence', 
                field: 'title'
            },
            {
                type: 'presence', 
                field: 'description'
            }]
        } 
    });
    /test/app/store/item.js
    Code:
    Ext.define('Test.store.Item', {
        extend : 'Ext.data.Store',
        requires : [
        'Test.model.Item',
        ],
        config : {
            autoLoad: true,
            model: 'Test.model.Item',
            sorters: [{
                property: 'id',
                direction: 'DESC'
            }],
            grouper: {
                groupFn: function(record) {
                    return record.get('id');
                }
            },
            proxy: {
                type: 'localstorage',
                id: 'items-app-localstore',
            },
            data: [{
                id: '1',   
                icon : 'item1.png',
                title: 'Item 1',
                description : 'Item 1'
            },
            {
                id: '2',   
                icon : 'item2.png',
                title: 'Item 2',
                description : 'Descripcion Item 2.'
            }]        
        },
          
          // I wanna to know if the store is loading, (seems it is)
        load : function (store, records, success, opr) {
            console.log('Store Item load handler');
            console.log("Store: "  + this);      
            console.log("Records: "  + records);      
            console.log("Success: "  + success);      
            console.log("Operation: "  + opr);      
        }
    });
    /test/app.js
    Code:
    Ext.application({
        name: 'Test',
        launch: function() {
            Ext.create('Ext.Panel', {
                fullscreen: true,
                tabBarPosition: 'top',
                id: 'mainPanel',
                items : [
                    
                    Ext.create('Ext.List', {
                        title: 'Items',
                        docked: 'top',
                        store:  Ext.create('Test.store.Item'),
                        itemTpl: '<div class="list-item-title">{id}</div>' + '<div class="list-item-narrative">{title}</div>',
                        show : function (list, opts  ) {
                            console.log('List Shown: ' + list);
                        }
                    })
                ]
        });
    }
    });
    Problem is the application seems to load well, there are not errors output at console.

    Look at the output;

    WARN][Anonymous] [Ext.Loader] Synchronously loading 'Test.store.Item'; consider adding 'Test.store.Item' explicitly as a require of the corresponding class
    Console.js:35[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.data.proxy.LocalStorage'; consider adding 'Ext.data.proxy.LocalStorage' explicitly as a require of the corresponding class
    app/store/Item.js:38Store Item load handler
    app/store/Item.js:39Store: undefined
    app/store/Item.js:40Records: undefined
    app/store/Item.js:41Success: undefined
    app/store/Item.js:42Operation: undefined
    Console.js:35[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.dataview.List'; consider adding 'Ext.List' explicitly as a require of the corresponding class
    Console.js:35[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.tab.Panel'; consider adding 'Ext.TabPanel' explicitly as a require of the corresponding class
    Console.js:35[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.form.FieldSet'; consider adding 'Ext.form.FieldSet' explicitly as a require of the corresponding class
    Console.js:35[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.field.Email'; consider adding 'Ext.field.Email' explicitly as a require of the corresponding class

    The application loads, but the list doesnt.

    I hope anybody could help me

    Regards

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Add layout : 'fit' to your Panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    VE
    Posts
    9
    Vote Rating
    0
    lg_sp is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Add layout : 'fit' to your Panel.
    Does not work

    I added the line but doesn't take effect.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Remove the docked config in the list and give the panel fit layout. Your list just needs a size, fit layout will tell it to have one.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    VE
    Posts
    9
    Vote Rating
    0
    lg_sp is on a distinguished road

      0  

    Default


    Can't believe. Amazing. It Worked. Yeah

    Im pretty greatful

    Thanks a lot.

  6. #6
    Sencha User Prakash Gavade's Avatar
    Join Date
    Aug 2012
    Location
    Pune
    Posts
    1
    Vote Rating
    0
    Prakash Gavade is on a distinguished road

      0  

    Default


    Add Layout fit