Results 1 to 9 of 9

Thread: Populating list from Localstorage

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default Populating list from Localstorage

    Hi,
    What is the best way to populate a list component from a localstorage?

    I can query the local storage and get an array of text items.
    How can I use this array to generate list?

    Most of the list examples I see are using Store.

    Can anyone show me an array example?

    Thanks a lot.

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Well, you already know how to create a list, so I'm guessing it's more how do I make a store out of an array?

    Code:
    var items = ['a', 'b', 'c'],
         data = [];
    
    Ext.each(items, function(item){
        data.push({
            name: item
        });
    });
    Your data is now in the same format as the list example.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default

    Thanks for your help.

    but I get some error:
    "Unexpected token ." on line "Ext.each(items, function(item){"

    Here is my code:

    Code:
    function loadLibrary(btn){
    	
    	Ext.regModel('FList', {
            fields: ['id', 'name']
        });
    	var groupingBaseList = {
                tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {name}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                grouped: true,
                indexBar: true,
    			store: new Ext.data.Store({
                    model: 'FList',
                    sorters: 'id',
                    
                    getGroupString : function(record) {
                        return record.get('name')[0];
                    },
                    
                    data: []
    				})
            };
    		
    		
    		var items = [['1', 'First'], ['2', 'Second'], ['3', 'Third']],
    		Ext.each(items, function(item){
    			data.push({
    				id: item[0]
    			});
    			data.push({
    				name: item[1]
    			});
    		});
    		
    		
    		 new Ext.List(Ext.apply(groupingBaseList, {
    	                floating: true,
    	                width: 350,
    	                height: 370,
    	                centered: true,
    	                modal: true,
    	                hideOnMaskTap: false
    	            })).show();
    			
    }

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default

    Sorry there was a syntax error:

    Code:
    function loadLibrary(btn){
    	
    	Ext.regModel('FontsList', {
            fields: ['id', 'fontname']
        });
    	var groupingBaseList = {
                tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                grouped: true,
                indexBar: true,
    			store: new Ext.data.Store({
                    model: 'FontsList',
                    sorters: 'id',
                    
                    getGroupString : function(record) {
                        return record.get('fontname')[0];
                    },
                    
                    data: []
    				
    				})
            };
    		
    		
    		var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']];
    		Ext.each(items, function(item){
    			data.push({
    				id: item[0]
    			});
    			data.push({
    				fontname: item[1]
    			});
    		});
    		
    		
    		 new Ext.List(Ext.apply(groupingBaseList, {
                    floating: true,
                    width: 350,
                    height: 370,
                    centered: true,
                    modal: true,
                    hideOnMaskTap: false
                })).show();
    			
    }
    Still something wrong i guess.

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    a) You're referencing a variable data that is never defined.
    b) You create the store before the data.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default

    ok, realised something i was doing wrong.

    HEre is my updated code.

    Now I get a bit further, but the rows are still appearing empty.

    Code:
    function showFontListPopup(){
    	
    			myBlackButton1.on('click', function() 
    								{
    									alert('You clicked me');
    								}
    			);
    	}
    	
    function loadLibrary(btn){
    	Ext.regModel('FontsList', {
            fields: ['id', 'fontname']
        });
    	var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
    	Ext.each(items, function(item){
    		data.push({
    			id: item[0], fontname: item[1]
    		});
    	});
    	
    	var groupingBaseList = {
             tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
             itemSelector: 'div.contact',
                
             singleSelect: true,
             // grouped: true,
             //indexBar: true,
    		data: items
        };
    	new Ext.List(Ext.apply(groupingBaseList, {
    		floating: true,
    		width: 350,
    		height: 370,
    		centered: true,
    		modal: true,
    		hideOnMaskTap: false
    	})).show();
    }

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default

    I posted a reply, not sure where it went. so posting again:

    Code:
    function showFontListPopup(){
    	
    			myBlackButton1.on('click', function() 
    								{
    									alert('You clicked me');
    								}
    			);
    	}
    	
    function loadLibrary(btn){
    	Ext.regModel('FontsList', {
            fields: ['id', 'fontname']
        });
    	var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
    	Ext.each(items, function(item){
    		data.push({
    			id: item[0], fontname: item[1]
    		});
    	});
    	
    	var groupingBaseList = {
             tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
             itemSelector: 'div.contact',
                
             singleSelect: true,
             // grouped: true,
             //indexBar: true,
    		data: items
        };
    	new Ext.List(Ext.apply(groupingBaseList, {
    		floating: true,
    		width: 350,
    		height: 370,
    		centered: true,
    		modal: true,
    		hideOnMaskTap: false
    	})).show();
    }

  8. #8
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default

    if my post goes for moderation, how long should I wait before trying again?

    This is what I was replying:

    I realised some mistakes and modified the code a bit:

    Code:
    function loadLibrary(btn){
    	Ext.regModel('FontsList', {
            fields: ['id', 'fontname']
        });
    	var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
    	Ext.each(items, function(item){
    		data.push({
    			id: item[0], fontname: item[1]
    		});
    	});
    	
    	var groupingBaseList = {
             tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
             itemSelector: 'div.contact',
                
             singleSelect: true,
             // grouped: true,
             //indexBar: true,
    		data: items
        };
    	new Ext.List(Ext.apply(groupingBaseList, {
    		floating: true,
    		width: 350,
    		height: 370,
    		centered: true,
    		modal: true,
    		hideOnMaskTap: false
    	})).show();
    }
    Now I get the correct number of rows in the list but they are empty.

  9. #9
    Sencha User
    Join Date
    Jun 2010
    Posts
    132

    Default

    got it finally

    Code:
    function loadLibrary(btn){
    	Ext.regModel('FontsList', {
            fields: ['id', 'fontname']
        });
    	var items = [['1', 'First Font'], ['2', 'Second Font'], ['3', 'Third Font']], data = [];
    	Ext.each(items, function(item){
    		data.push({
    			id: item[0], fontname: item[1]
    		});
    	});
    	
    	var groupingBaseList = {
             tpl: '<tpl for="."><div class="contact"><strong>{id}</strong> {fontname}</div></tpl>',
             itemSelector: 'div.contact',
                
             singleSelect: true,
    		 store: new Ext.data.Store({
                    model: 'FontsList',
    		
    				data: data
    								   })
    		 
             // grouped: true,
             //indexBar: true,
    		//data: items
        };
    	new Ext.List(Ext.apply(groupingBaseList, {
    		floating: true,
    		width: 350,
    		height: 370,
    		centered: true,
    		modal: true,
    		hideOnMaskTap: false
    	})).show();
    }

Similar Threads

  1. Localstorage or SqLite
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 28 Oct 2010, 1:19 AM
  2. How to update localstorage?
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 29 Jul 2010, 6:35 PM
  3. Localstorage question
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 28 Jul 2010, 9:16 PM
  4. Sencha touch localstorage
    By ssdesign in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 7 Jul 2010, 9:30 AM
  5. Populating a tree from a list of paths?
    By mscdex in forum Ext 1.x: Help & Discussion
    Replies: 8
    Last Post: 7 Sep 2007, 4:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •