1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
    paulaceccon is on a distinguished road

      0  

    Default Unanswered: Help with List and NestedList

    Unanswered: Help with List and NestedList


    Hi. First of all, sorry for the possible dumb question and the lot of codes. I started studying Sencha two days ago but I really confused. I just would like to do a page with a nested list and a list. I have this so far:

    This is my main code:

    Code:
    Ext.define('GS.view.Main', {    extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'Ext.data.Store',
            'Ext.List',
            'Ext.NestedList'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
    
    
                    styleHtmlContent: true,
                    scrollable: true,
    
    
                    items: [
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Robotics'
                        },
                        
                        //Selection Field
                        {
                            xtype: 'fieldset',
                            title: 'Objects',
                            items: [
                                {
                                    xtype: 'nestedlist',
                                    label: 'Choose one',
                                    store: 'robots_store',
                                    options: [
                                        {text: 'Lights',  value: 'lights'},
                                        {text: 'Robots',  value: 'robots'},
                                        {text: 'Trajectories', value: 'trajectories'},
                                        {text: 'Measurements',  value: 'measurements'},
                                        {text: 'Environment Objects', value: 'environment'}
                                    ]
                                }
                            ]
                        },
                        
                        //Informations about the navigation
                        {
                            xtype: 'fieldset',
                            title: 'Navigation',
                            items: [
                                {
                                    xtype: 'list',
                                    itemTpl: '{title}',
                                      data: [
                                        { title: 'Item 1' },
                                            { title: 'Item 2' },
                                           { title: 'Item 3' },
                                        { title: 'Item 4' }
                                    ]
                                }
                            ]
                        },
                        
                        //Arrows
                        {
                            xtype: 'toolbar',
                            docked: 'bottom',
                            ui: 'light',
                            defaults: {
                                iconMask: true
                            },
                            items: [
                                { xtype: 'spacer' },
                                { iconCls: 'arrow_up' },
                                { iconCls: 'arrow_down' },
                                { iconCls: 'arrow_left' },
                                { iconCls: 'arrow_right' },
                                { xtype: 'spacer' }
                            ]
                        }                
                     ]   
                },
            ]
        }
    });
    This is my model:

    Code:
    Ext.regModel('ListRobots', {
             fields: [
                 {name: 'text', type: 'string'},
                 {name: 'items', type: 'auto'}
             ]
     });
    And this is my store:

    Code:
    GS.robots_store = new Ext.data.TreeStore({    model = 'ListRobots',
        proxy: {
            type: 'ajax',
            url: '/data/robots.json',
            reader: {
                type: 'ajax',
                root: 'items'
            }
        }
    });
    I've already tested my Jason file. It's a valid one. I included my models and stores int the app.js (But I just can see something in the scree if I comment these lines). But nothing happens. I can't see neither the simple list or the nested list. I don't know what's wrong. I have read a lot of things in the docs, but I got nothing.

    Below there is a print screen of what I get from this code. Thanks for any help. And sorry for anything. It's just cause I started with Sencha two days ago and I don't know really much about it yet.

    Captura de Tela 2012-11-29 às 15.09.48.jpg

  2. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    450
    Vote Rating
    66
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Hi,

    Easy answers is you need some height specified on the list and nested list.
    You can do this directly on the components via config or place the in a container with a layout.
    e.g. apply vbox layout to the home component and give then each a a flex of 1

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    156
    Vote Rating
    3
    Answers
    8
    coolfish is on a distinguished road

      0  

    Default


    In the developer console, when you access the store via Ext.getStore(storename) you can check out whether or not the data is loading eg.. store.getData().getCount(). If the data is in there, it's most likely a layout thing - lists size themselves based on what sort of container that they are in. Right now you have your list in a fieldset, which might not properly size for the list. Try setting a height property on the fieldset, as well as the list (something like 200 px). If you start to see stuff, you then know for sure it's a layout problem.

  4. #4
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    450
    Vote Rating
    66
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      0  

    Default


    Apply the vbox to the home component place the flex on the fieldsets

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
    paulaceccon is on a distinguished road

      0  

    Default


    I've already tried this.


    Just to test, I've done this:


    Code:
    var panel = Ext.create('Ext.Panel', {    layout: 'vbox',
    
    
    
    
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Robotics'
            },
            {
                xtype: 'panel',
                flex: 1,
                html: 'Right Panel, 2/3rds of total size',
                style: 'background-color: #759E60;'
                
            },
            //Informations about the navigation
            {
                xtype: 'fieldset',
                title: 'Navigation',
                flex: 1,
                store: navigation_list
                
            }
        ]
    });
    
    
    
    
    var navigation_list = Ext.create('Ext.List', {
        itemTpl: '{title}',
        data: [
            { title: 'Item 1' },
            { title: 'Item 2' },
            { title: 'Item 3' },
            { title: 'Item 4' }
        ]
    });
    
    
    
    
    Ext.Viewport.add(panel);

    But even with this simple code the navigation list doesn't appear. I just can see the title "Navigation", but with no data. I don't what else to try.


    I have noted that if I put a fullscreen = true here:


    Ext.create('Ext.List', {
    itemTpl: '{title}',


    I'm able to see just this list. But I want the exactly screen that I posted before, but with the data. Is this possible?

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    You mean like this?
    stlayout01.png

    I created a new project with CMD3 and replaced the 2. tab with that:
    Code:
                {
                    title: 'Get Started',
                    iconCls: 'action',
                    layout: 'vbox',
                    items: [{
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Robotics'
                    }, {
                        xtype: 'panel',
                        flex: 2,
                        html: 'Right Panel, 2/3rds of total size',
                        style: 'background-color: #759E60;'
                    }, {
                        xtype: 'titlebar',
                        title: 'Navigation'
                    }, {
                        xtype: 'list',
                        flex: 1,
                        itemTpl: '{title}',
                        store: {
                            data: [
                                { title: 'Item 1' },
                                { title: 'Item 2' },
                                { title: 'Item 3' },
                                { title: 'Item 4' }
                            ]
                        }
                    }]
                }

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
    paulaceccon is on a distinguished road

      0  

    Default


    Hi, @ingo.hefti.

    First, thank you a lot!

    Now, it works! And I guess what I wanted to do firstly it's not possible, due to Sencha design. But I now I guess I started to understand a little bit more of hot it works..

    But now I am with trouble with a nestedList.

    I have this files:

    Path app/model/robotList.js

    Code:
    Ext.define('robotList', {    extend: 'Ext.data.Model',
        config: {
            fields: ['text']
        }
    });
    Path app/store/robotStore.js
    Code:
    Ext.define('GS.store.robotsStore', {    extend: 'Ext.data.TreeStore',
        requires: 'GS.model.robotsList',
        id:'robotsStore',
        config:{
            model : 'GS.model.robotsList',
            proxy : {
                type : 'ajax',
                url : '//data/robots.json',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            },
            autoLoad: true
        }
    });
    Path data/robots.json

    Code:
    "items": [{	 "text": "Drinks",
    	 "items": [{
    		 "text": "Water",
    		 "items": [{
    			 "text": "Sparkling",
    			 "leaf": true
    		 }, {
    			 "text": "Still",
    			 "leaf": true
    		 }]
    	 }, {
    		 "text": "Coffee",
    		 "leaf": true
    	 }, {
    		 "text": "Espresso",
    		 "leaf": true
    	 }, {
    		 "text": "Redbull",
    		 "leaf": true
    	 }, {
    		 "text": "Coke",
    		 "leaf": true
    	 }, {
    		 "text": "Diet Coke",
    		 "leaf": true
    	 }]
     }, {
    	 "text": "Fruit",
    	 "items": [{
    		 "text": "Bananas",
    		 "leaf": true
    	 }, {
    		 "text": "Lemon",
    		 "leaf": true
    	 }]
     }, {
    	 "text": "Snacks",
    	 "items": [{
    		 "text": "Nuts",
    		 "leaf": true
    	 }, {
    		 "text": "Pretzels",
    		 "leaf": true
    	 }, {
    		 "text": "Wasabi Peas",
    		 "leaf": true
    	 }]
     }]
    And, finally, my main view:

    Code:
    //Objects Screen            {
                	title: 'Environment',
                    iconCls: 'action',
                    layout: 'vbox',
                    
                    items: 
                    [
    					{
    						docked: 'top',
    						xtype: 'titlebar',
    						title: 'Robotics'
    					},
    					{
    						xtype: 'nestedlist',
    						//flex = 1,
                        	title: 'Scene Objects',
                        	displayField: 'text',
    						store: 'robotsStore'							
    					}
    				]	
    			}
    But I can see nothing again... Sorry, I'm trying to learn Sencha, I really don't know much about it.

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    The data is probably there, only the nested list doesn't have a height, so nothing is visible. I tried with a new tab on my test app:
    Code:
    {
        title: 'Environment',
        iconCls: 'action',
        layout: 'fit',
        items:[{
            xtype: 'nestedlist',
            title: 'Scene Objects',
            displayField: 'text',
            store: 'robotsStore'
        }]
    }
    The layout FIT will expand its childs to the full screen, so the list should be visible.

  9. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    17
    Vote Rating
    0
    rotten69 is on a distinguished road

      0  

    Default The docs

    The docs


    The docs should help a bit

  10. #10
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    0
    paulaceccon is on a distinguished road

      0  

    Default


    Yeah, I used the docs.
    In fact, I did this example (Adding the blogs page -- http://docs.sencha.com/touch/2-0/#!/guide/first_app), and everything works. The problem happens when, instead of a "real"url, like in the example:

    Code:
    url :'https://ajax.googleapis.com/ajax/services/feed/loadv=1.0&q=http://feeds.feedburner.com/SenchaBlog',
    I have a local path, like this:

    Code:
    url: '/data/blogs.json'
    In this case, with the same file, but in a local path, nothing happens, the json is not load. I don't understand why.