PDA

View Full Version : List item opens overlay



riyaad
2 Aug 2011, 6:13 AM
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


<!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: "[email protected]"
},
{
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>

Vasanth77
2 Aug 2011, 10:23 AM
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.

riyaad
3 Aug 2011, 6:49 AM
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. :((


<!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: "[email protected]"
},
{
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>

Vasanth77
4 Aug 2011, 9:54 PM
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.

riyaad
5 Aug 2011, 12:07 AM
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

fx-mike
5 Aug 2011, 2:10 AM
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:



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!
}
},
});

riyaad
5 Aug 2011, 2:19 AM
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

riyaad
5 Aug 2011, 6:52 AM
Okay {finally} here goes,

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

Part 1 (http://jbkflex.wordpress.com/2011/07/30/writing-your-first-sencha-touch-application-part1/) Part 2 (http://jbkflex.wordpress.com/2011/07/30/writing-your-first-sencha-touch-application-%E2%80%93-part2/) & Part 3 (http://jbkflex.wordpress.com/2011/08/01/writing-your-first-sencha-touch-application-%E2%80%93-part3/)