Using JSON to create a tap list which opens an overlay

**riyaad** · 12 Aug 2011 5:40 AM

Hi guys

I've checked my JSON output against http://jsonlint.com/ and everything seems fine there.
After seeing a few examples and checking the forums I'm still not sure why nothing's rendering

Any help is appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
    <title>dev</title>  
    
    <link rel="stylesheet" href="../sencha/resources/css-debug/sencha-touch.css" type="text/css" media="screen">
    <script type="text/javascript" src="../sencha/sencha-touch-debug.js"></script>
    
<!-- application script -->
<script type="text/javascript">


Ext.setup(
{
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false, 
    
    onReady: function()
    { 
        Ext.regModel('MovieListing', 
        {
            fields: [ 
                        { name: 'name',    type: 'string' },
                        { name: 'summary', type: 'string' } 
                ]
        });
    
    var store = new Ext.data.Store({
            model: 'MovieListing',
            proxy: {
                type: 'ajax',
                url: 'http://dev64.predix.com/getmovies',
                reader: {
                    type: 'json',
                    root: 'moviesitems'
                }
            },
            autoLoad: true
        }),
    
    var itemTemplate = new Ext.XTemplate({    
        tpl: new Ext.XTemplate(
               '<tpl for=".">',
                '{name}',
               '</tpl>'            
        ),
    });  
      
    var movieList = new Ext.List(
    {
        store: store,
           itemTpl: itemTemplate,
        singleSelect: true    
    });
         
    movieList.on("itemtap", function(dataView, index, el, e)
    {
          var movie_name = dataView.store.getAt(index).data.name;
        var movie_summ = dataView.store.getAt(index).data.summary;
           
        this.overlay = new Ext.Panel(
        {
               modal:true,
            centered:true,
            floating:true,
            width: 250,
            height:250,
            styleHtmlContent:true,
            dockedItems:[{xtype:'toolbar', title:movie_name}],
            dock:'top',
            html:'<div style="margin-bottom:10px;"><b>Summary: </b><br/>' + movie_summ + "</div>"
        });
        this.overlay.show('pop');
    });
        
    var mydockedItems = [
    {
        xtype: 'toolbar',
        dock: 'top',
        title: 'next24.tv'
    },
    {
        xtype: 'tabpanel',
        layout: 'card',
        dock: 'top',
        fullscreen: true,
       
        items:[
        { // 1 list with overlay
            title: 'List',
            items: [ movieList ]
        },
        { // 2 about txt
            title: 'About',
            html: '<p>about text goes here</p>',      
        },
        
        { // 3 - form
               title: "Settings",
               xtype: "form",
               items: [
               {
                   xtype: "textfield",
                   name: "name",
                   label: "Name",
                   placeHolder: "your name here"  
               },
               {
                   xtype: "emailfield",
                   name: "email",
                   label: "Email",
                   placeHolder: "you@example.com"  
               },
               {
                   xtype: "urlfield",
                   name: "url",
                   label: "Url",
                   placeHr: "http://www.example.com"  
               },
               {
                   xtype: "datepickerfield",
                   name: "date",
                label: "Date",
                picker: { yearFrom: 2010 }  
              }] // form items          
        }] // outer items
    }] // mydockedItems
 
    var appPanel = new Ext.Panel(
    {
        id: 'appPanel',
        fullscreen: true,
        dockedItems: mydockedItems            
    });


}   // end onReady 
});


</script>    


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

And the json code looks like ...

Code:

{"movieitems": [{"name" : "The Unnamable", "summary" : "Based on H.P. Lovecraft's story of college students who fall prey to a demonic creature when they stay at a mansion."}, {"name" : "Kalifornia", "summary" : "A graduate student and his girlfriend set out on a cross-country road trip to research a book they are writing on serial killers. Along the way, they pick up an ex-con and his girlfriend who will take them on a ride they'll never forget."}, {"name" : "The Baby of Macon", "summary" : "A play about the birth of a miracle baby yields unexpectedly tragic results in this tale from Peter Greenaway."}, {"name" : "Carrie", "summary" : "A teenager becomes the butt of a cruel prom-night prank and retaliates against her classmates with a supernatural fury."}, {"name" : "Foxy Brown", "summary" : "An urban nurse promises a swift and bloody vengeance against the gangsters who murdered her lover in cold blood. Foxy hits the streets in search of the killer and bring him to justice."}, {"name" : "Diamond Skulls", "summary" : "A jealous man becomes increasingly dangerous as his fantasies about his wife's imaginary infidelities escalate."}]}

