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

    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,602
    Vote Rating
    1141
    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 Software Engineer
    ________________
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,602
    Vote Rating
    1141
    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 Software Engineer
    ________________
    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