How to create something like iPhone settings menu?

**abierbaum** · 9 Nov 2010 11:56 AM

How would I create a GUI like this using Sencha Touch?

It is something like a set of lists but each item behaves more like a button that brings up a new panel. I have created something like it where I have a panel with a card layout and a set of buttons. When the user clicks a button, the active item of the panel is switched to whatever subpanel should be displayed. But the buttons don't look right because they need to group together and look more like a list.

Am I going about this all wrong? (note: I thought about using a NestedList, but that just doesn't match up correctly. I don't have hierarchical data, I have button groups that load panels)

**Steffen Hiller** · 9 Nov 2010 2:54 PM

Interesting question.

I would probably try to use the List and arrange them via the vbox layout vertically. Then add the icons via CSS/itemTpl and round the corners of each List via CSS as well.
To make the click action work, I would add automatically a class to each item with the items value, such as class="sounds" and add a click listener to the list and check the class name of the target element and depending on the class name switch to the correct card.

That's just my idea for now.

**abierbaum** · 10 Nov 2010 7:33 AM

I was thinking of doing is similarly but thought I must be missing something simple. It seems like a great deal of overhead for something so simple. All I really want to do is say "Give me a group of buttons with this text and these icons.". This may be a good place for a nice little extension to make this simple since I have to think other people would want to do something similar to this as well.

**abierbaum** · 12 Nov 2010 3:13 PM

I am still wondering about this one. Is there any easier way to do this? I think I am going to want to do this over and over and would like to find a nice simple way to create a "panel" that is stylized like this and add content to it.

**tomalex0** · 14 Nov 2010 11:45 PM

Hi,

I have tried to make a simple extension to for the layout you shown.I used List and using grouping property.

Base js

Code:

Ext.SettingsPanel = Ext.extend(Ext.List, {
        groupTpl : [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',,
                '<h3 class="x-list-header x-settings-header" ></h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
	]
});

Ext.reg('settingspanel',Ext.SettingsPanel);
Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady : function() {
            Ext.regModel('settingsModel', {
                fields: ['section', 'type','childpanel']
            });

            var settingsStore = new Ext.data.JsonStore({
                model  : 'settingsModel',
                getGroupString : function(record) {
                    return record.get('type');
                },
                data: [
                    {"section":"Airplane Mode","type":"network","childpanel" : "bookSettingsPanel","icon":'data:image/png;base64,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'},
                    {"section":"Wifi","type":"network","childpanel" : "bookServiceGroupsPanel","icon":'data:image/png;base64,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'},
                    
                    {"section":"Sound","type":"utility","childpanel" : "sellSetingsPanel","icon":'data:image/png;base64,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'},
                    {"section":"Brightness","type":"utility","childpanel" : "sellVendorPanel","icon":'data:image/png;base64,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'},
                    {"section":"Wallpaper","type":"utility","childpanel" : "sellProductGroupsPanel","icon":'data:image/png;base64,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'}
                ]
            });
            var settingsBasePanel =  new Ext.Panel({
                layout:{
                    type:'vbox',
                    align:'stretch'
                },
                baseCls: 'blackback',
                fullscreen:true,
                scroll:'vertical',
                items: [{
                    fullscreen:true,
                    scroll:false,
                    xtype: 'settingspanel',
                    cls:'settingscls',
                    grouped     : true,
                    indexBar    : false,
                    singleSelect: true,
                    onItemDisclosure: true,
                    store:settingsStore,
                    itemTpl: '<tpl for="."><div ><img src ="{icon}" class="icon" /><strong>{section}</strong></div></tpl>',
                    listeners:{
                        itemtap : function(dataview,index,item,e){
                            console.log(dataview.store.getAt(index).data.childpanel);
                        }
                    }
                }]
            });
            var baseSettingsPanel = new Ext.Panel({
                layout:'card',
                scroll:false,
                fullscreen:true,
                items:[settingsBasePanel]
            });
    }
});

Css

HTML Code:

<style type="text/css">
       .blackback{
            -webkit-background-size: 0.438em 100%;
            background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#C5CCD4), color-stop(0.71, #C5CCD4), color- stop(0.72, #CBD2D8), to(#CBD2D8));
            background-color:black;
        }
        .settingscls{
            background:transparent;
        }
        .settingscls  .x-list-header{
          background-image:none  ;
          background-color:transparent;
          border:none;
          -webkit-box-shadow:none;
          text-shadow: #000 0 1px 1px;
        }
        .settingscls .x-list-group-items,.coachlist_items .x-list-group-items{
             padding:1em 1em 0em 1em;
             text-shadow: #fff 0 1px 1px;
        }
        .settingscls,.coachlist_items{
             padding-top:20px !important;
        }
        
        .settingscls .x-list-group-items :first-child, .coachlist_items .x-panel-body :first-child{
             -webkit-border-top-left-radius: 0.4em ;
             -webkit-border-top-right-radius: 0.4em;
        }
        
        .settingscls .x-list-group-items :last-child, .coachlist_items .x-panel-body :last-child{
             -webkit-border-bottom-left-radius: 0.4em;
             -webkit-border-bottom-right-radius: 0.4em;
        }
       .settingscls .x-list-disclosure{
        width: 10px;
        height: 13px;
        margin-top:0.6em;
        right:1em !important;
        -webkit-mask:none;
        -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');
        }
        .settingscls .x-list-item{
            background:white;
        }
        .icon{
          margin-right:20px;
          vertical-align:middle;
        }
    </style>

