1. #1
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default Using JSON to create a tap list which opens an overlay

    Using JSON to create a tap list which opens an overlay


    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

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    Ian Sorbello is on a distinguished road

      0  

    Default ajax vs. scripttag

    ajax vs. scripttag


    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'                
                    }            
    };

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    Ian Sorbello is on a distinguished road

      0  

    Default typo in the root

    typo in the root


    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.

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    appsandcheese.com is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

    Default Thank you

    Thank you


    I've tried these, no luck =(

  6. #6
    Sencha User riyaad's Avatar
    Join Date
    Jul 2011
    Location
    Cape Town
    Posts
    240
    Vote Rating
    1
    riyaad is on a distinguished road

      0  

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

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


    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!
    Last edited by riyaad; 18 Aug 2011 at 1:46 AM. Reason: ammend

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi