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 List item opens overlay

    List item opens overlay


    Hi all,

    I'm new to new Sencha and JS in general. Is there a way to let the user tap on a list item which then opens the details for that particular item using an overlay. I've been reading through the documents and have seen various requests for this as well as some code but always snippets or parts of the puzzle. The code below is what I've collected from web so far.

    3 Tabs:
    1 - contains the list
    2 - an about section, straight fwd
    3 - a form

    Any help would be appreciated.

    Regards

    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('Contact', {
        fields: ['firstName', 'lastName']
    });
    
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',
    
        getGroupString : function(record) {
            return record.get('lastName')[0];
        },
    
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay',     lastName: 'Robinson'}
        ]
    });
    
    var list = new Ext.List({
        fullscreen: true,
        
        itemTpl : '{firstName} {lastName}',
        //grouped : true,
        //indexBar: true,
        
        store: store
    });
    
    /*var overlayPanel = new Ext.form.FormPanel({
    			hideOnMaskTap: false,
    			floating: true,
    			modal: true,
    			centered: true,
    			width: 380,
    			height: 400,
    			styleHtmlContent: true,
    			scroll: 'vertical',
    			items: fieldSet,
    			dockedItems: [{
    				dock: 'top',
    				xtype: 'toolbar',
    				items: [ list ]
    			}]
    
    		});*/
    
        var mydockedItems = [{
            xtype: 'toolbar',
            dock: 'top',
            title: 'Some Title Here'
            },
            {
                xtype: 'tabpanel',
                layout: 'card',
                dock: 'top',
                fullscreen: true,
                items:[
    			{ // 1
                    title: 'List',
    				items: [ list ]
                },
                { // 2
                    title: 'About',
                    html: '<p>about text goes here</p>',      
                },
              	{ // 3
                	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 }  
                  	}
                  ] // Settings items          
              	}] // outer items
            }                
        ]
     
        var appPanel = new Ext.Panel({
            id: 'appPanel',
            fullscreen: true,
            dockedItems: mydockedItems            
        });
    
    }   // end onReady 
    });
    
    </script>	
    
    </head>
    <body></body>
    </html>

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    16
    Vote Rating
    0
    Vasanth77 is on a distinguished road

      0  

    Default


    I dont see you using the "onItemDisclosure" property on your list.
    Only with this you can get the record on which list item you have tapped.
    In the "onItemDisclosure" you have to write a function which should display a floating panel/form as an overlay.

  3. #3
    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 I'm wondering if this is even possible with lists

    I'm wondering if this is even possible with lists


    Hi Vasanth77

    Thanks for your response. I'm not sure what I'm missing here.
    When clicking on the names, nothing happens ... I'm also trying to get rid of the arrows on the right. I've added onItemDisclosure ....
    My apols, I am a noob to this.

    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('Contact', {
        fields: ['firstName', 'lastName']
    });
    
    
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
    //    sorters: 'lastName',
    
    
        getGroupString : function(record) {
            return record.get('lastName')[0];
        },
    
    
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'},
            {firstName: 'Ed',      lastName: 'Spencer'},
            {firstName: 'Jamie',   lastName: 'Avins'},
            {firstName: 'Aaron',   lastName: 'Conran'},
            {firstName: 'Dave',    lastName: 'Kaneda'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay',     lastName: 'Robinson'}
        ]
    });
    
    
    var list = new Ext.List({
        fullscreen: true,    
        itemTpl : '{firstName} {lastName}',    
        store: store,
        singleSelect: true,
        onItemDisclosure: {
            scope: 'test',
            handler: function (record, btn, index) {
                //var person = record.get('firstName');
                //panel.setActiveItem(1, 'slide');          
            }      
        },
    });
    
    
    var detailTemplate = new Ext.XTemplate(
        '<div>',
          'Name: "{firstName}"<br/>',
          'Surname: "{lastName}"<br/>',
        '</div>'
    );
    
    
    var detailPanel = new Ext.Panel({
        floating: true,
        modal: true,
        centered: true,
        width: 300,
        height: 200,
        styleHtmlContent: true,
        scroll: 'vertical',
        tpl: detailTemplate,
        dockedItems: [{
            title: 'Overlay Test'
        }]
    });
    
    
    
    
    
    
        var mydockedItems = [{
            xtype: 'toolbar',
            dock: 'top',
            title: 'Title Here'
            },
            {
                xtype: 'tabpanel',
                layout: 'card',
                dock: 'top',
                fullscreen: true,
                items:[
                { // 1
                    title: 'List',
                    items: [ list ]
                },
                { // 2
                    title: 'About',
                    html: '<p>about text goes here</p>',      
                },
                  { // 3
                    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 }  
                      }
                  ] // Settings items          
                  }] // outer items
            }                
        ]
     
        var appPanel = new Ext.Panel({
            id: 'appPanel',
            fullscreen: true,
            dockedItems: mydockedItems            
        });
    
    
    }   // end onReady 
    });
    
    
    </script>    
    
    
    </head>
    <body></body>
    </html>

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    16
    Vote Rating
    0
    Vasanth77 is on a distinguished road

      0  

    Default


    Sorry for the late reply, i was busy ....

    To get rid of arrows you have write your own 'Cls', basic poperty of an component is derived from the Cls.
    For ex. list componenet Cls is ".x-list" in "sencha-touch.css" if you are good at CSS may be you can write your own Cls for ur list component and use that in "var list". You can set that with "baseCls: urCls"

    In ur "itemDisclosure" function there is no code. You have to get the data from the record and use that in another panel for display. Also i couldnt find time to load ur code and try it here locally. Will do when i find time.

  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


    Hi Vasanth77

    That would be greatly appreciated - thank you. I'm searching the web for some more examples. As mentioned, I'm new to this and find myself somewhat in the deep end regarding the whole Sencha Touch/ExtJS thing. Any helps most welcome

    Regards
    Riyaad

  6. #6
    Sencha User
    Join Date
    Jul 2010
    Location
    Switzerland
    Posts
    78
    Vote Rating
    0
    fx-mike is on a distinguished road

      0  

    Default


    If I understood you correctly, showing the overlay is the only thing you want to do with the list items, right? So just get rid of the disclosure altogether and use the itemtap event:

    Code:
    var list = new Ext.List({
        fullscreen: true,    
        itemTpl : '{firstName} {lastName}',    
        store: store,
        singleSelect: true,
        onItemtap: function (item, index, e) {
                var record = store.getAt(index);
                //do stuff, e.g. 
                detailPanel.update(record); //this is untested, have a look at the api!
            }      
        },
    });

  7. #7
    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 Nice =)

    Nice =)


    Hi fx-mike

    Awesome, thanks. You correct, I only wish to display some more detail regarding the user listed in the original list. The added details will be derived from a MySQL DB. I'll have at the API's doc for this.

    Thx again

  8. #8
    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 I found the solution here

    I found the solution here


    Okay {finally} here goes,

    If anyone else is looking for this .... here they are

    Part 1 Part 2 & Part 3

Thread Participants: 2

Tags for this Thread