Displaying items from nested list view

**darylwade** · 6 Dec 2011, 7:08 PM

hi there,
hoping someone can help with this barrier.

Ive been working off an example I ve found to parse json data into a listedNestView.

I cant seem to get it to display the current item when selected.

Can anyone fill how I can do this?
thanks

here is my code

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch</title>
  <link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="stylesheets/styles.css" rel="stylesheet" type="text/css" media="screen"/>

  <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
  <!-- app, models, stores, views, controllers [in that order!] -->

 <script type="text/javascript">
 Ext.regModel('tickets', {
    idProperty: 'id',
    fields: [
     {name: 'id',       type: 'int'},
        {name: 'title',       type: 'string'},
          {name: 'image',       type: 'string'},
            {name: 'description',       type: 'string'},
        {name: 'city', type: 'string'}
    ]
});


Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function(){
    



        var store = new Ext.data.TreeStore({
            model: 'tickets',
            proxy: {
                type: 'scripttag',
                url: 'http://www.undertheradar.co.nz/feeds/showsRssRegionsiPhoneGrouped_json.php',
                reader: {
                    type: 'tree',
                    root: 'tickets'
                }
            }
        });


        var nestedList = new Ext.NestedList({
            fullscreen: true,
            title: 'Tickets',
            displayField: 'title',
            image: 'image',
            desc: 'description',
            id: 'id',
            // add a / for folder nodes in title/back button
            getTitleTextTpl: function() {
                return '{' + this.displayField + '}<tpl if="leaf !== true">dd</tpl>';
            },
            // add a / for folder nodes in the list
            getItemTextTpl: function() {
                return '<img src="{' + this.image + '}" align="left">{' + this.displayField + '} <tpl if="leaf != true">{' + this.id + '}</tpl>';
            },
            // provide a codebox for each source file
            getDetailCard: function(record, parentRecord) {
                return new Ext.ux.CodeBox({
                    value: 'Loading...',
                    
                    scroll: {
                        direction: 'both',
                        eventTarget: 'parent'
                    }
                });
            },
            store: store
        });


        nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
            var ds = subList.getStore(),
                r  = ds.getAt(subIdx);

            Ext.Ajax.request({
                url: '../../src/' + r.get('id'),
                success: function(response) {
                
                    detailCard.setValue(response.responseText);
                },
                failure: function() {
                    detailCard.setValue("Loading failed.");
                }
            });
        });
    }
});
/*


            new Ext.Application({
                name: 'xmlexample',
                
                launch: function(){
                    Ext.regModel('tickets', {
                        fields: ['title','description','city','image'] //etc...
                    });

                    this.stores.profiles = new Ext.data.TreeStore({
                        model: 'tickets',
                        autoLoad:true,
                        implicitIncludes: true,
                        proxy: {
                            type: 'scripttag',
                            url : 'http://www.undertheradar.co.nz/feeds/showsRssRegionsiPhoneGrouped_json.php',
                            reader: {
                                type  : 'tree',
                                root  : 'tickets'
                        
                            }
                        }
                    });
                var productTpl = new Ext.XTemplate(
                    '<tpl for=".">',
                    '<div class="item">',
                    
                        '<div class="data"><img src="{image}"/> {title} {city} {description} </div>',
                        
                        '</div>',
                        
                    '</tpl>'
                );    
                new Ext.Panel({
                    fullscreen: true,
                    items: new Ext.NestedList({
                        store: this.stores.profiles,
                        tpl: productTpl,
                        itemSelector: 'div.item'
                        //other config goes here
                    })
                });
            }
        });        
        */
        </script>
</head>
<body>
</body>
</html>

**mitchellsimoens** · 9 Dec 2011, 10:44 AM

Getting any errors?

**darylwade** · 11 Dec 2011, 8:14 PM

I wasn't getting any errors, but I've made progress on this.

I can now display the list, and go to a view item, im now trying to style this up.

What im interested in knowing is how to apply a template or style my result

Code:

detailCard.setValue(show)

so I can display an image, with text and links etc

My complete source is:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch</title>
  <link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="stylesheets/styles.css" rel="stylesheet" type="text/css" media="screen"/>

  <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
    <script src="http://localhost/sencha-touch-1.1.1/examples/kitchensink/src/CodeBox.js" type="text/javascript"></script>
  

  <!-- app, models, stores, views, controllers [in that order!] -->

 <script type="text/javascript">
 Ext.regModel('tickets', {
    idProperty: 'id',
    fields: [
     {name: 'id',       type: 'int'},
     {name: 'title',       type: 'string'},
     {name: 'image',       type: 'string'},
     {name: 'description',       type: 'string'},
     {name: 'link',       type: 'string'},
     {name: 'city', type: 'string'}
    ]
});



Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function(){
    



        var store = new Ext.data.TreeStore({
            model: 'tickets',
            proxy: {
                type: 'scripttag',
                url: 'http://www.undertheradar.co.nz/feeds/showsRssRegionsiPhoneGrouped_json.php?callback=callback',
                reader: {
                    type: 'tree',
                    root: 'tickets'
                }
            }
        });

        var nestedList = new Ext.NestedList({
            fullscreen: true,
            title: 'Tickets',
            displayField: 'title',
            image: 'image',
            desc: 'description',
            city: 'city',
            link: 'link',
            leaf: 'leaf',
            id: 'id',
                
             // Add Panel for Leaf nodes
         
              
            // add a / for folder nodes in title/back button
            getTitleTextTpl: function() {
                return '{' + this.displayField + '}<tpl if="leaf == true"> {city}</tpl>';
            },
            // add a / for folder nodes in the list
            getItemTextTpl: function() {
                return '{'+this.city+'}<img src="{' + this.image + '}" align="left"><a href="{' + this.link + '}">{' + this.displayField + '}</a> <tpl if="leaf !== true">{' + this.id + '}</tpl>';
            },

 getDetailCard: function(record, parentRecord) {
                return new Ext.ux.CodeBox({
                    value: 'Loading...',
                    scroll: {
                        direction: 'both',
                        eventTarget: 'parent'
                    }
                });
            },
             store: store,
            // provide a codebox for each source file
       
        });
          nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
            var ds = subList.getStore(),
                r  = ds.getAt(subIdx);
                
                

            Ext.util.JSONP.request({
            
            
            //   scripttag: true, // Use script tag transport
                url: 'http://www.undertheradar.co.nz/feeds/showsRssRegionsiPhoneGrouped_json.php?callback=Ext.util.JSONP.callback&node='+r.get('id'),
             
                //method: 'GET',
                callbackKey : 'callback',
                callback: function(data){
                var show = '<tpl > '+data.tickets[0].city+'</tpl>';
                show += '<tpl > '+data.tickets[0].title+'</tpl>';
                show += '<img src="'+data.tickets[0].image+'">';
                
                detailCard.setValue(show)
                
                
               },
                
        

                success: function(response) {
                    detailCard.setValue(response.responseText);
                },
                failure: function() {
                    detailCard.setValue("Loading failed.");
                }
                
                
            });
        });
        
        
        


    }

});


        </script>

</head>
<body>
</body>
</html>

Thread: Displaying items from nested list view

Thread Tools

Search Thread

Display

Displaying items from nested list view

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News