You could do in a better way by using baseCls for settingspanel. Hope this would help you

**tomalex0** · 15 Nov 2010 10:27 PM

settings.png

**voidnothings** · 19 Nov 2010 12:14 AM

Originally Posted by tomalex0

Hi,

I have tried to make a simple extension to for the layout you shown.I used List and using grouping property.

Base js

Code:

Ext.SettingsPanel = Ext.extend(Ext.List, {
        groupTpl : [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{id}">',,
                '<h3 class="x-list-header x-settings-header" ></h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
	]
});

Ext.reg('settingspanel',Ext.SettingsPanel);
Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady : function() {
            Ext.regModel('settingsModel', {
                fields: ['section', 'type','childpanel']
            });

            var settingsStore = new Ext.data.JsonStore({
                model  : 'settingsModel',
                getGroupString : function(record) {
                    return record.get('type');
                },
                data: [
                    {"section":"Airplane Mode","type":"network","childpanel" : "bookSettingsPanel","icon":'data:image/png;base64,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'},
                    {"section":"Wifi","type":"network","childpanel" : "bookServiceGroupsPanel","icon":'data:image/png;base64,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'},
                    
                    {"section":"Sound","type":"utility","childpanel" : "sellSetingsPanel","icon":'data:image/png;base64,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'},
                    {"section":"Brightness","type":"utility","childpanel" : "sellVendorPanel","icon":'data:image/png;base64,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'},
                    {"section":"Wallpaper","type":"utility","childpanel" : "sellProductGroupsPanel","icon":'data:image/png;base64,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'}
                ]
            });
            var settingsBasePanel =  new Ext.Panel({
                layout:{
                    type:'vbox',
                    align:'stretch'
                },
                baseCls: 'blackback',
                fullscreen:true,
                scroll:'vertical',
                items: [{
                    fullscreen:true,
                    scroll:false,
                    xtype: 'settingspanel',
                    cls:'settingscls',
                    grouped     : true,
                    indexBar    : false,
                    singleSelect: true,
                    onItemDisclosure: true,
                    store:settingsStore,
                    itemTpl: '<tpl for="."><div ><img src ="{icon}" class="icon" /><strong>{section}</strong></div></tpl>',
                    listeners:{
                        itemtap : function(dataview,index,item,e){
                            console.log(dataview.store.getAt(index).data.childpanel);
                        }
                    }
                }]
            });
            var baseSettingsPanel = new Ext.Panel({
                layout:'card',
                scroll:false,
                fullscreen:true,
                items:[settingsBasePanel]
            });
    }
});

Css

HTML Code:

<style type="text/css">
       .blackback{
            -webkit-background-size: 0.438em 100%;
            background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#C5CCD4), color-stop(0.71, #C5CCD4), color- stop(0.72, #CBD2D8), to(#CBD2D8));
            background-color:black;
        }
        .settingscls{
            background:transparent;
        }
        .settingscls  .x-list-header{
          background-image:none  ;
          background-color:transparent;
          border:none;
          -webkit-box-shadow:none;
          text-shadow: #000 0 1px 1px;
        }
        .settingscls .x-list-group-items,.coachlist_items .x-list-group-items{
             padding:1em 1em 0em 1em;
             text-shadow: #fff 0 1px 1px;
        }
        .settingscls,.coachlist_items{
             padding-top:20px !important;
        }
        
        .settingscls .x-list-group-items :first-child, .coachlist_items .x-panel-body :first-child{
             -webkit-border-top-left-radius: 0.4em ;
             -webkit-border-top-right-radius: 0.4em;
        }
        
        .settingscls .x-list-group-items :last-child, .coachlist_items .x-panel-body :last-child{
             -webkit-border-bottom-left-radius: 0.4em;
             -webkit-border-bottom-right-radius: 0.4em;
        }
       .settingscls .x-list-disclosure{
        width: 10px;
        height: 13px;
        margin-top:0.6em;
        right:1em !important;
        -webkit-mask:none;
        -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');
        }
        .settingscls .x-list-item{
            background:white;
        }
        .icon{
          margin-right:20px;
          vertical-align:middle;
        }
    </style>

You could do in a better way by using baseCls for settingspanel. Hope this would help you

Hi tomalex0,

A newbie question here, what's the use of long strings on the image URLs?
e.g

Code:

-webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAALRJREFUeNpi/P//P8OkSZMkGBgYtgNxfV5e3iYGLIBZSEhIGkjvB2Id IA4+efLkJXNz85voCpmgNBsSvRpogx+GQqBVT4G0LRDfx6cYbCIexd7oViMrvoOkeB1MMSPI18gA KGEPpA4gCYFs0WBCU6QCpJYiCYFscQPa9osJSZE61CRpJEW2QEV34G6EKtqLpOgRVNF95ADHpsgB WRHMxI9A/AWfIliAvwBJAvFudOuQAUCAAQDiG0runJxCpwAAAABJRU5ErkJggg==');

How to create something like iPhone settings menu?

Thread Tools

Search Thread

Display

Hybrid View

How to create something like iPhone settings menu?

How to create something like iPhone settings menu?

This is how it looks

This is how it looks

Similar Threads

Testing iPhone app wihout iphone (or simulator): Chrome user agent spoofing?

[OPEN-445] iPhone is not detected when desktop safari is set to use iPhone user agent

Create Menu shortcut

please help me.. i want to create new tabs using dropdown menu. but dropdonw menu i..

[HELP] Using .each() to create Ext.menu.Menu from DataStore

Tags for this Thread