Regards
Riyaad

**Ian Sorbello** · 12 Aug 2011 6:27 PM

Hello,

I think your problem may be the proxy type. You have chosen 'ajax' - which I think assumes a post-back to the location where your app is hosted.

As you are making a POST out to a different URL - then you need to change this to 'scripttag':

Code:

 proxy: {
                type: 'scripttag',                
               url: 'http://dev64.predix.com/getmovies',                
               reader: {                    
                              type: 'json',                    
                              root: 'moviesitems'                
                }            
};

**Ian Sorbello** · 12 Aug 2011 6:34 PM

Oh - and you also have a typo in the root tag of your reader.
You have "moviesitems" when your JSON actually has "movieitem"

That should fix it

Ian.

**appsandcheese.com** · 12 Aug 2011 7:06 PM

You also have an error with your template

Code:

var itemTemplate = new Ext.XTemplate({    
    tpl: new Ext.XTemplate(
           '<tpl for=".">',
            '{name}',
           '</tpl>'            
    ),
})

should be

Code:

    var itemTemplate = new Ext.XTemplate(   
               '<tpl for=".">',
                '{name}',
               '</tpl>'            
    );

You also have an error after your store definition. You have accidentally left "comma" which is causing JS error so you'll need to remove that. If you make these fixes including what others have mentioned you'll be good to go.

I'd also recommend doing any development with Chrome or Safari developers tools open at all times as these tools will immediately tell you about the syntax errors you've having and will make your development process much easier.

appsandcheese.com

**riyaad** · 15 Aug 2011 3:41 AM

I've tried these, no luck =(

**riyaad** · 18 Aug 2011 1:44 AM

some reading and finally got it working.

here's the code for any whose interested

Code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
    <title>dev</title>  
    
    <link rel="stylesheet" href="../sencha/resources/css-debug/sencha-touch.css" type="text/css" media="screen">
    <script type="text/javascript" src="../sencha/sencha-touch-debug.js"></script>
    
<!-- application script -->
<script type="text/javascript">

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'images/homeblue.png',
    glossOnIcon: false,    
    onReady: function(){
        Ext.regModel('Contact', {
            fields: [
                {name: 'firstName', type: 'string'},
                {name: 'lastName',  type: 'string'}
            ]
        });    
        
        var itemTemplate = new Ext.XTemplate(
            '<tpl for=".">',
                '{firstName} {lastName}',
            '</tpl>'
        );
        
        var store = new Ext.data.Store({
            model: 'Contact',
            autoLoad: true,
            storeId: 'cStore',
            proxy: {
                type: 'ajax',
                url: 'get.json',
                reader: {
                    type: 'json',
                    root: 'Contacts'
                }
            }                                      
        });
        
        var myList = new Ext.List({ 
            store: 'cStore',   
            itemTpl: itemTemplate,
            height: "100%"
        });
    
        myList.on("itemtap",function(dataView,index,item,e){
            var fname = dataView.store.getAt(index).data.firstName;
            var sname = dataView.store.getAt(index).data.lastName;
            this.overlay = new Ext.Panel({
                modal:true,
                centered:true,
                floating:true,
                width:250,
                height:250,
                styleHtmlContent: true,
                dockedItems:[{xtype:'toolbar', title:name}],
                dock:'top',
                html:'<div style="margin-bottom:10px;"><b>Name: ' + fname + "<br/>...with Surname: " + sname + "</b></div>"
            });
            this.overlay.show('pop');
        });
        
        new Ext.Panel({
            fullscreen:true,
            layout:'fit',
            dockedItems:[{xtype:'toolbar', title:'Contact List'}],
            dock:'top',
            scroll:'vertical',
            items:[myList]        
        });
            
    } // function end
    
});

</script>

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

corresponding json code

Code:

{
    "Contacts": [
        {
            "firstName": "Unnamable",
            "lastName": "Lovecraft"
        },
        {
            "firstName": "Kalifornia",
            "lastName": "Forget"
        },
        {
            "firstName": "Baby",
            "lastName": "Greenaway"
        }
    ]
}

Enjoy

ps, this is only the tap list panel!

Using JSON to create a tap list which opens an overlay

Thread Tools

Search Thread

Display

Using JSON to create a tap list which opens an overlay

Using JSON to create a tap list which opens an overlay

ajax vs. scripttag

ajax vs. scripttag

typo in the root

typo in the root

Thank you

Thank you

Okay ...did some more digging around ...and

Okay ...did some more digging around ...and

Tags for this Thread