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>

Displaying items from nested list view

Thread Tools

Search Thread

Display

Unanswered: Displaying items from nested list view

Unanswered: Displaying items from nested list view

Tags for this Thread